0

我正在尝试为我的博客设置一个响应式幻灯片放映，并希望使用 Flickr api 让它工作。我在 flickr 上设置了我的图像所在的 url 数组，但随后我想将它们动态加载到幻灯片中。在 responsiveSlides.js 中，当我加载图像时，它不起作用，页面上的所有内容都呈现得非常糟糕。关于如何实现这一点的任何想法？

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jquery</title> 

    $(function () {

      // Slideshow 1
      $("#slider1").responsiveSlides({
        maxwidth: 800,
        speed: 800
      });

      // Slideshow 2
      $("#slider2").responsiveSlides({
        auto: false,
        pager: true,
        speed: 300,
        maxwidth: 540
      });

      // Slideshow 3
      $("#slider3").responsiveSlides({
        manualControls: '#slider3-pager',
        maxwidth: 540
      });

      // Slideshow 4
      $("#slider4").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });

    var apiCall = "flickr json callback"; 
    var urls = new Array();


    $(document).ready(function() {
    $.getJSON(apiCall, function(data){

        $.each(data.photoset.photo, function(i, photo){
            var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";
            urls.push(img_src);
        });
    });

  </script>
</head>
<body>
  <div id="wrapper">
    <h1>ResponsiveSlides.js</h1>



    <!-- Slideshow 1 -->

    <ul class="rslides" id="slider1">
WHERE I WANT TO IMPORT THE IMAGE FROM THE ARRAY POPULATED IN JQUERY
      <li><img src="images/1.jpg" id="image" alt="nothing"></li>
     <script src="jquery-1.9.1.min.js">
        document.getElementById('image').src = urls.get(0);
     </script>
      <li><img src=urls[2] alt=""></li>
      <li><img src="images/3.jpg" alt=""></li>
    </ul>

  </div>

</body>
</html>

编辑：我想我的问题是：当我有一个 html img src=x 时，x 可以从 jquery 数组中拉出并用作源吗？

4

2 回答 2

1

还要确保检查您的插件功能是否在 $document.ready 之后运行。（当然 $(document).ready() 将首先运行）。

试试这个 ：

 $.getJSON(apiCall, function(data){

   $.each(data.photoset.photo, function(i, photo){//Populate your array});
    // Sanity : please check the size of array is equivalent to the number of  
    //the image tags in <li>
   $( "li img" ).each(function( index ) {
         $(this).attr('src', urls.pop());
    });


});
于 2013-02-24T20:19:56.417 回答
0

因为urls是一个数组，所以用来urls[index]从中检索元素。如果您想获取该项目并同时删除该项目，请使用pop方法。

document.getElementById('image').src = urls.pop();
于 2013-02-24T20:14:22.357 回答