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

In red is the image that is added dynamically

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

enter image description here

I appreciate any kind of help or hint. Thanks

http://stackoverflow.com/q/203198/1169519 – Teemu Dec 11 '14 at 05:52 — Teemu, Dec 11 '14 at 05:52

score 1 · Answer 1 · answered Dec 11 '14 at 05:56

1

The short answer? Lose the <> characters in your jQuery identifiers. You should treat the identifiers the same as you would CSS identifiers.

i.e.; $('<a>') should actually be $('a').

To test this, go ahead and run them both in your favorite browser console and see the difference.

answered Dec 11 '14 at 05:56

Ross Brasseaux

3,879
1
28
48

When I do that , my script loses format. How it is supposed to be done? – User2010101 Dec 11 '14 at 06:00
What I did is to change all the tags that had the <> , and this was my result : http://codepen.io/anon/pen/jEqPKW – User2010101 Dec 11 '14 at 06:06
I see now, you're creating new elements via that function. Instead of explicitly assigning the tag values to a new variable, why don't you create a template element, then clone it. [http://api.jquery.com/clone/] In all sites in which I've had to do some form of repeated element (usually for a datagrid or user admin panel or something), we use this cloning technique. PS: I'm 3/4th asleep right now so double-check everything I say. – Ross Brasseaux Dec 11 '14 at 06:38
I appreciate your help , but I really do not understand how to do that in this scenario, and how it would fix the problem that I am having . I understand that the function imageflip() is the key of this gallery . But I don't understand why it dont affect the new elements – User2010101 Dec 11 '14 at 06:51

score 1 · Accepted Answer · answered Dec 11 '14 at 07:59

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.

answered Dec 11 '14 at 07:59

moni as

977
6
13

It may be asking for too much...But do you think you can explain with more details what you did? – User2010101 Dec 14 '14 at 01:18
i'm glad that was helpful. you bound `imageflip` into `ul#iGallery` on document ready and images on instagram will load after document ready event, i just moved it within `didLoadInstagram()` method so plugin will bind after all images load complete. – moni as Dec 14 '14 at 07:45

Script do not affect all the element

2 Answers2