图片库的jquery答案

【问题标题】：Jquery for picture gallery图片库的jquery
【发布时间】：2012-04-11 02:10:47
【问题描述】：

我有几张产品图片，我希望用户能够单击缩略图，然后显示大图。我使用了简单的JQuery教程http://papermashup.com/simple-jquery-gallery/，但是由于某种原因，当我点击缩略图时，只有我点击的缩略图的大图被显示。其他缩略图消失了，所以我无法点击返回。

我正在使用 Carrierwave、rails 3.2 和 rails 3.2 附带的 jquery

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

请帮忙！

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3.1 image-gallery

【解决方案1】：

当你设置#image的HTML时，你替换了里面的所有代码。这就是为什么你的缩略图标签消失了。

你应该试试这个：

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

【讨论】：

如何使缩略图处于活动状态？谢谢。

【解决方案2】：

使用灯箱图库插件，例如colorbox

【讨论】：

嗨。我试图避免使用插件，因为我不太了解 jQuery，而且我不想要完整的东西。我目前正在使用 Galleriffic 插件，但它太复杂了，我不得不用我的其他代码围绕它跳舞。

【解决方案3】：

你是 id 为“image”的 div 标签包含你的 li。在您的脚本中，您将该 div 的 HTML 替换为 image 标记。您应该将您的 li 移出“图像” div 并进入单独的 div。

【讨论】：

感谢您的回答。即使您的答案与 MKal 相同，因为他发布了实际代码。谢谢。

【解决方案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();
    });

【讨论】：