使用JQuery Cycle，AnchorBuilder如何在DIV中找到圖像的SRC？

JQuery Cycle Plugin非常棒。對於我的特殊安裝，我想結合他們的兩個示例：縮略圖頁面，以及循環DIV而不是圖像的能力。使用JQuery Cycle，AnchorBuilder如何在DIV中找到圖像的SRC？

目標是讓您有一組縮略圖，單擊時可以更改DIV。該DIV將包含大圖像和HTML框（特別是一些鏈接）。

我已經在這裏製作了一個粗略的版本，左下角的大拇指和右下角的灰色DIV。圖像不是我的;我只是抓住它演示的目的：

http://i.stack.imgur.com/l49Kt.jpg

目標：點擊縮略圖和兩個大的圖像，然後在框中改變的文本。

通過獲取幻燈片的SRC屬性並縮小縮略圖來創建縮略圖。不幸的是，當圖像嵌入到DIV中時，插件無法找到SRC屬性，所以縮略圖會中斷。

以下是構建循環代碼：

<script type="text/javascript"> 
    $(function() { 
    $('#slideshow').after('<ul id="nav">').cycle({ 
     fx: 'fade', 
     speed: 'slow', 
     timeout: 0, 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" width="49" height="25" /></a></li>'; 
      } 
     }); 
    }); 
    </script>

這正常工作與以下HTML塊：

<div id="slideshow" class="pics"> 
    <img src="/images/01_sm.jpg" class="first" title="title" height="329" /> 
    <img src="/images/02_sm.jpg" title="title" width="642" height="329" /> 
    <img src="/images/03_sm.jpg" title="title" width="642" height="329" /> 
</div>

但是如前所述休息時，他們的DIV因此被包裹：

<div id="slideshow" class="pics"> 
    <div><img class="slideimg" src="/images/01_sm.jpg" class="first" title="title" height="329" /><div class="menu">foo</div></div> 
    <div><img class="slideimg" src="/images/02_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div> 
    <div><img class="slideimg" src="/images/03_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div> 
</div>

因此，所有確定的問題變成：

如何將slide.src替換爲可以查看上述DIV並查找當前幻燈片的SRC的內容？

在此先感謝您的幫助。我希望這個解決方案很簡單，可以將它添加到不斷擴展的JQuery Cycle示例列表中。

來源

2011-04-10 impulsenine

你有沒有嘗試這個辦法：

pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.find('img').attr('src') + '" width="49" height="25" /></a></li>'; 
     }

來源

2011-04-13 11:18:30 Zero

像瓦蘇說......但你必須使用jQuery（幻燈片），而不是幻燈片：

pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + 
      jQuery(slide).find('img').attr('src') + 
      '" width="49" height="25" /></a></li>'; 
}

來源

2011-06-07 13:59:32

使用JQuery Cycle，AnchorBuilder如何在DIV中找到圖像的SRC？

回答

相關問題