Hi Dimmy,
Both of these points are “maybes” because I’ve never tried loading the slideshows in with Ajax.
I think you will need to include those scripts on all pages, because they might be needed when someone navigates to the next page.
I think you will need to re-initiate the slideshows after the content has been loaded with ajax.
If you figure it out please let us know how you did it 🙂
Regards,
Tom.
Loading the script is fine.
I think you will need to re-initiate the slideshows after the content has been loaded with ajax.
However, loading the slideshow itself (all the images after the first) is the stumbling block.
Is there a particular script/function in addition to the .css/.js files above that I should consider?
Perhaps a javascript function to intialize the particular slideshow/div (e.g metaslider-id-204) manually?
Hi dimmy,
The JavaScript you would need to run again is printed out to the page itself (it will be different for each slideshow), so you’d need to copy and paste that into your ajax loader somehow and run it again when the page content is brought in.
Regards
Tom.
Hi Tom
Sorry I didn’t get back to you on this – was on a deadline with that project and decided to drop Meta Slider altogether. Would really really like to sort this out for future projects though, plus am really wanting to ‘go Pro’, but am reluctant if I can’t get the functionality I need.
UPDATE: PLEASE DISREGARD WHAT’S BELOW THE DOTTED LINE.
I can get the slider to work using Flex Slider (as opposed to R.Slides). However, I’m still having the following issue:
It requires a second visit back to the page to get the slider to load. So, starting at the link page, clicking on Link to Metaslider loads the first image but not the script. Click on Link Back (go to previous page) then Link to Metaslider again loads the script.
Regards, Damian
—————————————-
Here’s where I’m at:
What I’m loading with the Ajax loader in the necessary spot looks like this:
$.getScript(rootUrl + 'wp-content/plugins/ml-slider/assets/sliders/responsiveslides/responsiveslides.min.js');
cssNode = document.createElement('link');
contentNode.appendChild(cssNode);
cssNode.type = "text/css";
cssNode.rel= "stylesheet";
cssNode.href = rootUrl + 'wp-content/plugins/ml-slider/assets/sliders/responsiveslides/responsiveslides.css?ver=3.0.1';
cssNode = document.createElement('link');
contentNode.appendChild(cssNode);
cssNode.type = "text/css";
cssNode.rel= "stylesheet";
cssNode.href = rootUrl + 'wp-content/plugins/ml-slider/assets/metaslider/public.css?ver=3.0.1';
So, I’m loading responsiveslides.min.js, responsiveslides.css & public.css.
Loading “responsiveslides.min.js” does load/run the necessary javascript relating to a particular slideshow.
However, there are two quirks:
It requires a second visit back to the page to get it to load. So, starting at the link page, clicking on Link to Metaslider loads the first image but not the script. Click on Link Back (go to previous page) then Link to Metaslider again loads the script.
Subsequent images after the first do not load in the slider. When looking at network log in Chrome’s developer tools, they are being loaded, just not getting put in the slider. When inspecting the li element for the particular slide, and hovering over the img src, it’s being output at 0x0 pixels with a natural of the actual size.
Thanks for your suggestions thus far. Hopefully we can resolve this.
Regards
Damian
