從img元素屬性創建一個對象數組，並輸出值，jquery

Question

現在我有一個全屏插件與靜態URL一起工作，但我想用CMS輸出的動態圖像數據替換那些頁。

下面是來自CMS的HTML輸出的樣本：

<ul class="large-gallery"> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl351.jpg" data-full-src="http://www.domain/imageurl361.jpg" alt="Image Title 4725"> 
</a> 
</li> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl354.jpg" data-full-src="http://www.domain/imageurl3721.jpg" alt="Image Title 73365"> 
</a> 
</li> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl356.jpg" data-full-src=v"http://www.domain/imageurl3567.jpg" alt="Image Title 4635"> 
</a> 
</li> 

</ul> 

這裏是JavaScript：

<script type="text/javascript">// <![CDATA[ 

     jQuery(function($){ 

      $.supersized({ 

       // Functionality 
       slide_interval   : 5000,  // Length between transitions 
            new_window    : 0, 
       transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 1200,  // Speed of transition 

       // Components       
       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
       slides     : [   // Slideshow Images 
{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'},            ] 

      }); 
     }); 
// ]]></script> 

我想怎麼辦。

我想在JavaScript中替換此代碼;

{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'}, 

是這樣的：

for each bigImage, output this 
{ image : 'bigImage.imgUrl', title : ' bigImage.title ', url : ' bigImage.linkUrl '}, 

我在想創建對象爲bigImages數組，然後調用每個對象bigImage。但我不是很確定最好的方法，而且我很好奇如何格式化它以在插件腳本中工作。

Answer 1

你需要的是一個函數，它IMG元素作爲輸入的一個集合，並返回所需的陣列作爲輸出。

我可能會寫這樣的事：

var slidesArray = function() { 

    var array = []; 

    $("ul.large-gallery li img").each(function() { 

    var arrayItem = { image: $(this).attr('src'), title: $(this).attr('alt'), url: $(this).parent('a').attr('href') }; 

    array.push(arrayItem); 

    }); 

    return array; 
} 

然後你就可以在你的配置哈希說：

slides: slidesArray() 

Answer 2

var slds = []; 

$('.large-gallery a').each(function(i,obj){ 
    var $this = $(obj), 
     $thisImg = $this.find('img'); 
    slds.push({ 
     image: $thisImg .data('full-src'), 
     title: $thisImg .prop('title'), 
     url: $this.prop('href') 
    }) 
}); 

然後，只需提供slds作爲源到滑動

slides: slds