-
Posts
-
Hi,
I have, on a website, some content that id loaded by ajax in a magnific popup (to be more specific, it is a custom post type in a content masonry). I would like to have the option to have a content slider in there, but even though all the html markup is loaded, the slider itself doesn’t work ; the picture are not visible, not are the arrows, etc. But it works fine when viewing the post through ‘normal’ loading.
Other clue : the arrow links do not have an event associated with them. So Ì suspect that when the post is loaded by ajax, the js that make the slider work is not loaded.
Is there a way to accompish this ?Here is ma ajax call code : https://pastebin.com/jR0EbjqW
I have read that magnific popup has a callback for that purpose, like so :
ajaxContentAdded: function() { jQuery('.bxslider').bxSlider(); },(I found that on the web, for another slider that had the same issue). Could that be a way to make it work ? I would really like to use the content slider.
Best
For your information, here is the code for the content fetching : https://pastebin.com/CkTiTzQ2
And the shortcode that is used : https://pastebin.com/FcTp7bqX
I know it’s a lot, but I wanted to give you all the necessary elements. The ‘jmpeynetslider’ shortcode creates a content slider from an ACF WYSIWYG field filled with multiple pictures.Best
Hi,
Thank you for the inquiry.
The content slider is activated using the AviaSlider function. You’ll find this in the enfold/js/shortcodes.js file around line 205. You may need to use the same function to re-initialize the slider inside the lightbox container.
//content slider $( '.avia-content-slider-active', container ).aviaSlider({wrapElement: '.avia-content-slider-inner', slideElement: '.slide-entry-wrap', fullfade: true});The AviaSlider function can be found in the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js file.
Best regards,
IsmaelHi,
Thanks for your reply ! I managed to make it work. For those who want to know, the way I did it was to add in the ajax call success something like :
if(response.content.indexOf('avia-content-slider-active') > -1) { $( '.avia-content-slider-active' ).aviaSlider({wrapElement: '.avia-content-slider-inner', slideElement: '.slide-entry-wrap', fullfade: true}); }I had to get rid of the container variable because it was not defined, and some things don’t seem to work (like the custom class on the slider, theorically inserted through the custom_class parameter of the shortcode, but that doesn’t really matter).
Just out of curiosity, is there other elements like this that have an ‘activation function’ ? If so, is there somewhere a list of them ?
Best,
- You must be logged in to reply to this topic.