Linea21

Accueil »

CreationGalerie » History » Revision 2

Revision 1 (Simon, 10/14/2014 03:18 PM) → Revision 2/4 (Simon, 10/14/2014 03:24 PM)

h1. Création d'une galerie d'images 

 h2. Diaporama natif (en mode _overlay_) 

 Linea21 utilise par défaut le plugin jquery Colorbox 

 Pour créer une galerie il suffit, *directement depuis l'éditeur WYSIWYG,* de déclarer les instructions javascript suivantes : 

 <pre> 
 <code class="javascript"> 
 <p><!-- -- javascript ----></p> 
     $(function(){ 
       $(".slideshow").colorbox({ 
            rel:'slideshow', 
            slideshow:true, 
            slideshowStart: "Démarrer le diaporama", 
            slideshowStop: "Stopper le diaporama", 
            slideshowSpeed: 3000, 
            current: "image {current} de {total}", 
            previous: "précédent", 
            next: "suivant", 
            close: "fermer", 
       }); 
     }); 

 </script> 
 </code> 
 </pre> 

 et le code HTML suivant : 

 <pre> 
 <code class="html"> 
 <p><a alt="yop" class="slideshow" href="../library/userfiles/images/images_DSC02023.jpg"><img class="nomouseover" src="../library/userfiles/images/images_DSC02023.jpg" style="height: 200px; width: 300px;" /></a></p> 

 <div id="slides2" style="display:none"> 
 <p><a class="slideshow" href="../library/userfiles/images/images_DSC02030.jpg" title="yop">test</a></p> 

 <p><a class="slideshow" href="../library/userfiles/images/images_DSC02046.jpg" title="yop 2">test 2</a></p> 

 <p><a class="slideshow" href="../library/userfiles/images/images_DSC02053.jpg" title="yop 3">test 3</a></p> 
 </div> 
 </code> 
 </pre> 

 La page ainsi créer affichera une image cliquable. Au clic, le diaporama sera automatiquement lancer. 


 h2. Diaporama externe (exemple en mode slide avec SlidesJS)  

 L'exemple présenté ci-dessous utilise [[http://www.slidesjs.com/]] et plus précisément [[http://www.slidesjs.com/examples/playing/]]. 

 <pre> 
 <code class="javascript"> 
 <p><!-- -- javascript ----></p> 
 <script src="../path/js/Slides-SlidesJS-3/source/jquery.slides.min.js"></script><script> 
     $(function(){ 
       $("#slides").slidesjs({ 
         width: 550, 
         height: 350, 
         play: { 
           active: true, 
           auto: true, 
           interval: 4000, 
           swap: true, 
           pauseOnHover: true, 
           restartDelay: 2500 
         } 
       }); 
     }); 
 </script> 
 </code> 
 </pre> 

 Et pour la partie HTML :  
 <pre> 
 <code class="html"> 
 <div class="slideshow-container"> 
 <div id="slides"> 
 <img class="nomouseover" src="http://placehold.it/550x350" /> 
 <img class="nomouseover" src="http://placehold.it/550x350" /> 
 <img class="nomouseover" src="http://placehold.it/550x350" /> 
 <img class="nomouseover" src="http://placehold.it/550x350" /> 
 <img class="nomouseover" src="http://placehold.it/550x350" /> 
 </div> 
 </div> 
 </code> 
 </pre>