Quelle est la meilleure solution jQuery & # 8220; cliquez sur une vignette pour modifier l’image principale & # 8221; module?

StackOverflow https://stackoverflow.com/questions/612575

  •  03-07-2019
  •  | 
  •  

Question

Voici ce que j'ai (tous générés dynamiquement, si cela fait une différence):

  • Une liste d'images
  • Une légende pour chaque image
  • Une vignette pour chaque image

La page doit se charger avec une image en taille réelle et toutes les vignettes. Lorsqu'un utilisateur clique sur une vignette, l'image en taille réelle montre cette nouvelle image avec sa légende. S'ils cliquent sur une autre vignette, l'image (et la légende) change à nouveau.

Ce n'est pas très complexe. J'ai piraté ensemble une solution il y a quelques mois, mais je dois le refaire et je regarde ce code de merde en pensant qu'il doit y avoir un meilleur moyen (et connaissant jQuery, quelqu'un d'autre l'a déjà fait, et l'a déjà fait. c'est bien).

Des pensées? Liens?

Merci!

Était-ce utile?

La solution

En voici un qui est très joli et qui est écrit en jQuery: Photo Slider

Et en voici un autre que j'aime un peu mieux: Galleria

Autres conseils

La plupart des réponses ici ressemblent à tirer une mouche avec un canon !! 

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

c'est tout ce dont vous avez besoin. 4 lignes de code.

regardez ici: gallery-in-4-lines

En me basant sur la réponse de krembo99 à laquelle il a fait référence ici , je souhaitais la partager. Ma solution étant donné que j'avais déjà téléchargé des centaines de photos lorsque mon client avait demandé une telle fonctionnalité. Dans cet esprit, en ajoutant quelques lignes supplémentaires au code fourni, j'ai pu obtenir une solution adaptée à mes paramètres.

Je travaillais aussi avec des images plus petites, je n'avais donc pas besoin de créer de petites images & amp; grandes versions du même fichier. 

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

Voici à quoi ressemble mon code HTML. 

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>

http://bradblogging.com/jquery/ 9-jquery-diaporama-applications-vous ne pouvez pas manquer /

Une page contenant 9 diaporamas de photos différents dans jQuery prête à être utilisée

Découvrez mon implémentation de galleria: Conception de jardins paysagistes dans Essex Gallery

Essayez Galleriffic , il a tout ce dont vous avez besoin.

Un grand nombre de ces scripts sont obsolètes et ne fonctionnent pas pour moi et nécessitent un ensemble d’images différentes pour les vignettes. J'ai eu une chasse sérieuse et j'ai trouvé quelque chose de très léger qui est simple, pas besoin de jquery. 

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top