Possible javascript issue when using tabber and gallery on same page

[PatKeo]

Hi there,

Currently have an issue using the gallery module with this page 

You can see that there are 2 tabs, and on each one there is a gallery. The issue is, when you select the 2nd tab, the gallery doesn't load straight away and gives a broken image icon, but will either appear some time later or when you click on one of the arrows. So the initial main image is loading correctly but not on the second tab.

We need the galleries to show instantly. What would I need to do in the javascript file to make it so we can have 2 stances of this load at the same time?

Thanks,

Pat.

[tjoyce · Accepted solution]

@PatKeo - I haven't seen the module you're referring to but, can you try changing the lazyLoad setting to "progressive"? Check out this post for an explanation of the difference.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[PatKeo]

Hi Tim,

How would I got about it so it applies to all galleries that are added to that page? I created an additonal Javascript file to go with the template but this hasn't fixed the issue.

In the template, each tab section has a flexible column in it so the user can add a gallery and text to it, depending on the number of listings. For some it could be 1, others it could be 3 or 4 etc.

Thanks,

Pat.

[tjoyce]

@PatKeo -sorry, I didn't realize this was the built in gallery in the Design Tools. Adding the following script to the footer of your page should help out a lot:

<script>
$(function(){
  $('.hs_cos_gallery').each(function(){
    $(this).find('img').each(function(){
      if (typeof $(this).attr('src') === typeof undefined) {
        $(this).attr('src', $(this).attr('data-lazy'));
      }
    });
  });
});
</script>

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[PatKeo]

Hi @tjoyce,

Almost there! So as you can see here https://www.rymanhealthcare.com.au/nellie-melba-current-availabilities

The broken image symbol is no longer there when you switch which is great, but there is still a delay on the gallery appearing. The extra JS file attached to the template isn't helping.

What can I add to remove this loading delay?

Thanks,

Pat.

[PatKeo]

Hi @tjoyce,

Just wondering if you had a suggestion for improving the delay time in the galleries appearing?

Thanks,

Pat.