Ideal-Image-Slider w/ Includes implementation

Help
1

I couldn’t get the simple slider/carousel to work so I’ve gone and followed a different route; the ideal-image-slider. Yet when I try to implement the iis (ideal-image-slider) using includes as outlined here, I come short invoking the javascript slider. At the same time I’m trying to use this image-slider within a collection post; my projects collection. It seems to me the “include” is only meant to be used in pages or layouts but I would like to use it in posts as well, so I’ve added the code below to slider_scripts.html , yet to no avail. I did the same change to slider_styles.html, fyi.

{%- assign post_sliders = site.posts.image_sliders | uniq -%}
{%- assign collection_sliders = site.projects.image_sliders | uniq -%}
{%- assign iis_slider_array = page_sliders | concat: layout_sliders | concat: post_sliders | concat: collection_sliders | uniq -%}

At the same time, vs code throws a bunch of errors while looking at slider_scripts.html in normal .html mode, only when I switch to jekyll (html) do the errors go away.

See repo @ master-grid-iis branch

Thanks for all the help beforehand!

P.S. I could use some rule of thumbs and overall do’s and don’ts, since I’ve only took a deep dive into jekyll for the past two weeks.

Edit: Here’s the error I’m getting when the browser invokes new IdealImageSlider ;
var = new IdealImageSlider.Slider({ - Unexpected token '='
which means nothing is being passed into var. So slider_scripts.html is where the problem lies.

Edit 2: Fixed the error above, now getting;

Uncaught TypeError: Cannot read properties of undefined (reading 'container') at r.IIS.Slider.addCaptions (iis-captions.js:15) at 2021-11-25-losPinos-jekylliis.html:101
IIS.Slider.addCaptions @ iis-captions.js:15
(anonymous) @ 2021-11-25-losPinos-jekylliis.html:101

A problem with assigning captions as it seems.

2

Close to same thing is happening when I create my own include file ideal-image-slide.html for images to go in ideal-image-slider div#slider. I get an error at

Uncaught TypeError: Cannot read properties of undefined (reading 'container')
    at Slider.IIS.Slider.addBulletNav (iis-bullet-nav.js:29)
    at call_ideal-image-slider.js:9

div#slider is not populated either but it’s not throwing a “not found” error, so that’s good? Not exactly sure why it’s saying container is undefined. I was able to get it to work in commit #2735fad without using includes.

see repo - master-grid - commit #8a9e369

3

what page is this on on the live site?

I would guess this is some sort of loading issue where the bullet-nav.js is loading before container has been defined.

4

I just PR’ed and merged master-grid-iis into gh-pages, so the site should be live here.

If you go to this page, you can see the error chrome throws @ addCaptions() with the ideal-image-slider.

P.S. I think you’re right with your hypothesis, mind elaborating a bit more?

5

you are loading the js in the head/top of the page above the elements it is trying to manipulate so it can’t find them as the js is loaded before they exist. I think.

Try adding the js files at the bottom of the page in the footer, then the slider elements will have already loaded by the time the js files load and it can then manipulate them.

1 Like
6

Yes correct, put the slider_scripts.html after the body, everything works. Kind of annoyed I didn’t think of that but thank you!

One last thing, now the slider_scripts.html is not passing anything into iis_slider_array when I’m trying to load sliders on post excerpts on pages. The javascripts are loading so the iis_slider_array is not empty, so it seems. And I have image_sliders_load_all: true on all the relevant pages, yet nothing gets passed on to slider.selector where slider = site.data.sliders Anybody have any idea as to why that might be now?

7

I’d open a new issue, post links to the repo and a live page that is having issues.

Before that I would try to remove the slider from the issue to see if you are having a js problem or a liquid/jekyll problem. For example just print out what is in the slider_array rather than passing it to the js for the slider - is there anything in the array? actually you can probably just do that in the console in chrome while looking at the page in the browser just type console.log(iis_slider_array) and press return and see if you get anything.

8

@rdyar both the iis and iis-include repos are archived and won’t allow new issues to opened. Though I took your advice and opened a new discussion. I can raise it to issue level if you think it’s worthy. Here’s the live page and here is the page with the issue where the post excerpt won’t show the slider. Thank you very much again @rdyar !!!

9

I meant here - not on the GH repo.

When you link to the page that doesn’t work, are you saying it is working on a different page?

don’t reply to this thread, make a new post on this site and give links to your repo and the live page that is not working and if it is working on another page give a link to that as well.

Try to explain the entire issue so others can understand it without reading this thread though be concise.

But I would also try to investigate more on your own - it sounds like you are somewhat knowledgeable about js - to start I would eliminate the slider and just see if what you are passing to the slider is working - so make sure the liquid part is working then add the slider and see what happens. This type of issue is hard for us (me) to sort out cause it is a combo of a js slider and then some complicated liquid. You need to make sure one works before adding in the other as once they are together it is far more complicated especially for us just taking a quick look.

1 Like
10

Here’s the link to the new topic/issue I’ve created.