Slideshow doesn't appear correctly on first page load

Hello Corbey,

I will examine you issue. Please give me some time.

Thanks
/George

Hello Corbey,

This issue (on first load or on page refresh) appears because the slideshow has not an initial fixed height. The slideshow's height determined dynamically by the height of each slider item. This is the default behaviour. Therefore, until the slideshow initialization, you can see all the slider items with their images one below the other.

Corbey, I will suggest you have 2 workarounds for this issue.

1. Define the initial height of slideshow and then let the slideshow to obtain the height of each slider item dynamically.

With this practise, you will define the initial (first) height of slideshow and then the slideshow will work as now. There is not a specific height that you should define, but the initial height should be relative to the height of your first slider item. One normal height for all cases is 300px for example. This is also a good initial height for default CorporateClean's slideshow for example.
Therefore, you should define the initial height inside template.php file (sites/all/themes/corporateclean/template.php) before after:onAfter attribute. The onAfter function calculates and finally defines the height of slideshow based on the height of each slider item

Change from

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

To

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
        height: 300,
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

2. Define the initial height and comment the onAfter function in order to achieve a specific slideshow height.

With this practise the slideshow object knows his height by default and there is no need to calculate the slider item's height. You should comment the option after: and add the option height: with your desired height inside the teplate.php file. Your "desired" height must be the greatest of all heights of each slider item. This practise is an already closed (fixed) issue here http://drupal.org/node/1330298

Change from

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

To

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	//after: onAfter
        height:400
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

You can see all the JQuery Cycle plugin options here http://jquery.malsup.com/cycle/options.html.

Thanks
/George

Corbey inform me if you need further assistance.

Thanks
/George

Committed and will be included into next Corporate Clean release:
1. Define the initial height of slideshow and then let the slideshow to obtain the height of each slider item dynamically.

Thanks
/George