CODEWITHSUNDEEP
jqueryhtmlcssimagejcarousel
Moozoo
Moozoo

Reputation: 497

jcarousel displaying items in vertical list before jquery page

I'm using the jquery plugin jcarousel to display 73 thumbnails. Before the script is ready, it shows all the thumbnails in a vertical list down the page. At the moment, I am using a script to show the images at the correct size once everything is loaded.

Just wondering if I would be able to get opinions on whether this is a good approach and if there are better ways to hide content until the jquery is fully loaded? :)

The code:

 $(window).load(function() {
 jQuery('#mycarousel').jcarousel({
    start: <?=$page?>
});
});

dynamic CSS

 $(window).load(function() {
 $(".jcarousel-skin-tango .jcarousel-item img").css({height: "125px", width: "125px"});
 });

html image

 <img src="images/img.jpg" height="0">

Upvotes: 0

Views: 1852

Answers (1)

Thomaszter
Thomaszter

Reputation: 1474

I think you have a good reason to initialize the carousel with window load. Apart from that, I would work with visibility:hidden. The plugin can work with the images real sizes and it's hidden.

HTML

<img src="images/img.jpg" style="visibility:hidden;">

Then, it's better to make the images visible on the plugin's callback:

jQuery

jQuery(window).load(function() {
    jQuery('#mycarousel').jcarousel({
        start: <?=$page?>,
        initCallback:function(){
            jQuery(".jcarousel-item img").css({'visibility':'visible'});
        });
    });
});

Hope this helps.

Upvotes: 2

Related Questions