Initialize fotorama with images loaded by JSON/ajax

问题

I tried to search but i can help with this ...

My html code is:

//<![CDATA[
window.onload=function(){
$("[data-instagram]").each(function(el) {
  $.getJSON({
    method: 'GET',
    url: $(this).data("instagram"),
    dataType: 'jsonp',
    success: function(response) {
      $('.fotorama').append('<img src="' + response.thumbnail_url + '">');

	  $('.fotorama').fotorama();

    }
  });
})
}//]]> 

<!-- 1. Link to jQuery (1.8 or later), -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->



<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlZYpDgwr_/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlTnGFAqQ4/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlFOilgZ3b/?taken-by=nba"></span>

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama" data-auto="false">
    

</div>
<!-- 3. Enjoy! -->

As you can see, in html i have few <span> elements with atribute data-instagram. Script found each span element with data-instagram and load instagram images via JSON/ajax into <div class="fotorama"></div>

I tried to initialize fotorama gallery with, but it looks like it wont initialize properly.

I tried to folow http://fotorama.io/customize/initialization/ to turn off auto initialization by adding data-auto="false" atribute to fotorama div, and $('.fotorama').fotorama(); into script code but it doesnt work.

How can i make this work? Thank you, sorry for bad english.

回答1:

You migh be aware of the async. nature of javascript so i will explain it straightforward , note that i've removed window.onload and some unrelated stuff for simplicity

$("[data-instagram]").each(function(el) {
    $.getJSON({
        //extra stuff hidden
        success: function(response) {
          $('.fotorama').append('<img src="' + response.thumbnail_url + '">');
          $('.fotorama').fotorama(); //1
        }
    });
});

$('.fotorama').fotorama();        // 2

setTimeout(function(){  $('.fotorama').fotorama(); },3000); // 3

Your code scans over all data-instagram takes its value and uses that to make an async. call to instagram on success of which you call fotogram to initialize your slide but the problem is that since you're loading many images fotorama initialization gets run more than once(on each success).After first initialization any further attempt would only mess up the slider.Note that if you put it outside[2] foreach that wouldn't work either because at this point even the first request would be in pending state.

So what can you do? Well the simplest(and bad :P too) way would be to remove [1] use a timeout and initialize say after 3 seconds ( meanwhile show a loader gif) see [3] problem here is you cannot trust the network so a better way would be to use a counter , initial value of which would be equal to the no. of calls want to make. On each success callback decrement it by 1 as well as checking if it's 0 .When it is 0 you fire up fotogram

var count = $("[data-instagram]").length;

$("[data-instagram]").each(function(el) {
    $.getJSON({
       // other stuff 
       success: function(response) {
         $('.fotorama').append('<img src="' + response.thumbnail_url + '">');
         count--;
         if(count === 0 )
           $('.fotorama').fotorama();     //this was the last pending call,all images loaded. Initialize  
        }
   });
});

来源：https://stackoverflow.com/questions/41070738/initialize-fotorama-with-images-loaded-by-json-ajax