Ultimate fadeinslideshow - Make Text Clickable

[remoteone]

1) Script Title: Ultimate fadeinslideshow

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

3) Describe problem:

I have a slightly modified version of the script where the Text is quite large and perminantly positioned in front of the corresponding image(s)
As can be seen here: onwireless.com.au
The problem is that the the Text is not click-able. Since the Text Block covers the image, when a user mouse clicks the text it wont link like the image does.
I would be keen to know the mod to make the text clickable. Thanks in advance for any help.

[jscheuer1]

You don't really need to edit the script. You can simply add the link into the description field of the imagearray. for example:

var $ = jQuery, mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [776, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [

		["images/fade_in_banner/telstra-tower.jpg", "/service-provider.html", "_new", "&nbsp; Want to fix your 3G Wireless Broadband Connection?<br>&nbsp; "],
		["images/fade_in_ban . . .

Let's zoom in on the highlighted description:

"&nbsp; Want to fix your 3G Wireless Broadband Connection?<br>&nbsp; "

That can become:

"<a href='/service-provider.html' target='_new'>&nbsp; Want to fix your 3G Wireless Broadband Connection?<br>&nbsp; </a>"

Notice that the attributes (href and target in this case) are single quoted, not double quoted. This is required due to the requirements of nested quotes in javascript either being escaped or of a different type than the quotes that delimit the string.

These links can be styled via css. This will be their selector:

.descpanelfg a

So you could style them in a stylesheet like:

.descpanelfg a {
	text-decoration: none;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[remoteone]

Hi john,
Thank you for the fine reply.
I did not try that approach as I was hoping to not have to define the link url twice. This would cause confusion when making changes etc.
If this is the only way to do it then thats what Ill do, but since there has been a need to mod some of the js code already, it would be nice to make a mod that only requires the url to be defined once.
Thanks again.
Cheers

[jscheuer1]

People get mod happy with scripts sometimes. I know sometimes it's the only way, or can seem like the only way though. What mods have you already made? Often css style can be used, for instance in changing the background, colors, fonts, positioning, etc. There are also callbacks for the onslide and oninit functions that can alter things without actually editing the script. It's a good idea when possible not to edit the script. That makes future support easier.

At the same time, I do see what you're saying about having to edit twice. So instead of what I suggested above, try adding this to the on page call:

 . . . er/SIM-on-tower.jpg", "/3g-4g-antenna-arial.html", "_new", "  Find an Antenna Kit to suit your modem.  "],
		["images/fade_in_banner/money_back_guarantee180x180.gif", "/3g-4g-antenna-arial.html", "_new", "  100% Satisfaction Guaranteed!"],
		["images/fade_in_banner/telstra-tower.jpg", "/contact-us.html", "_new", "  Contact us for more information."],
		["images/fade_in_banner/telstra-tower.jpg", "", "_new", ""]         //<--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: 500, //transition duration (milliseconds)
	descreveal: "always",
	onslide: function(curimage, index){
		var link = jQuery(curimage).find('img').eq(index).parent('a'), html, color, $desc;
		if(link.size()){
			$desc = this.setting.$descinner;
			html = $desc.html();
			color = $desc.css('color');
			link = link.clone(false).html(html).css({textDecoration: 'none', display: 'block', height: '100%', color: color});
			$desc.empty().append(link.find('img.close').remove().end());
		}
	},
	togglerid: "fadeshow2toggler"
})

</script>

That will (if and only if there's a link on the image) create that same link on the captions/descriptions each time the image changes.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Oh, and if you add this rule to the stylesheet:

#fadeshow2 {
	width: 776px;
	height: 180px;
}

The page won't jump around as much in some browsers while it's loading.

[remoteone]

Great advice, I certainly would prefer to do things using Css. I cant recall all the mods i did to the js script, I think they related to changing the background from black to white and attempting to make the background transparent. And that different instances use different font colors and size and position etc.
Ill get to add the code in the next week or so.
Thanks again for your help.

[jscheuer1]

Yes css is very powerful. With this script though you often need to use overriding css with the !important keyword. For instance, for a white background:

#fadeshow2, #fadeshow2 .gallerylayer {
	background-color: white !important;
}

Transparent can be done the same way, except if the images themselves contain transparent sections and these don't line up or if the images are of varying sizes, there will be bleed through. That can be dealt with using javascript and code in the onslide function without editing the script. If it's just a transparent background for the descriptions though:

#fadeshow2 .descpanelbg {
	background-color: transparent !important;
}

The descriptions may also be positioned in a similar way:

#fadeshow2 .fadeslidedescdiv {
	top: 45% !important;
}

There's a lot that can be done, and not all of it requires the !important keyword. But for this sort of thing as regards this script it usually doesn't hurt to use it, even when not required.