Créer un slideshow avec Galleria

Très jolie galerie réalisée à l'aide de Galleria : des miniatures sur lesquelles on clique pour voir l'image en grande taille

Voir Galleria

Première étape :

A - Allez sur Galleria

Cliquez sur Download - Galleria 1.0 / 16kb

Une page de votre navigateur s'ouvre avec ce fichier

Sur votre navigateur, vous faîtes :

1. Edition - Tout sélectionner
   
2. Edition - Copier
   

Sur votre PC :

• vous ouvrez votre bloc-notes
  
• vous faîtes
  
  • Edition - Coller
    
• vous enregistrez sous jquery.galleria.js
  

B - Toujours sur Galleria

Cliquez sur Galleria 1.0 CSS

Une page de votre navigateur s'ouvre avec ce fichier

Sur votre navigateur, vous faîtes :

1. Edition - Tout sélectionner
   
2. Edition - Copier
   

Sur votre PC :

• vous ouvrez votre bloc-notes
  
• vous faîtes :
  
  • Edition - Coller
    
• vous enregistrez sous galleria.css
  

C - Toujours sur Galleria

Cliquez sur 1. Download the latest jQuery release

Vous arrivez sur le site JQuery

Vous cliquez sur 1.2.6 (Release Notes) Minified

Vous venez d'enregistrer le fichier jquery-1.2.6.min.js

Deuxième étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :

• vous créez un répertoire nommé : Galleria
  
• vous y sauvegardez les fichiers :
  
  • galleria.css
    
  • jquery-1.2.6.min.js
    
  • jquery.galleria.js
    
• vous notez leur adresse
  

Troisième étape :

Lors de la conception de votre galerie, vous collez en HTML

<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
<script type="text/javascript">
    jQuery(function($) {      
        $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability      
        $('ul.gallery_demo').galleria({
            history   : true, // activates the history object for bookmarking, back-button etc.
            clickNext : true, // helper for making the image clickable
            insert    : '#main_image', // the containing selector for our main image
            onImage   : function(image,caption,thumb) { // let's add some image effects
for demonstration purposes      
                // fade in the image & caption
                if(! ($.browser.mozilla &&
navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
                    image.css('display','none').fadeIn(1000);         
     }
                caption.css('display','none').fadeIn(1000);
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // fade out inactive thumbnail
                _li.siblings().children('img.selected').fadeTo(500,0.3);
                // fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');
                // add a title for the clickable image
                image.attr('title','Next image >>');
            },
            onThumb : function(thumb) { // thumbnail effects goes here
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.3';
                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() {
_li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
                )
            }
        });
    });
    </script>

Vous remplacez les adresses en rouge par vos propres adresses, notées à la 2ème étape.

Si vous êtes sur Over-Blog, vous pouvez utiliser mes adresses.

Ensuite, toujours en HTML, vous collez

<style media="screen,projection" type="text/css">
    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140%
georgia,serif;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:702px;margin:0 auto;}
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif; letter-spacing:3px;text-transform:uppercase;}
    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}
    </style>

Il s'agit du CSS de votre galerie, vous pouvez le personnaliser : taille, marges, bordures...

Et enfin, la galerie en elle même, toujours en HTML

<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/at_symbol.jpg"
alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/datenscheiben.jpg"
alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/farbraum.jpg" alt="Grass Blades"
title="Apple nature desktop images"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/fries.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/kunst.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/platsch.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_1.jpg"
alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus
pellentesque."></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_2.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/stimme_von_oben.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

En bleu, les adresses des images
En vert, le texte qui apparaît dessous