Clickable rotating header image with CrossSlide fade

Aubergine · #1 Feb 14, 2011, 04:50 PM

Took me some time to figure this out, so thought I'd share. Seems to work with standalone or multi-site. If Rotate Header Images is selected and Fade is set to a number greater than 0, the Clickable option is lost because the entire #imagecontainer div is replaced by the CrossSlide fade script. To get it back, an href argument must be passed to the script. To do that, edit the jQuery line that appends crossSlide in ATA's js.php file. Using echo() inside the implode() function causes an error, but a variable works, so it is created in the PHP block above the jQuery code.

The modified code:

Code:

<?php if (strpos($bfa_ata['configure_header'],'%image')!== FALSE AND 
$bfa_ata['header_image_javascript'] != "0" AND $bfa_ata['crossslide_fade'] != "0") { $homeURL = get_bloginfo('url'); ?>

	jQuery('div#imagecontainer')
	.crossSlide({sleep: <?php echo $bfa_ata['header_image_javascript']; ?>,fade: <?php echo $bfa_ata['crossslide_fade']; ?>},[
	{ href: '<?php bloginfo('url') ?>', src: <?php echo implode( " },\n{ href: '$homeURL', src: ", bfa_rotating_header_images() ); ?> }
	]);

	/*  There's a comment in the js.php file here. Just leave it alone.*/
<?php } ?>

The original code:

Code:

<?php if (strpos($bfa_ata['configure_header'],'%image')!== FALSE AND 
$bfa_ata['header_image_javascript'] != "0" AND $bfa_ata['crossslide_fade'] != "0") { ?>
	jQuery('div#imagecontainer')
	.crossSlide({sleep: <?php echo $bfa_ata['header_image_javascript']; ?>,fade: <?php echo $bfa_ata['crossslide_fade']; ?>},[
		{ src: <?php echo implode( " },\n{ src: ", bfa_rotating_header_images() ); ?> }
	]);
	/* There's a comment here. */
<?php } ?>

On a standalone WordPress site, you can get by with typing the url of your blog for the href instead of using bloginfo('url') and $homeURL. Using the built-in WP variable $home_url did not work for me, but I may have used it incorrectly.

Standalone example: webbishdesigner.com
Multi-site blog: greenehamlet.com