从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