jQuery的畫廊/轉盤古怪

我有一個圖像瀏覽器，結合了縮略圖/大的圖像塊的偉大工程......jQuery的畫廊/轉盤古怪

看起來是這樣的：

<div id="gallery-large" ><img id="largeImage" src="" /></div> 
<div id="gallery-scroller" > 
    <ul class="holder"> 
    <li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li> 
    <li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li> 
    <li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li> 
    <li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li> 
    <li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li> 
</ul> 
<div class="clear"></div> 
</div> 
<script> 
$('.holder').delegate('img','click', function(){ 
$('#largeImage').attr('src',$(this).attr('data-large')); 
}); 
</script>

然而，當我嘗試結合這與一個旋轉臺（最簡單的一個，我發現在這裏 - http://www.flintstudio.biz/stuff/sliders/1.html）

它停止工作...

的代碼看起來像這樣

<div id="gallery-large" ><img id="largeImage" src="" /></div> 
<div id="gallery-scroller" > 
    <a class="button prev" ><img src="images/arrow_left.png"/></a> 
    <a class="button next" ><img src="images/arrow_right.png"/></a> 
     <ul class="holder"> 
      <li class="slide first"></li> 
      <li class="slide"></li> 
      <li class="slide"></li> 
      <li class="slide"></li> 
      <li class="slide"></li> 
     </ul> 
    <div class="clear"></div> 
</div> 

<script> 
$(window).load(function(){ 
    var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];  

    $.preloadImages(images, init); 

    function init() { 
     $('#gallery-scroller').imgSlider(images); 
    } 

$('.holder').delegate('img','click', function(){ 
    $('#largeImage').attr('src',$(this).attr('data-large')); 
}); 
}); 
</script>

從概念的角度來看，唯一不同的是，該列表窗口中加載後填充 - 我試圖改變

.delegate('img','click', function(){

到

.on('click', 'img', finction(){

但不幫助..

OH - 重要的一點 - 我改變了carousel.js中的一行 - 所以它沒有做一個黑色圓形圖像的CSS變化，但加入的圖像...

，所以我改變了這個（37行）

$(e).find('.holder > li').eq(i).css('background', 'url('+images[i]+') no-repeat');

到

$(e).find('.holder > li').eq(i).html('<img class="thumb" src="' + images[i] + '" />');

我缺少什麼？？？？

的jsfiddle簡單的縮略圖瀏覽器的... http://jsfiddle.net/cBpvZ/

的jsfiddle的旋轉木馬版本... http://jsfiddle.net/ZJzLd/

來源

2013-03-26 jpmyob

我認爲你具有約束力錯DOM對象的事件，所以不是IMG應該是李。您可以使用螢火蟲檢查HTML，並可以看到UL.holder內沒有IMG標籤。嘗試下面的代碼。

$('.holder').delegate('li','click', function(){ 
    var imgSrc = $(this).css('background-image').replace('url("','').replace('")',''); 
    $('#largeImage').attr('src',imgSrc); 
});

理想情況下，我應該使用RegExp替換字符串，但是這個工作。

來源

2013-03-26 01:51:39

thx ..我改變了旋轉木馬/ js插入圖像不使用CSS背景...所以我會嘗試你的建議，但看看我上面添加的代碼.. – jpmyob 2013-03-26 01:58:40

@jpmyob：這將是很大的幫助，如果你可以在小提琴上分享代碼。 – 2013-03-26 02:05:05

做雖然林不知道如何添加carousel.js，所以我只是通過它的JS框，在onload一起... – jpmyob 2013-03-26 02:18:37

THX馬赫什

林通樹木......我看不到它，因爲我已經與它擺弄這麼多...缺少的參照數據大確實是問題。

該解決方案（由我定義）有兩個陣列 - 一個用於拇指，另一個用於大型..（我可以採用爲圖像名稱添加一些後綴或前綴並保持它們相關的路徑 - 但我選擇不 - 而爲此希望能夠靈活地名稱的東西什麼......而這需要兩個陣列）

var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg']; 
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg']; 

$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>'); 

$.preloadImages(images, init); 

function init() { 
$('#gallery-loader').remove(); 
$('#gallery-scroller').imgSlider(images, large); 
}

當然

這意味着改變carousel.js處理更多的傳遞的數組 - 沒有概率存在。 ..

工程就像一個魅力。我現在可以用數據填充此，並把旋轉木馬的任何地方，我需要和大的圖像瀏覽器，我需要它...布拉沃 - 感謝幫助。

來源

2013-03-26 04:07:49 jpmyob

jQuery的畫廊/轉盤古怪

回答

相關問題