Incorrect view on first loading page

[temsc]

Incorrect view on first loading page

[darsain]

You are missing the common sense when working with images. What is happening is that you are calling sly on DOM load when images are not ready, and thus haven't had the chance to resize their containers, so sly is working with elements that are 0x0 px big.

You can confirm that by calling sly('reload') on your frame after the site has been loaded, which fixes the issue immediately.

I suggest you to use plugin like desandro/imagesloaded, and let it to tell you when to call sly, or even better, if the size of the elements is not dynamic, assign it manually in CSS. That will fix the issue, and won't introduce any new dependency or a code requirement.

---

Not a bug, closing the issue.

[temsc]

I puted this on document.ready section:

            $("ul.slidee").css("display", "none");
            $(".slidee").imagesLoaded( function( $images, $proper, $broken ) {
                $("ul.slidee").css("display", "block");

                $('#frame').sly(
                {
                    horizontal: 1,
                    itemNav: "forceCentered",
                    prev: ".prev",
                    next: ".next",
                    dragContent: 1,
                    scrollBy: 1,
                    speed: 200,
                    dynamicHandle: 0,
                    scrollBar: ".scrollbar",
                    //easing: "easeOutBack" // with jQuery easing v1.3
                });
            });

Thank you so much! Yours js-libraries are the greatest! :)

P.S.: trick with $("ul.slidee").css("display", "none"); is to hide all images then they loading.

[darsain]

Your "trick" might cause images not to load at all. Browsers won't load images that are display: none; or within a container with display: none;. If it works, it is only because you are setting the display: none; after the images have started with loading, and that is a highly unreliable assumption.

Also, I mentioned that setting the size of your li elements manually in CSS is a better solution than including ImagesLoaded plugin. But, whatever suits you...

[temsc]

Width of element "#frame" setting then Sly activated, so I can not to know width of this element before.

Btw, maybe I can to calculate width of #frame by sum of all images widths, by using $images parameter of imagesLoaded( function... ??