Script do not affect all the element

Question

I am posting because I have encountered a problem with one script that I am trying to develop .

What I am trying to create is a gallery that receives it's images from Instagram. In order to accomplish this two tasks I've found two plugins that fits my needs , but I am unable to fusion them both.

I'm relatively new to Jquery , and I do not understand why the script that I'm trying to run only affects one part of the code.

This example gallery has two fundamental parts :

1)Pre-loaded by the developer :

<div class="content-primary"> 
    <ul class="iGallery" id="iGallery">

    <li>
  <a href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_n.jpg">
    <img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_s.jpg">
 <li><a class="ui-link" href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_s.jpg"></a></li></ul>
  </a>
</li>
</ul>

And , the ones that are added dynamically thanks to the instagram api :

<script type="text/javascript">

    (function() {
      var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
      t.parentNode.insertBefore(s, t);
    })();
  /* ]]> */
    function createPhotoElement(photo) {
      var innerHtml;
        innerHtml= $('<img>')
        .attr('src', photo.images.thumbnail.url);

       innerHtml = $('<a>')
      .attr('href', photo.images.standard_resolution.url)
      .append(innerHtml)
      .append(innerHtml)
       .addClass( "ui-link" );


      return $('<li>')
        .append(innerHtml);
    }

    function didLoadInstagram(event, response) {
      var that = this;

      $.each(response.data, function(i, photo) {
        $(that).append(createPhotoElement(photo));
      });
    }

    $(document).ready(function() {
      var clientId = 'baee48560b984845974f6b85a07bf7d9';

      $('.iGallery').on('didLoadInstagram', didLoadInstagram);
      $('.iGallery').instagram({
        hash: 'usa123',
        count: 1,
        clientId: clientId
      });

    });
  </script>

Well , the main problem is that the part that handles the gallery seems to read only the part added manually , but not the ones that comes thanks to the instagram api .

I'm pretty sure that my problem is related to the time that the script is loaded , since the script changes some atributes of the images like href to data-href , but I've tried to pre-load that information , and I received the same results.

In order to give a visual idea of my problem , I have the script in codepen :

http://codepen.io/anon/pen/XJdbZR

And , this is the idea I have that tells me that only the per-loaded information is being modified by the script

I appreciate any kind of help or hint. Thanks

Answer 1

problem is that the first time that page inits will bind imageflip to all ul#iGallery children and on that moment your new images are not loaded so normally in similar cases must bind your function imageflip into ul again.
im sure this will solve your problem but here in your case ther's another problem and that's u cant bind imageflip twice because of plugin structure.
i fixed your code at codepen "fixed code" but this will only work if didLoadInstagram function trigges.