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?
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');
});
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.
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.
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.
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.