Ultimate Fade-In Slideshow -- hyperlinks not working

[farrahdiva]

1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

Hello! I love this slideshow--have used it a LOT. But for some reason, the links aren't working on the main Index slideshow, even though it's totally working fine on the mini-slideshow on the same page (here's the link). Please advise when you get a chance--thanks in advance!

[jscheuer1]

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Oh and BTW the images/indFade/intClimbing.png image is missing. there is an images/indFade/climbing.png image, that looks like the one you want.

That all said, the reason is that, although we can see through it, the mouse can't. The:

<img class="sliderFrame" src="images/scrollFrame.png" />

is covering it.

You can fix that by removing its z-index. But then the frame won't look as nice, especially during some of the transitions.

Take care of the missing image (either replace it, use the one I pointed out, or drop it from the slideshow's imagearray) and restore the credit. In the meantime I'll work out a scripted solution so that the frame image can remain 'on top' without blocking the links.

[farrahdiva]

Whoa... please accept my humblest of apologies. I apparently cannot read. I have re-instated the script credit in the footer of all pages. (Seriously, I'm really sorry--I have the utmost respect for you.)

Thanks for pointing out my missing PNG file--turns out I named it incorrectly.

And the slider frame! Doh! Well, keep me posted on a workaround--the client wants the vast majority of the images to point to the same page, so perhaps I'll just hyperlink the frame itself and call it a day for now.

You are a gentlemen and a scholar, kind sir.
-Farrah

[jscheuer1]

Thanks for bringing back the script credit, any reason why you couldn't have left it as part of the external script tag? That's not critical though, the way you've done it is acceptable.

Anyways, here's a workaround, replace:

<script type="text/javascript">
jQuery(function($){
var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [521, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/indFade/oneFam.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/exterior.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		//["images/indFade/newLocation5.png"],
		["images/indFade/oneBday.png", "http://www.gigglesnhugs.com/parties.php", "", ""],
		["images/indFade/040-5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/gigglesToGo5.png", "http://www.gigglesnhugs.com/parties-to-go.php", "", ""],
		["images/indFade/intSeaSerpent.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/spaghetti5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/intClimbing.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/dailyAct5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		//["images/indFade/dance5.png"],
		["images/indFade/parfait5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/intFront.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/salad5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow2toggler"
})
}); // end jquery ready
</script>

with (additions highlighted):

<script type="text/javascript">
jQuery(function($){
var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [521, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/indFade/oneFam.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/exterior.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		//["images/indFade/newLocation5.png"],
		["images/indFade/oneBday.png", "http://www.gigglesnhugs.com/parties.php", "", ""],
		["images/indFade/040-5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/gigglesToGo5.png", "http://www.gigglesnhugs.com/parties-to-go.php", "", ""],
		["images/indFade/intSeaSerpent.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/spaghetti5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/intClimbing.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/dailyAct5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		//["images/indFade/dance5.png"],
		["images/indFade/parfait5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/intFront.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""],
		["images/indFade/salad5.png", "http://www.gigglesnhugs.com/gallery-centurycity.php", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	onslide: function(layer, index){
		this.ulink.href = layer.getElementsByTagName('a')[index].href;
	},
	oninit: function(){
		var $sw = this.setting.$wrapperdiv, $uw = $sw.parents('#slideshowWrapper');
		$uw.find('img').eq(0).wrap('<a></a>').css({borderWidth: 0}).add(this.setting.$togglerdiv)
			.mouseenter(function(){$sw.trigger('mouseenter');})
			.mouseleave(function(){$sw.trigger('mouseleave');})
			.find('.next').attr('title', 'Next').end().find('.prev').attr('title', 'Previous');
		this.ulink = $uw.find('a').get(0);
	},
	togglerid: "fadeshow2toggler"
})
}); // end jquery ready
</script>

You may or may not want the red code. It simply adds 'Next' and 'Previous' as titles for the next and previous buttons.

[farrahdiva]

Hi, John!

Your workaround worked like a charm--a thousand thanks! In response to your credit placement question: it had to do with SEO and search engines crawling content. The reason is not entirely clear to me, but it's my partner's area of expertise, and apparently minimizing the number of characters preceding actual page content helps (however that may be achieved).

I actually have another thread open on this forum... do you have any expertise regarding the DD Splash Page script? If so, could you take a quick look at my question here? (Please forgive me if this is an inappropriate question--as you can see, I'm very new here and don't mean to offend.)

Many, many thanks again,
Farrah