Is there a way to pass an initialization function to an Orbit slideshow?

javascript, jquery, orbit, prettyphoto, zurb-foundation

Solution

Orbit slider doesn't expose so much methods. Fortunately, there are some simple workarounds.

For example, you could set it like this:

$(window).load(function () {
    var sliderChanged = (function sliderChanged(prevActive, active) {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            default_width: 640,
            default_height: 500,
            theme: 'light_square'
        });
        return sliderChanged;
    }());
    jQuery('#featured').orbit({
        afterSlideChange: sliderChanged,
        fluid: true
    });
});

Problem

I solved my original problem, but I'm wondering if there's a more elegant solution. I'm using Foundation's Orbit to create a slideshow. This is no simple slideshow, it is a slide show where each slide has a data-caption defined, and within this data-caption there is HTML that needs to load a modal dialog. If you are using Foundation, you immediately think about using the Reveal library to bring up a modal dialog, and I would, but the requirements call for using prettyPhoto. (Those are the requirements.) Well the problem is that the elements in the data-caption are not affected by the original initialization call to: `$("a[rel^='prettyPhoto']").prettyPhoto();` What I need to do is make sure to initialize each data-caption as it is loaded. Well, here's the problem. I've solved this for slide transitions by using the afterSlideChange event, but the problem is the first slide. I need to call this method for the first slide that is displayed. Here's the code that solves this problem: ``` <script type="text/javascript"> $(window).load(function () { $('#featured').orbit({ afterSlideChange:function () { $("a[rel^='prettyPhoto']").prettyPhoto({ default_width:640, default_height:500, theme:'light_square' }); }, // empty function fluid:true // or set a aspect ratio for content slides (ex: '4x3') }); $("a[rel^='prettyPhoto']").prettyPhoto({ default_width:640, default_height:500, theme:'light_square' }); }); </script> ``` Is there a better way to do this without having to duplicate that code. Should I define an "initializeSlide" event of my own, or is there some answer I'm just missing?

Original source