Linea21

Accueil »

CreationGalerie » History » Revision 3

Revision 2 (Simon, 10/14/2014 03:24 PM) → Revision 3/4 (Simon, 10/14/2014 03:25 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/ [[http://www.slidesjs.com/]] et plus précisément http://www.slidesjs.com/examples/playing/. [[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> 


 Code CSS utilisé :  
 <pre> 
 <code class="css"> 
 /* 
 * Slides-SlidesJS-3 */ 

	 .slideshow-container {margin:0;} 
	
    #slides { 
       display: none 
     } 

     #slides .slidesjs-navigation { 
       margin-top:5px; 
     } 

     a.slidesjs-next, 
     a.slidesjs-previous, 
     a.slidesjs-play, 
     a.slidesjs-stop { 
       background-image: url(../js/Slides-SlidesJS-3/examples/playing/img/btns-next-prev.png); 
       background-repeat: no-repeat; 
       display:block; 
       width:12px; 
       height:18px; 
       overflow: hidden; 
       text-indent: -9999px; 
       float: left; 
       margin-right:5px; 
     } 

     a.slidesjs-next { 
       margin-right:10px; 
       background-position: -12px 0; 
     } 

     a:hover.slidesjs-next { 
       background-position: -12px -18px; 
     } 

     a.slidesjs-previous { 
       background-position: 0 0; 
     } 

     a:hover.slidesjs-previous { 
       background-position: 0 -18px; 
     } 

     a.slidesjs-play { 
       width:15px; 
       background-position: -25px 0; 
     } 

     a:hover.slidesjs-play { 
       background-position: -25px -18px; 
     } 

     a.slidesjs-stop { 
       width:18px; 
       background-position: -41px 0; 
     } 

     a:hover.slidesjs-stop { 
       background-position: -41px -18px; 
     } 

     .slidesjs-pagination { 
       margin: 7px 0 0; 
       float: right; 
       list-style: none; 
     } 

     .slidesjs-pagination li { 
       float: left; 
       margin: 0 1px; 
     } 

     .slidesjs-pagination li a { 
       display: block; 
       width: 13px; 
       height: 0; 
       padding-top: 13px; 
       background-image: url(../js/Slides-SlidesJS-3/examples/playing/img/pagination.png); 
       background-position: 0 0; 
       float: left; 
       overflow: hidden; 
     } 

     .slidesjs-pagination li a.active, 
     .slidesjs-pagination li a:hover.active { 
       background-position: 0 -13px 
     } 

     .slidesjs-pagination li a:hover { 
       background-position: 0 -26px 
     } 

     #slides a:link, 
     #slides a:visited { 
       color: #333 
     } 

     #slides a:hover, 
     #slides a:active { 
       color: #9e2020 
     } 

 </code> 
 </pre>