Slider not loading on Previous events – js function I can use?

[Caroline Elisa Haggerty]

Hi there,

We have a slider that loads in the last box on the event list view:
http://themeteor.co.nz/events/list

However when you go to Previous events it disappears:
http://themeteor.co.nz/events/list/?tribe_paged=1&tribe_event_display=past

The code for the slider is still there, so I wonder if it might just be a case of calling the slider again, or even just resizing it. Is there a js function I could use to do this?

Thanks

[Nico]

Hi Caroline,

Thanks for reaching out to us! Hopefully I can help you out setting this up 🙂

Looking into your site the issues seems pretty clear, when the events are loaded the slider html gets loaded again but it’s the javascript init code just runs once (on page load). I see two ways of fixing this: one is move the slider html out of the events block so it doesn’t get reloaded when events are paged, or trigger the slider init code every time the slider it’s included. This is the plugin init code:


<script id="new-royalslider-init-code" type="text/javascript">
jQuery(document).ready(function($) {
$('.new-royalslider-2').royalSlider({template:'default',image_generation:{imageWidth:'',imageHeight:'',thumbImageWidth:'',thumbImageHeight:''},thumbs:{thumbWidth:96,thumbHeight:72},autoPlay:{enabled:!0,delay:5000,stopAtAction:!1},visibleNearby:{enabled:!0,centerArea:0.5,center:!1,breakpoint:500,breakpointCenterArea:1,navigateByCenterClick:!0},video:{autoHideBlocks:!0,forceMaxVideoCoverResolution:'standard'},width:'100%',height:'400px',autoScaleSlider:!0,autoScaleSliderWidth:4,autoScaleSliderHeight:1,slidesSpacing:0,imageScaleMode:'fit',imageAlignCenter:!1,controlNavigation:'none',arrowsNavHideOnTouch:!0,loop:!0,numImagesToPreload:3,keyboardNavEnabled:!0});
});
</script>


Does this makes sense to you? Do you think you can tweak this or still need help?

Please let me know about it,
Best,
Nico

[Caroline Elisa Haggerty]

Thanks Nico, but I want the slider to site in the event list and the slider code is loaded via the RoyalSlider plugin so I’m not sure how to change how the slider is initiated.

I have contacted Royalsider support.

Thanks again.

[Nico]

Hey Caroline,

Thanks for following up on this! A crude but quick way of solving this might be to include the initialization JS code just after the slider html. That should work I guess.

Other option could be to listen for the ajax call and once it loads fire the slider code. Unfortunately the coding for that customization would be out of our support scope. Hopefully the folks behind Royalslider might point you in a right direction also.

Please let me know if they come back to you,
Best,
Nico

[Caroline Elisa Haggerty]

Thanks Nico, I ended up reinitialising the slider on ajaxComplete().

[Nico]

Hey Caroline,

Glad to hear you could sort this out 🙂

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts