jQuery Thumbs, rendez vos miniatures sexy

16/08/2007
WebDev et Design Allez aux commentaires

Allez, aujourd'hui nous je vais vous présenter un effet javascript non pas pour la navigation, mais pour vos images ..

Avec jQuery Thumbs, vous allez rendre toutes vos miniatures d'images attrayantes en leurs ajoutant un cadre avec un petit bandeau de zoom.

  1. On intègre évidement la librairie jQuery

    <script type="text/javascript" src="jquery.js"></script>
  2. On intègre le plugin jQuery Thumbs
    <script type="text/javascript" src="jquery.jthumb.js"></script>
  3. On inclut cette css
    <link rel="stylesheet" type="text/css" href="thumbs.css" media="screen" />
  4. Et maintenant, vous donnez la class "thumb" à chaque miniature sur laquelle vous voulez voir l'effet
    <img src="clouds.jpg" class="thumb" alt="clouds" width="150" height="150" />
  5. Evidement n'oubliez pas de mettre l'image de la loupe sur votre serveur

Voir une demo avec plusieurs exemples.

-----

Articles relatifs

  • Merci bien pour cette idée et ce petit tuto sympa. 🙂

  • Nico

    Je suis pas très fort en langage info, est-ce que c’est le genre de chose qui peut-être automatisée ? Je parle pour mon intérêt perso, pour un blog sous dotclear. Les simples lignes de codes citées dans le tuto suffisent-elles, ou faut-il sur chaque thumb ajouter manuellement la class « thumb » ?

    merci,
    nico

  • Christophe Lefevre

    C’est vrai qu’il y a plein de truc sympa sur JQuery, mais bon, moi je reste fidèle à Prototype et tant pis si ça n’évolue pas beaucoup, le language reste fort puissant

  • k-ny

    @Nico

    avec une fonction dans ce genre:

    $(document).ready(function(){
    $(« img »).addClass(« thumb »);
    }

    ?

    @Christophe
    Oui prototype est clairement puissant (sinon scriptaculous ne s’appuierait pas dessus), mais effectivement moins populaire au niveau des plugins … dommage.

    Et puis je trouve jquery plus simple au niveau selecteurs 🙂

  • Nico

    ^^ merci pour la réponse !
    c’est du charabia pour moi ! tant pis…

  • x@v

    Bonjour j’ai essayé de modifier la taille
    $(document).ready(function()
    {
    $(‘.voiture’).jqGalScroll({ease: null, speed:0, width: 200, height: 200, titleOpacity : .60
    , direction : ‘vertical’});
    });
    Mais sa effiche les photo en se chevauchant !
    Avez-vous une solution ?
    Merci 😉

  • Beachattitude

    Bonjour,

    superbe site sur lequel je viens régulièrement trouver des petites astuces !!

    Mais là j’y arrive pas, jai bien appliqué tout ce qu’il y a à faire sur le site de démo, mais sur ma version en ligne ça ne fonctionne pas… réduit au strict minimum cette thumb ne se créé pas

    Si quelqu’un peut me donner son astucse ou un lien vers d’autresfichiers js

    vous pouvez checker le code source ici : http://www.soflowers.fr/mars/thumb-test.php ou alors je suis aveugle et y’a balise ou un caractère que je ne vs pas.

    MErci

  • Muby

    Bonjour,

    j’aimerai savoir pourquoi lorsque je test jquery.thumbs sur chrome il n’arrive pas a center l’image ?

    si on essaye sur le site de l’auteur cela marche car il y a un bouton pour activer, mais moi je voulais le faire avec un :

    $(document).ready(function(){
    $(« img.thumb »).thumbs();
    $(« img.thumb »).thumbsImg();
    });

    et sur chrome cela fonctionne pas ?

    Une idée ? 😉

    merci d’avance

  • Tahar

    Bonjour. Ce script me serait bien utile mais impossible de le faire fonctionner. Pourtant cela ne semble pas sorcier. 2 fichiers js à lier à la page html (jquery ey jquery.thumbs) et 1 fichier css (thumbs.css) et on applique la classe thumb à notre balise image (img) mais hélas le script ne s’applique pas et mon image est déformée et non harmonieusement recadrée comme sur votre démo.
    De plus votre démo rend l’effet visible via 1 input. Moi je voudrai juste faire apparaître mes images sous forme de thumbnail.
    Aurais je oublié de faire quelque chose ?
    Merci de votre aide

  • Elric

    Voici le code de ma page :

    Test thumb

    $(document).ready(function() {
    $(« a.thumb, img.thumb »).jThumb(); // the wrapping function
    $(« a.thumb img, img.thumb »).jThumbImg(); // the img positioning function (optional)
    });

    Voilà je ne vois pourtant pas d’erreur
    Merci

  • Elric

    Bonjour, tout fonctionne sauf le positionnement central avec jquery.
    Il marche seulement avec le jquery recupéré sur la page de démo.

    Donc quand procéder pour que le positionnement central (2ème partie du script sur jquery.jthumb.js fonctionne.

    Merci