根据img元素属性和输出值(jquery)创建对象数组

问题描述

现在，我有一个使用静态网址的全屏插件，但我想用CMS输出到页面的动态图像数据替换这些插件.

Right now I have a fullscreen plug-in working with static urls, but I'd like to replace those with dynamic image data that a CMS outputs to the page.

以下是CMS的HTML输出示例:

Here is a sample of the HTML output from the CMS:

<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:

Here is the 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中替换此代码；

I'd like to replace this code in the 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.但是我不太确定最好的方法，而且我很好奇如何格式化它以使其在插件脚本中起作用.

I was thinking about creating an array of objects for bigImages, and then call each object as bigImage. but im not really sure the best approach, and also I'm curious how to format it to have it work within the plug-in script.

推荐答案

您需要的是一个将img元素集合作为输入并返回所需数组作为输出的函数.

What you need is a function that takes a collection of img elements as input and returns the desired array as output.

我可能会这样写:

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;
}

然后您可以在配置哈希中说:

And then you can say in your configuration hash:

slides: slidesArray()

这篇关于根据img元素属性和输出值(jquery)创建对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！