Was ist die beste jQuery „ein Miniaturbild klicken und das Hauptbild ändern“ -Modul?

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

  •  03-07-2019
  •  | 
  •  

Frage

Hier ist, was ich habe (alle dynamisch erzeugt, wenn das macht einen Unterschied):

  • Eine Liste der Bilder
  • Eine Beschriftung für jedes Bild
  • Eine Miniaturansicht für jedes Bild

Die Seite sollte mit einem Bild in voller Größe und all Thumbnails laden. Wenn ein Benutzer eine Miniaturansicht klickt, zeigt das Bild in voller Größe, dass neues Bild mit seiner Beschriftung. Wenn sie ein anderes Bild klicken, um das Bild (und Beschriftung) wieder ändern.

Es ist nicht sehr komplex. Ich gehackt vor, eine Lösung ein paar Monate zusammen, aber ich brauche es wieder zu tun, und ich bin an diesem crappy Code suchen und denken, dass es einen besseren Weg zu sein hat (und zu wissen, jQuery, jemand anderes hat es bereits getan, und getan es gut).

Die Gedanken? Links?

Danke!

War es hilfreich?

Lösung

Hier ist eine, die ziemlich gut aussieht und ist in jQuery geschrieben: Foto Slider

Und hier ist eine andere, die ich ein bisschen besser gefällt: Galleria

Andere Tipps

Die meisten Antworten hier sind wie eine Fliege mit einem Kanon schießen !! 

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

Das ist alles, was Sie brauchen .. 4 Zeilen Code.

hier: Galerie-in-4-Zeilen

Gebäude weg von krembo99 die Antwort, die er hier verbunden sind, wollte ich teilen meine Lösung, wie ich schon Hunderte von Fotos, wenn mein Client eine Funktion wie diese gebeten hatte. Mit dem im Verstand, indem sie ein paar zusätzliche Zeilen des bereitgestellten Code hinzufügen, war ich in der Lage, eine Lösung zu erhalten, die meine Parameter passen.

Ich bin auch als auch mit kleineren Bildern arbeiten, so hatte ich keine Notwendigkeit, durch Schaffung von kleinen und großen Versionen der gleichen Datei zu gehen. 

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

    <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-Anwendungen-you-can nicht-miss /

Eine Seite mit 9 verschiedenen Foto-Diashows in jQuery einsatzbereit

Überprüfen Sie meine galleria Implementierung aus: Garten-Design Landschafts in Essex Gallery

Versuchen Sie Galleriffic , es hat alles, was Sie brauchen.

Viele dieser Skripte sind veraltet und nicht für mich arbeiten und erfordern eine Reihe von verschiedenen Bildern für Thumbnails. Ich hatte eine ernsthafte Jagd um und fand etwas sehr leicht, die Ebene js ist, 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/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top