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?

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?

• javascript
• jquery
• zurb-foundation
• prettyphoto
• orbit

4 Answers 4

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

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> 

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 :)

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