Guillaume Voisin‘in jQuery için geliştirdiği bu eklenti benzerlerinden biraz farklı olan bir slide galeri örneği sunuyor bize. manuel ve auto olarak tek tıkla ayarlanabilir özellik resimlerin üzerinde adeta bir videoplayer görüntüsü oluşturuyor.
Kullanımı :
- Head etiketleri arasına yerleştirmeniz gereken bölüm.
Js ve stil dosyaları :
<link href="page.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
JavaScript :
<script type="text/javascript"> $(document).ready(function(){ $(".diaporama1").jDiaporama({ animationSpeed: "slow", delay:2 }); }); </script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul class="diaporama1"> <li> <img src="img/galerie/image1.jpg" alt="On the road again" title="Sur la route de l'ouest, Arizona © Guillaume Voisin" /> </li> <li> <img src="img/galerie/image2.jpg" alt="Venice Beach, California" /> </li> <li> <img src="img/galerie/image3.jpg" alt="" title="Les garde-côte sur les plages de Malibu © Guillaume Voisin" /> </li> <li> <img src="img/galerie/image4.jpg" alt="Universal Studios" title="Le parc d'attractions Universal Studios © Guillaume Voisin" /> </li> <li> <img src="img/galerie/image5.jpg" alt="Hollywood Sign" title="Le fameux panneau Hollywood sur la colline © Guillaume Voisin" /> </li> </ul>