0

ブログ用にレスポンシブ スライド ショーを設定しようとしていますが、Flickr API を使用して機能させたいと考えていました。画像が flickr にある URL の配列を設定しましたが、それらをスライド ショーに動的にロードしたいと考えています。responseSlides.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 に答える