jquery圖片庫

我有一些產品的圖片，我希望用戶能夠點擊縮略圖，然後顯示大圖片。我使用了簡單的JQuery教程http://papermashup.com/simple-jquery-gallery/，但由於某種原因，當我點擊縮略圖時，只顯示了我單擊的縮略圖的大圖片。其他縮略圖消失了，所以我不能再點擊它。jquery圖片庫

我使用Carrierwave，導軌3.2和隨之而來的軌道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>

請幫助jQuery的！

來源

2012-03-27 noob

當您設置#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 %>

來源

2012-03-27 14:50:43 MiKaL

我會如何使縮略圖生效？謝謝。 – noob 2012-03-27 18:26:21

使用一個燈箱畫廊插件，如colorbox

來源

2012-03-27 14:17:31 danwellman

嗨。我試圖避免插件，因爲我不知道太多的jQuery，我不想完整的東西。我目前使用Galleriffic插件，但它太複雜了，我不得不用其他代碼跳舞。 – noob 2012-03-27 14:28:45

你用的「形象」標識div標籤包含貴麗。在你的腳本中，你正在用圖像標籤替換那個div的HTML。你應該將你的li移出「image」div並且放到一個單獨的div中。

來源

2012-03-27 14:38:15 Trent

謝謝你的回答。即使你的答案與MKal相同，因爲他推出了實際的代碼。謝謝。 – noob 2012-03-27 14:55:39

該解決方案最終是這樣的：

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

來源

2012-07-31 18:08:16

回答

相關問題