Orbit slider in a Limelight Stacks content

Big White Duck BWD Support
1

I tried an Orbit slider inside a Limelight Stack and the Orbit does not have any height until the first image animation finishes. I have variable height checked in Orbit.

Duplicating the same Orbit on the main page produces a normal functioning Orbit.

Is there an addition setting needed within Limelight or is this just not possible?

2

Is LL set to Lazy PreLoad?
If that doesn’t work the only sure fire way will be to pull it in via a WebPage/iFrame LL Content child.

3

No, unfortunately Lazy Load doesn’t sort that issue.

I will have a good think about the Web/iFrame Child solution.

Thanks

4

I’m not surprised - it is the usual case of the orbit code needing to be run once the element is visible so that it can calculate its size.

Limelight does fire an event on the window when it opens the lightbox and so in theory you could attach a user event to that which triggers an orbit reflow.

window.addEventListener('infix:open', function (e) {
   foundation.jQuery(document).foundation('orbit','reflow'); 
});
1 Like
5

I think for the moment I will abandon the idea of a slider in modal window and if a slider is really needed, then I will create a layout on a normal page.

6

Just for future reference, I’ve just made a jQuery event which will be easier for users and other stacks to access. It will be in the next update

$(window).on('infix:open',function(){
//do something
});

Actually - I might change that to limelight:open (infix was the working name for the library during development as it fix ed a lightbox in a section)

7

That would be handy. Thanks

8

I’ve always had trouble with Orbit inside modals. I vaguely remember solving when using Reveal as the modal by attaching some height code to Reveal.

9

OK this is what I did:
@media screen and (max-width:640px) {#testimonial .orbit-container {min-height:540px;}}
@media screen and (min-width:641px) {#testimonial .orbit-container {min-height:400px;}}

Basically set min-height of .orbit-container depending on screen width. Not much fun.

1 Like
10

Good idea. I tried it and with a couple more media queries for more BP’s and it works quite acceptably. Thanks

1 Like
11

Glad to have helped. There’s always a BP grey area which is specific to nature of content. Kinda bored of playing that game, but it is what it is.

12

I found an easier way which is to use the Foundation Image stack and set preload image in the first image set to the height that the first image would be on a desktop screen. If the image appears too high in the first initial view on a mobile, the height will correct itself after the first transition.

13

That is a smart solution

14

Yes but what if you’re not using images in the slider?

15

Put an image of nothing but white (or whatever background colour it’s on) as the 1st item?

1 Like
16

Or perhaps you could load a Foundation image with a 1px x 1px transparent image, above the normal first slide contents and set the image to preload a large height image.

17

This is all getting a bit convoluted and hacky. Clearly the best solution is just to trigger a Foundation reflow on Orbit when LL opens.