0

现在我有一个使用静态 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。但我不太确定最好的方法，而且我很好奇如何格式化它以使其在插件脚本中工作。

4

2 回答 2

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()
于 2013-04-29T19:31:46.287 回答
0 
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
于 2013-04-29T19:31:04.993 回答