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

Question

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?

Isaacs

Answer 1

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
    });
});

Lysin

My original question was #16720569 . I chose to start a bounty here since it looked similar and I needed to wait two days to start it on my question. Could you please take it look at my original question. I tried applying what you told but could not fix it. Seems I am missing something. Thanks so much for helping. – Gujral

Answer 2

here i think you can use load event from jquery

 <script type="text/javascript">
  $(window).load(function () {
      $('#featured').orbit({fluid:true});
      $("a[rel^='prettyPhoto']").load(function(){
        $(this).prettyPhoto({
          default_width:640,
          default_height:500,
          theme:'light_square'
        });
      });
  });
 </script> 

Salamone

@ Rohit, You are right, as Orbit, as dependent on jQuery.. :) – Robi

Its Orbit Framework is built on jQuery, it will not run without jQuery.. it one of dependency.. ORbit is also using jQuery only.. :) – Robi

Answer 3

You are using After Slide Change

refer Orbit's documentation

'afterSlideChange function(){}, //Empty Function for you to use after slide change'

So this call will empty the function and you have to call it again and again..

Now, my question is why you are doing this, any particular reason? If not then just remove that.

and as per my perception Rohit's answer above will do the rest...

I hope this will do :)

Robi

Answer 4

With the update to Foundation 4 there's now an orbit:ready event. The event fires when the slider is loaded.

Cuyp