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

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

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

Answer 3

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

Answer 4

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