Menu icon Foundation
Interchange-Reflow after adding images

Hi there,

nice greetings from germany. :-)

I have a small problem with the interchange reflow.
I use jscroll to dynamic load images after the page has loaded.

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
/>
            

         

After inserting the images by jscroll to the DOM, I call the "interchange reflow" function:

<script>
    $(document).foundation('interchange', 'reflow');
</script>
            

         

After that, I can see, that interchange seems to recognize the new images, because they have get their "data-uuid" from interchange:

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
        
        data-uuid="interchange-htllnuvz2i"
/>
            

         

What I miss, is the src-part, which will normally generated by interchange like this example:

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
        
        data-uuid="interchange-htllnuvz2i"
        
        src="http://thumbnails.travel-it.com/g2thmb.php?gid=13022"
/>
            

         

Has someone a idea?

And sorry for my english. Long time out of school. ;-)

Best regards

Michael

interchangeReflow

Hi there,

nice greetings from germany. :-)

I have a small problem with the interchange reflow.
I use jscroll to dynamic load images after the page has loaded.

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
/>
            

         

After inserting the images by jscroll to the DOM, I call the "interchange reflow" function:

<script>
    $(document).foundation('interchange', 'reflow');
</script>
            

         

After that, I can see, that interchange seems to recognize the new images, because they have get their "data-uuid" from interchange:

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
        
        data-uuid="interchange-htllnuvz2i"
/>
            

         

What I miss, is the src-part, which will normally generated by interchange like this example:

<img  data-interchange="
        [http://thumbnails.travel-it.com/gthmb.php?gid=13022, (small)],
        [http://thumbnails.travel-it.com/gthmb150.php?gid=13022, (medium)],
        [http://thumbnails.travel-it.com/g2thmb.php?gid=13022, (large)]"
        
        data-uuid="interchange-htllnuvz2i"
        
        src="http://thumbnails.travel-it.com/g2thmb.php?gid=13022"
/>
            

         

Has someone a idea?

And sorry for my english. Long time out of school. ;-)

Best regards

Michael

M_Koenigs over 5 years ago

I have tested some more.

After inserting the new images by jscroll and interchange reflow, I can't see the pictures, because the src is missing.

BUT ONLY UNTIL I change my browser size and I reach a breakpoint. If the layout changes from large to medium etc. the images are shown and the -Tags get the missing src from interchange.

Could it be, that interchange isn't able to recognize the viewport and doesn't know, which src to take?

So what can I do to show the images without changing the viewport?

Best regards

Michael

M_Koenigs over 5 years ago

OK, I don't know if it is a good solution, but when I call both functions I can see the images:

$(document).foundation();
$(document).foundation('interchange', 'reflow');

I don't know why, it seems not very good for the performance, but what will I do? :-)

Nemanja Milosavljevic over 5 years ago

For some reason, "interchange", "reflow" is not working for me at all...

I've tested like all sort of approaches, and non worked.
It seems like a trivial thing to do: setup a data-interchange, load template, reflow the templates so that they are rendered etc. but it's not.

Any idea guys? I'm trying to load php partial with php variable inside it (base_url) and it's just not working for me.