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?

Did you get a solution for this? – Bobby Francis Joseph May 24 '13 at 04:44 — Bobby Francis Joseph, May 24 '13 at 04:44

score 3 · Answer 1 · answered May 24 '13 at 12:26

3

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

answered May 24 '13 at 12:26

A. Wolff

72,298
9
84
139

My original question was http://stackoverflow.com/questions/16720069/how-to-get-the-callback-of-onload-event-for-orbit-slider-of-foundation-zurb-fram . 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. – Bobby Francis Joseph May 24 '13 at 13:13

score 1 · Answer 2 · answered May 29 '13 at 19:46

1

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>

answered May 29 '13 at 19:46

Rohit Agrawal

4,976
5
16
29

@ Rohit, You are right, as Orbit, as dependent on jQuery.. :) – MarmiK May 31 '13 at 09:29
Its Orbit Framework is built on jQuery, it will not run without jQuery.. it one of dependency.. ORbit is also using jQuery only.. :) – MarmiK May 31 '13 at 10:36

score 0 · Answer 3 · answered May 31 '13 at 09:32

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

score 0 · Answer 4 · answered Sep 05 '13 at 19:24

0

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

answered Sep 05 '13 at 19:24

Brett DeWoody

50,328
25
121
168

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

4 Answers4