Jquery für Bildergalerie

Question

Ich habe ein paar Bilder für ein Produkt und ich möchte, dass der Benutzer in der Lage ist, auf das Thumbnail zu klicken und dann das große Bild anzuzeigen. Ich habe das einfache JQuery-Tutorial http://papermashup.com/simple-jquery-gallery/ verwendet, aber aus irgendeinem Grund, wenn ich auf die Miniaturbilder klicke, wird nur das große Bild des Miniaturbildes angezeigt, auf das ich geklickt habe. Die anderen Miniaturansichten verschwanden, sodass ich nicht zurückklicken kann.

ich Carrierwave verwende, Schienen 3.2 und die Jquery, die mit Schienen 3,2

$(function() { 
$(".image").click(function() { 
var image = $(this).attr("rel"); 
$('#image').hide(); 
$('#image').fadeIn('slow'); 
$('#image').html('<img src="' + image + '"/>'); 
return false; 
}); 
}); 


<div id ="image" > 
<%= image_tag(@product.prod_images.first.image_url(:large_pic)) %> 
<% @prod_images.each do |image| %>   
<ul class="thumbs"> 
    <li> 
    <a href="#" rel="<%= image.image_url(:large_pic) %>" class="image"> 
    <%= image_tag(image.image_url(:thumb_pic)) if image.image? %> 
    </a> 
    </li> 
</ul> 
<% end %> 
</div> 

Bitte helfen Sie kommt!

Answer 1

Wenn Sie den HTML-Code von #image festlegen, ersetzen Sie den gesamten darin enthaltenen Code. Das ist der Grund, warum deine Thumbnail Tags verschwunden sind

Sie sollten diese stattdessen versuchen:

<div id ="image" > 
    <%= image_tag(@product.prod_images.first.image_url(:large_pic)) %> 
</div> 
<% @prod_images.each do |image| %>   
<ul class="thumbs"> 
     <li> 
     <a href="#" rel="<%= image.image_url(:large_pic) %>" class="image"> 
     <%= image_tag(image.image_url(:thumb_pic)) if image.image? %> 
     </a> 
     </li> 
</ul> 
<% end %> 

Answer 2

Leuchtkasten Galerie-Plugin verwenden, wie colorbox

Answer 3

sind Sie div-Tag mit der ID von "Bild" enthält Ihre li. In Ihrem Skript ersetzen Sie den HTML-Code dieses Bereichs durch den Bild-Tag. Sie sollten Ihre li aus dem "image" div und in ein separates div verschieben.

Answer 4

Die Lösung oben ist diese beendet:

$('#thumb_holder li a').click (function(){ 
     mainImg = $(this).attr('rel'); 
     if(mainImg != current){ 
      $('.current').fadeOut('slow'); 
      $('#'+mainImg).fadeIn('slow', function(){ 
       $(this).addClass('current'); 
       current = mainImg; 
      }); 
      $('#thumb_holder li').find('img').css('display','block'); 
     } 
     $(this).children("img").toggle(); 
    });