Slider images wont show up.

[Orhn]

I really don't have any idea what is wrong and what im missing but when i load the page Orbit is working without images.

When i check with the Firebug i can see the images correctly. But on the page there is no images.

I attach all the necessary CSS and JS files too.

Ok i found this in the demo:

div id="featured" class="orbit" style="width: 940px; height: 450px;"

But in my page was like this:

div id="featured" class="orbit" style="width: 1px; height: 1px;"

So i put !important in css file and now is working. But why it happen like this?

And now as i see other then fade animation option other animation types (horizontal-slide, vertical-slide, horizontal-push) not working.

I mean it just changes too quickly there is no animation.

[Orhn]

Is anybody there to answer this questions?

[anselmh]

Same problems here.

[aaronfay]

We have the same problem also, on the orbit demo page, #featured has width:940px;height:450px but on our page #featured has width:1px;height:1px. I suspect orbit is setting the dimensions based on a parent element or something, and there may be a cascading style that's causing the problem (parent dimensions or somethign?)

[bsenyk]

Hey guys,

I had the same issue, but it looks like I figured it out. My problem was that I took this line from the example:

$('#featured').orbit();

and put it inside the existing $(document).ready() call on my page. The problem with doing that is that the document is considered "ready" before images are downloaded. So, when orbit tries to figure out the appropriate width and height based on the images, it gets 0 back as the answer.

The fix is simple -- wait to initiate orbit until after the window.load event (just like in the example):

$(window).load(function() {
         $('#featured').orbit();
     });

I hope this helps!

[Orhn]

Thanks hor the info but i really didn't get it!

This is what i have in my document:

        $(window).load(function() {
            $('#featured').orbit({
            animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 800,                // how fast animtions are
            timer: true,                        // true or false to have the timer
            bullets: true,                      // true or false to activate the bullet navigation
            advanceSpeed: 4000,                 // if timer is enabled, time between transitions 
            pauseOnHover: false,                // if you hover pauses the slider
            });
        });

So where do i put this $(document).ready() in my document? Or do i have to? Can you provide the code from your working version?

And the strange thing is there is nobody willing to help from Zurb! If they were not going to provide support why they released this? I opened this thread almost a month ago.

I understand Zurb released Orbit for free but if the software is free or with charge either way people gonna have problem then will ask questions right?

[bsenyk]

Hmmm... so far that looks fine to me. Can you post the html for the 'featured' element?

[Orhn]

    <!-- ORBIT SLIDER / http://www.zurb.com/playground/orbit-jquery-image-slider -->
    <div id="featured"> 
        <!-- <div class="content" style="">
            <h1>Orbit does content now.</h1>
            <h3>Highlight me...I'm text.</h3>
        </div> -->
        <img src="orbit/orbit-slides/slide-01.jpg" />
        <img src="orbit/orbit-slides/slide-02.jpg" />
        <img src="orbit/orbit-slides/slide-03.jpg" />
        <img src="orbit/orbit-slides/slide-04.jpg" />
    </div>
    <!-- Captions for Orbit
    <span class="orbit-caption" id="htmlCaption">
        <strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)
    </span> -->
    <!-- ORBIT SLIDER SHADOW -->

[bsenyk]

That also looks fine. If the images are accessible, the width should be getting set correctly. The only other possibility I can think of is that another css rule is affecting it. If you send me a link to the page, I could take a quick look.

[Orhn]

Thanks to you i have solved the problem:

In -jquery.orbit-1.2.3.min.js- file look at the line 14 there you will see this: f.add(h).width("1px").height("1px")

Replace that 1px entries with auto option.

I don't have any idea why that 1px width and height entries is there.

This one is solved but still other animation types not working.

[shrikantmeena]

I had the same issue, but i fixed it differently

In you page's CSS, the rule for the slider should have the width and height overridden like this:

in my case: #myslider { width: 100% !important; height: 350px !important; }

generically: #id_of_orbit_slider { width: PX_OR_PERCENT !important; height: PX_OR_PERCENT !important; }

Hope this helps!

[Orhn]

This quote is from my first post.

"So i put !important in css file and now is working. But why it happen like this?"

If you read my first post then you can see i have already done that.

Strange thing is that width and height is in JS code.

[shrikantmeena]

Sorry! Orhn, i didn't notice your post completely. Oops for the repeat.

[Andyph]

Morning everyone.

After trying for hours to implement every suggestion on this page, analyzing the demo code etc, I can still not get this to work.

At the moment, I have the featured div displayed, with a loading graphic in the middle and the navigation arrows etc. The only problem being that the images won't show in the area. I have tried amending sizes etc but still no luck.

Are the above solutions the only way around it or has anyone uncovered any other issues?

[Orhn]

@Andyph

If you follow this one. You are good to go. But also make sure your image paths are correct too. You can check it via Firebug plugin for Firefox.

In -jquery.orbit-1.2.3.min.js- file look at the line 14 there you will see this: f.add(h).width("1px").height("1px")

Replace that 1px entries with auto option. Like this: f.add(h).width("auto").height("auto")

I don't have any idea why that 1px width and height entries is there.

This one is solved but still other animation types not working.

[Andyph]

@Orhn

Thank you for the speedy reply. I did try this one earlier and was checking it in Firebug with no avail, but will definitely go back and give it another go and let you know how I get on.

[Andyph]

Great news!

It is now working. Again, it was a multitude of different changes that I made.

1. Editing -jquery.orbit-1.2.3.min.js- (Thanks to @Orhn).
2. Changing the size of the orbit-wrapper class as stated earlier too.

Not sure why it didn't work for me the first time, but we are now in business. Thanks for the advice.

[Orhn]

You welcome. Happy to help.

[gordonbanderson]

I could not get the fix swapping 1px for auto to work, mentioned above. However this

#myslider { width: 100% !important; height: 350px !important; }

does work. It feels a little 'dirty' though, and overrides such as this should not be required in order that Orbit works correctly.

[allanwhite]

I'm finding a similar issue - the images wouldn't show up at all. @gordonbanderson's suggestions fixed it, but it's really hacky to have to override the css manually here.

Side note - I'm using CSS from the SASSyfied Foundation gem.

[gordonbanderson]

Fixing the width also breaks the nice shrinking seen with other images when reducing the browser width towards mobile

[allanwhite]

@gordonbanderson - my guess is we'd need to target the UI and other containers with a media query or something.

I don't mind if it doesn't scale smoothly; that only matters to us devs when we drag our windows to test viewports. ;) I do hope it will load cleanly in other sizes.