jQuery Thumbs, rendez vos miniatures sexy

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 --> loupe
    (changez son url si besoin dans le fichier css fourni)

Voir une demo avec plusieurs exemples.

-----

Articles relatifs

  1. 16/08/2007 à 12:13 | #1

    Merci bien pour cette idée et ce petit tuto sympa. :)

  2. 16/08/2007 à 17:19 | #2

    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

  3. 16/08/2007 à 19:19 | #3

    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

  4. 17/08/2007 à 00:29 | #4

    @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 :)

  5. 19/08/2007 à 21:08 | #5

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

  6. 03/06/2008 à 04:09 | #6

    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 ;)

  7. Beachattitude
    13/03/2009 à 23:45 | #7

    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

  8. Muby
    02/11/2009 à 00:03 | #8

    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

  9. Tahar
    31/03/2010 à 19:13 | #9

    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

  10. Elric
    31/03/2010 à 19:17 | #10

    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

  11. Elric
    01/04/2010 à 12:53 | #11

    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