JQuery для фотогалереи

Question

У меня есть несколько фотографий для продукта, и я хочу, чтобы пользователь мог нажимать миниатюру, а затем отображать большое изображение. Я использовал простой учебник JQuery http://papermashup.com/simple-jquery-gallery/, но по какой-то причине, когда я нажимаю на миниатюры, отображается только большое изображение эскиза, на который я щелкнул. Другие эскизы исчезли, поэтому я не могу вернуться к нему.

Я использую Carrierwave, рельсы 3.2 и JQuery, который поставляется с рельсами 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> 

Пожалуйста, помогите!

Answer 1

Когда вы устанавливаете HTML-код #image, вы заменяете весь код внутри. почему ваши значки миниатюр исчезли.

Вы должны попробовать это вместо:

<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

Используйте лайтбокс галерею плагин, как colorbox

Answer 3

Вы DIV тега с идентификатором «образом» содержит ваш Ли. В вашем скрипте вы заменяете HTML этого div тегом изображения. Вы должны перенести свой li из div «image» и в отдельный div.

Answer 4

Решение закончилось тем, что это:

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