Un simple plug-in JavaScript/jQuery qui permet d'afficher rapidement les images.

Question

Y a-t-il un bon JavaScript / jQuery un plug-in qui permet d'afficher rapidement une image en cliquant dessus ?

Je veux que ce soit simple et que lorsque l'on clique sur la vignette de l'image, celle-ci soit agrandie en taille réelle.

Idéalement, il suffirait de donner une classe à l'image et JavaScript/jQuery s'occuperait du reste.

Semblable à certains sur les images de cette page de Apple.com voir la première image sous "Importation".

Je ne cherche pas quelque chose d'aussi compliqué qu'une boîte à lumière, pas besoin de diaporama, de longues introductions et de fondu en arrière-plan.

Answer 1

C'est peut-être celui que vous recherchez :

http://gettopup.com/

J'espère que cela vous aidera.

Answer 2

Assez facile en utilisant le plugin de dialogue jQuery UI. Cela suppose que votre thumb dimensionne l'image à la taille d'une vignette, en réutilisant la même url src pour l'image. Si la vignette a une url différente, c'est-à-dire que c'est une image différente, alors vous devez trouver un moyen de stocker l'image en taille réelle avec la vignette (attribut personnalisé ?) ou de transformer l'url de la vignette en url de l'image en taille réelle. Cette dernière solution est triviale si vous ajoutez "_thumb" au nom de la vignette de l'image ; il suffit d'utiliser la chaîne de caractères suivante replace fonction.

$('img.thumb').click( function() {
    $('<div><img src="' + $(this).attr('src') + '" /></div>').dialog({
        autoOpen: true,
        modal: true, // if you want it to be modal
        close : function(event,ui) {
             $(this).destroy();
        }
    });
});

Vous pouvez voir quelque chose de similaire en action sur le site : http://cs-services.its.uiowa.edu/launchpad . Cliquez sur l'annonce en haut à gauche.

Answer 3

Vous pouvez essayer ma boîte à lumière http://jslightbox.felixhagspiel.de/ Il ne nécessite pas de jQuery, est réactif et compatible avec IE8. Vous pouvez simplement ajouter le data-jslghtbx -à vos images pour qu'elles s'ouvrent au moment du clic. Vous pouvez également passer des références à une image plus grande comme ceci data-jslghtbx='img/lightbox/apple-big.jpg' Vous pouvez donc utiliser des images de petite taille comme vignettes, ce qui ouvrira les images de grande taille dans la lightbox. En outre, vous pouvez utiliser des groupes pour afficher plusieurs images.