Slider images are not showing in the page

SOLVE
Regular Contributor

Hi, We have created image gallery in our template but it's not showing in the pages made from that template. The thing I have noticed is that when we edit page the images are showing up there but when we save it and go to the page the images are not showing up.

 

this is the preview link https://www.fylehq.com/lp/ccr?hs_preview=OBNOZhFz-6625838298 

and I want the slider to be under 'Credit cards done the right way', 

and this is the design manager link : https://app.hubspot.com/beta-design-manager/3906991/templates/6600483432

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Platinum Partner

@Shaykoo,

you can create a folder in design manager for the js.  then you can create new files and copy the code into the files.

once you have them saved, you should see them as an option in the design manager sidebar "Linked Javascript Files"

You can add that way

Design_Manager___HubSpot.png

 

 

or, you can find the file in the left sidebar and right click the file and select copy public url and add that to the html with which you are working

Design_Manager___HubSpot_and_Slack_-_HubSpot_Developers.png

dennis
6 Replies 6
Highlighted
Regular Contributor

Hello @Shaykoo,
            There are 2 problems in your page.
            1. Display:none css given in global slider class
            2. Images are added without lazyload plugin so the actuall images are not appearing as they should be so please add below code in Additional <head> markup located in right side of template.

For First Bugfix

<style>
.hs_cos_gallery .slick-slide { display:block; }
</style>


For Second Bugfix

<script>
    $(window).on('load',function(){
        $('img[data-lazy]').each(function(){
            $(this).attr('src',$(this).attr('data-lazy'));
         });
    });
</script>


Kindly accept this as solution if it helps !

Thanks

Reply
0 Upvotes
Regular Contributor

@Designer_WOT No buddy, this isn't working for me. See the problem is the slider is showing up in the 'Edit page' but when we save it , it's not showing up in the published page. 

Reply
0 Upvotes
Regular Contributor

@Designer_WOT Hey, I tried putting 

<style>
.hs_cos_gallery .slick-slide { display:block; }
</style>

but the page is showing 3 images stacked vertically , there is no sign of slider there. And I put  

<script>
    $(window).on('load',function(){
        $('img[data-lazy]').each(function(){
            $(this).attr('src',$(this).attr('data-lazy'));
         });
    });
</script>

but nothing is working as it is supposed to be. @Designer_WOT could you please check again one more time where to put the js you have sent. 

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@Shaykoo, is this resolved?

ps:  nice design with subtle animations Smiley Happy

dennis
Reply
0 Upvotes
Regular Contributor

No, @dennis_e actually the slider is working now because I removed the nav bar from the template. The JS and CSS file from navbar is conflicting with the template's script hence blocking the template's js.  

 

these are some script tag placed in the custom html of the nav bar which the brower is not able to find 

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/matchMedia.min.js"></script>
<script src="js/matchMedia.addListener.min.js"></script>

 

I have all the files locally but dont know where to put it, where is the js folder to upload all these files so hubspot can also locate them .

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@Shaykoo,

you can create a folder in design manager for the js.  then you can create new files and copy the code into the files.

once you have them saved, you should see them as an option in the design manager sidebar "Linked Javascript Files"

You can add that way

Design_Manager___HubSpot.png

 

 

or, you can find the file in the left sidebar and right click the file and select copy public url and add that to the html with which you are working

Design_Manager___HubSpot_and_Slack_-_HubSpot_Developers.png

dennis