Il y avait bien longtemps que je ne vous avait pas parlé de mon framework javascript préféré : jQuery. Cette fois c’est pour vous parler d’un petit plugin sympathique pour agrémenter vos sites avec un défilement d’images.
Ce plugin, c’est Easy Gallery.
Le code que vous pouvez visualiser sur la démonstration, est le suivant :
$(document).ready(function (){
$("#gallery").egallery({
width:500,
height:230,
speed: 1000,
delay:4000,
easing:'easeInOutBack',
thumbs:'numbers',
thumbClass:'tclass',
aClass:'ac'
});
});
$("#gallery").egallery({
width:500,
height:230,
speed: 1000,
delay:4000,
easing:'easeInOutBack',
thumbs:'numbers',
thumbClass:'tclass',
aClass:'ac'
});
});
Et le html de vos images :
<div id="gallery">
<ul>
<li><img src="eg-images/image1.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image2.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image3.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image4.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image5.jpg" border="0" alt="" /></li>
</ul>
</div>
<div id="ssgThumbs"></div>
<ul>
<li><img src="eg-images/image1.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image2.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image3.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image4.jpg" border="0" alt="" /></li>
<li><img src="eg-images/image5.jpg" border="0" alt="" /></li>
</ul>
</div>
<div id="ssgThumbs"></div>
Ça reste donc assez ludique et compréhensible, pour un rendu agréable.
Articles qui peuvent vous intéresser :
- Pajinate – Plugin jQuery – La pagination en javascript
- jQuery – 20 plugins jQuery à retenir
- jqIsoText – Plugin jQuery – Effet de texte isométrique
- YoxView – Plugin jQuery – Une lightbox améliorée
- Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Je ne sais pas encore à quel niveau, mais ça va bien me servir
merci !
mich.
[...] Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos [...]