Plugin Galerie jQuery Zoom avec effet flash

zoomer-galerie

Vous voulez transformer une liste d’images en une jolie galerie avec effet zoom flash, alors voici un nouveau plugin qui fera cela pour vous.

Du nom de Zoomer Gallery, ultra léger (2kb) et simple à utiliser avec des paramètres ajustables tels que la vitesse d’animation, du titre, cela vaut le détour.

La démonstration parle d’elle-même

HTML

<ul>
<li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
<li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
<li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>
</ul>

CSS

ul.thumb li img {
width: 100px;
height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}

ul.thumb li img.hover
{
margin-top:15px;
background:url(thumb_bg.png) no-repeat center center;
border: none;
}

Et pour finir l’appel javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="zoomer.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $(‘ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,
speedTitle:400,debug:false});
 });
 </script>



Informations

Site officiel: http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/
Téléchargement: http://www.addyosmani.com/resources/zoomer/zoomer.for.jquery-1.0.zip
Démonstration: http://www.addyosmani.com/resources/zoomer/zoomer.html

A voir aussi

Réseau

Sites