Plug-in JavaScript/jQuery simple qui donne un aperçu rapide des images

Question

Y a-t-il un bon plug-in JavaScript/jQuery qui va "survoler" une image lors d'un clic?

Je le veux simple, donc lorsque vous cliquez sur la vignette de l'image, il suffit de zoomer en taille réelle.

Idéalement, il serait mis en place en donnant simplement une classe à cette image et le JavaScript/jQuery fait le reste. Semblable à certains sur les images sur cette page de Apple.com, voir la première image sous «Importer». Je ne cherche pas quelque chose d'aussi compliqué que lightbox, pas besoin de diaporama, de longues introductions et de fondu sur l'arrière-plan.

Answer 1

Cela pourrait être celui que vous cherchez:

http://gettopup.com/

J'espère que ça aide.

Answer 2

Assez facile en utilisant le plugin de dialogue jQuery UI. Cela suppose que votre classe thumb redimensionne l'image en taille de vignette, en réutilisant la même URL src pour l'image. Si le pouce a une URL différente, c'est-à-dire une image différente, vous avez besoin d'un moyen pour stocker l'image en taille réelle avec l'image miniature (attribut personnalisé?) Ou transformer l'URL miniature en URL pleine taille. Ce dernier est trivial si vous dites ajouter "_thumb" au nom de la vignette de l'image; il suffit d'utiliser la fonction replace chaîne.

$('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 à: http://cs-services.its.uiowa.edu/launchpad. Cliquez sur l'annonce en haut à gauche.

Answer 3

Vous pouvez essayer ma visionneuse http://jslightbox.felixhagspiel.de/ Il ne nécessite pas jQuery et est réactif et compatible IE8. Vous pouvez simplement ajouter l'data-jslghtbx à vos images et il les ouvre en cliquant. Alternativement, vous pouvez passer des références à une image plus grande comme ceci data-jslghtbx='img/lightbox/apple-big.jpg', de sorte que vous pouvez utiliser des images de petite taille pour les vignettes qui ouvriront les images de grande taille dans la visionneuse. En outre, vous pouvez utiliser des groupes pour afficher plusieurs images.