jQuery Girl
  1. jQuery Girl
  3. jQuery onclick toutes les images dans le corps
Intereting Posts
laravel updateOrCreate, méthode Validation de date par javascript pour le format mm / jj / aaaa en asp.net Comment modifier mon info-bulle sur un td Meilleure façon de mettre un délai après avoir appelé des fonctions javascript Trouver si le lien cible l’image avec javascript / jquery Comment utiliser des photos haute résolution dans les messages texte dans Tumblr? Bootstrap data-toggle ne fonctionne pas dans Safari jqGrid – Comment puis-je agrandir les boutons de pagination? Changer l’image dans l’élément Onclick Qu’est-ce qui, dans ce code jQuery, échoue pour IE6 et IE7? jQuery Show-Hide DIV basé sur la valeur de la case à cocher Mettre à jour une ligne dans Parse.com Evénement de changement jQuery appelé deux fois galerie de fond personnalisé fadeInOut problèmes avec jquery load ()

jQuery onclick toutes les images dans le corps

L’anglais n’est pas ma langue maternelle, alors supporte-moi.

J’essaie de faire en sorte que lorsqu’un utilisateur clique sur une image de mon site, une sorte de div de galerie devienne visible, contenant l’image à sa taille maximale.

La façon dont j’ai fait maintenant est; 

var image = $("body > image"); image.on('click', function(){ var imageURL = $(this).attr('src'); backgroundCurtain.css({"display": "block"}); imageResized.attr("src", imageURL); var imageWidth = imageResized.width(); pictureInner.css({"width" : imageWidth}); });

Cela ne fonctionne pas et pour être honnête je ne m’attendais pas à ce que cela fonctionne Comment puis-je l’appeler de sorte que chaque élément d’image à l’intérieur du corps. Comment “appeler” chaque image du corps?

Pour référencer toutes les images avec jquery, il suffit de faire 

 var images = $("img");

Habituellement, vous ne souhaitez cependant pas que cela s’applique à toutes les images (par exemple, l’imageResize ne devrait pas figurer dans cet ensemble). Une bonne solution consiste à append une classe CSS (par exemple, class="zoomable" ) aux éléments que vous souhaitez zoomer et à utiliser ce sélecteur: 

 var images = $("img.zoomable");

Regardez cette référence .

Notez que la plupart du temps, nous n’utilisons pas la même URL pour la plus grande image car cela signifierait que de grandes images soient chargées pour les vignettes. Ma pratique est d’avoir un modèle de nommage comme “someFile.jpg” et “someFile-big.jpg” et de faire ce genre de chose: 

 $("img.zoomable").on('click', function(){ var imageURL = $(this).attr('src'); backgroundCurtain.css({"display": "block"}); imageResized.onload = function(){ var imageWidth = imageResized.width(); pictureInner.css({"width" : imageWidth}); }; imageResized.attr("src", imageURL.split('.')[0]+'-big.jpg'); }); 
 var image = $("img"); image.on('click', function(){ var imageURL = this.src; backgroundCurtain.css("display", "block"); imageResized.attr("src", imageURL); var imageWidth = imageResized.width(); pictureInner.css("width", imageWidth); }); ​

Le problème est avec votre sélecteur. Le sélecteur ‘>’ spécifie un enfant immédiat . Le sélecteur suggéré par @dstroy ne ferait que capturer une image sur la page entière. Ceci, cependant, peut ne pas être ce que vous essayez d’accomplir.

Je suppose que vous avez un élément de formulaire (supposons une DIV avec ID “galerie”) contenant toutes les images qui vous intéressent. Vous pouvez ensuite utiliser 

 var images = $("#gallery img");

De cette façon, les icons et les images “chromées” ne seront pas affichées en arrière-plan.