Qual è il modulo jQuery "fai clic su una miniatura e modifica l'immagine principale"?

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

  •  03-07-2019
  •  | 
  •  

Domanda

Ecco cosa ho (tutto generato dinamicamente, se questo fa la differenza):

  • Un elenco di immagini
  • Una didascalia per ogni immagine
  • Una miniatura per ogni immagine

La pagina dovrebbe essere caricata con un'immagine a dimensione intera e tutte le anteprime. Quando un utente fa clic su una miniatura, l'immagine a dimensione intera mostra quella nuova immagine con la sua didascalia. Se fanno clic su un'altra miniatura, l'immagine (e la didascalia) cambiano di nuovo.

Non è molto complesso. Ho hackerato insieme una soluzione qualche mese fa, ma devo farlo di nuovo e sto guardando questo codice schifoso e pensando che ci debba essere un modo migliore (e conoscendo jQuery, qualcun altro l'ha già fatto e fatto bene).

Pensieri? Link?

Grazie!

È stato utile?

Soluzione

Eccone uno che sembra abbastanza carino ed è scritto in jQuery: Photo Slider

Ed eccone un altro che mi piace un po 'meglio: Galleria

Altri suggerimenti

La maggior parte delle risposte qui è come sparare una mosca con un canone !! 

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

questo è tutto ciò che serve .. 4 righe di codice.

guarda qui: gallery-in-4-lines

Partendo da la risposta di krembo99 che ha collegato qui , volevo condividere la mia soluzione poiché avevo già caricato centinaia di foto quando il mio cliente aveva richiesto una funzionalità come questa. Con questo in mente, aggiungendo alcune righe extra al codice fornito, sono stato in grado di ottenere una soluzione che si adattasse ai miei parametri.

Stavo anche lavorando con immagini più piccole, quindi non avevo bisogno di creare piccoli & amp; versioni grandi dello stesso file. 

$('.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'));

});

Ecco come appare il mio 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-slideshow-applicazioni-you-can not-miss /

Una pagina con 9 diverse presentazioni di foto in jQuery pronte per l'uso

Dai un'occhiata alla mia implementazione in galleria: Garden design Landscaper nella Galleria dell'Essex

Prova Galleriffic , ha tutto ciò di cui hai bisogno.

Molti di questi script non sono aggiornati e non funzionano per me, inoltre richiedono una serie di immagini diverse per le anteprime. Ho fatto una caccia seria in giro e ho trovato qualcosa di molto leggero che è semplicemente js, non c'è bisogno di 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/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top