My carousel works fine and I had no problem setting up and theming, but every time I reload the page all of the images flash below the carousel before settling in the carousel. It happens in every browser I've tested.

I've found multiple reports of this problem but so far no fix applicable to drupal. I found one (non-drupal) fix that seems like it should be adaptable but I can't figure out how.

The idea is to make all but the first image in the carousel of a class that is hidden by css such as #hide{display: none;}

Then they used a function like this to un-hide the images once the page loads:

Jquery Javascript:

jQuery(document).ready(function() {
$("#hide").css("display","block");
jQuery("#carousel").jcarousel({scroll: 1,auto: 5,wrap: "both" });
;}

Seems reasonable that this could be adapted for drupal without too much trouble... Hiding the images is easy, but getting them to come back hasn't worked so far. I tried using drupal_add_js but I couldn't figure it out. Clearly I don't know what I'm doing. :) Please help! I have to launch this site in a few days and I really don't want to resort to redoing it in actionscript.

Thanks!

Comments

savvypatachonica’s picture

Priority: Critical » Normal
Status: Active » Fixed

Figured it out... For future reference, just change your php code to something like this (assuming your images are of the class .hide):

jcarousel_add(’#maincarousel’, array(’scroll’ => 1, ‘visible’ => 1, ’size’ => 12, ‘wrap’ => both) );

$data = ‘$(document).ready(function() {
$(”.hide”).css(”display”,”block”);
});’;

drupal_add_js($data,’inline’);

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

webwriter’s picture

Can you be more specific about where this code goes? I have the same issue with everything being displayed during page load.

Thanks!

gmclelland’s picture

See this for a possible solution:
http://drupal.org/node/532748