Was ist die beste jQuery "klicken Sie auf ein Miniaturbild und ändern Sie die main-image" - Modul?

Hier ist, was ich habe (alles dynamisch generiert, wenn das einen Unterschied macht) :

  • Eine Liste der Bilder
  • Eine Beschriftung für jedes Bild
  • Ein thumbnail für jedes Bild

Die Seite laden soll mit einem full-size-Bild und alle die thumbnails. Wenn ein Benutzer klickt auf ein thumbnail das Bild in voller Größe zeigt, dass neue Bild mit seiner Beschriftung. Wenn Sie klicken Sie auf ein anderes thumbnail, wird das Bild (und Titel) wieder ändern.

Es ist nicht sehr Komplex. Ich hackte gemeinsam eine Lösung, die vor ein paar Monaten, aber ich muss es wieder tun und ich freue mich auf diese miese code und denken, dass es der bessere Weg zu sein (und zu wissen, jQuery, jemand anderes hat es bereits getan, und tun es auch).

Gedanken? Links?

Dank!

Wir tun sehr ähnlich, mit leichten Variationen. MouseOver-Thumnail Veränderungen der Haupt-Bild, aber nicht klebrig ist, Klicken Sie auf Daumen, um Hauptbild klebrig. Benutzer können pass mit der Maus über die Daumen zu überprüfen, klicken Sie dann auf die, die Sie wollen; wenn die Maus geht, die über mehr Daumen das Hauptbild wird wieder, wenn die Maus AUS alle Daumen

InformationsquelleAutor Eileen | 2009-03-04

  1. 3

    Hier ist einer, der sieht ziemlich nett aus und ist geschrieben in jQuery: Foto-Slider

    Und hier ist eine andere, die ich mag ein bisschen besser:
    Galleria

    Oooh, die Galleria ist schön und genau was ich gesucht habe! Danke!

    InformationsquelleAutor OverloadUT

  2. 46

    Meisten Antworten hier sind so, wie wenn eine fliege mit einem canon !!

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

    dies ist alles, was Sie brauchen .. 4 code-Zeilen .

    schau mal hier : Galerie-in-4-Linien

    mit Ihnen. alles andere scheint wie overkill
    Ich bin VÖLLIG wollen alle 'Antworten' waren dieses gut - was für eine perfekte Antwort und ein GROßARTIGER Ort zu starten,... mehr hinzufügen, wenn Sie benötigen, aber dieser kocht es auf. - thx

    InformationsquelleAutor krembo99

  4. 2

    Gebäude aus der krembo99 die Antwort die er hier verlinkt, wollte ich meine Lösung hatte ich bereits hochgeladen wurden, Hunderte von Fotos, wenn mein client angefordert hatte, eine Funktion wie diese. Mit dem im Verstand, durch hinzufügen von ein paar extra-Zeilen, um den code, ich war in der Lage, eine Lösung, die passen meiner Parameter.

    Arbeitete ich auch mit kleineren Bildern auch, so dass ich kein Bedürfnis hatte, zu Durchlaufen, zu schaffen, kleine & große Versionen der gleichen Datei. 

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

});

    Hier ist, wie mein HTML sieht.

        <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>

    InformationsquelleAutor M. Cotter

  5. 1

    http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

    Eine Seite mit 9 verschiedenen Foto-slideshows in jQuery zum Einsatz bereit

    InformationsquelleAutor Xunil

  7. 0

    Versuchen Galleriffic, es hat alles, was Sie brauchen.

    InformationsquelleAutor bas

  8. 0

    Viele dieser Skripte sind veraltet und arbeiten nicht für mich plus benötigen eine Reihe unterschiedlicher Bilder für die thumbnails. Ich hatte eine ernsthafte Jagd um und fand etwas sehr leicht, das ist schlicht js, keine Notwendigkeit für 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/

    InformationsquelleAutor SJacks

Schreibe einen Kommentar