Ultimate Fade-In SlideShow v2.0 and image maps

[ack]

1) Script Title: Ultimate Fade-In SlideShow v2.0

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

3) Describe problem:
I've been looking for a way to use image maps with the fade-in slideshow so that I can fade one image into another, with buttons at the bottom of each image (in the same place on each image), that people can click on. I found a way on these forums that was for v1.5, and got it working, but v2.0 seems to have smoother fading and I'm not sure if v1.5 is the best for the newer browsers. Does anyone have a way of doing this for v2.0?

Thanks in advance for any help!

[jscheuer1]

I have a similar slide show that can do almost everything that the Ultimate Fade script can do, plus a few other things. The big difference is that the images and descriptions are ordinary markup. So you should be able to just give each image a usemap attribute.

But with Ultimate Fade, if you are using the same coords for each image, you only need one map and could try just adding an oninit function to the on page call, example (highlighted):

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer img').attr('usemap', '#1');
	}
})

Be sure not to miss the added comma (red) after the togglerid declaration. The above should work to make each image use a map named 1.

If you want a different map for each image you could do:

	oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
	}

This would assign usmap #1 through however many images that there are to each image. But at that rate it would perhaps be less confusing (at least for the map part) to use my code, example (remember, it has many options):

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_3.htm

Use your browser's view source and you will see the images and descriptions are ordinary markup:

<div class="vacation_2">
<img src="images/10_lrg.jpg" alt="original image" title="">
<span>Look at the rock moguls!</span>
<img src="images/09_lrg.jpg" alt="original image" title="">
<span>The yacht "Figaro"</span>
<img src="images/08_lrg.jpg" alt="original image" title="">
<span>Margaret Todd - view off the starboard bow</span>
<img src="images/07_lrg.jpg" alt="original image" title="">
<span>Margaret Todd - main rigging</span>
<img src="images/06_lrg.jpg" alt="original image" title="">
<span>The pigpen - Freedom Farm, Freedom, ME</span>
<img src="images/05_lrg.jpg" alt="original image" title="">
<span>Freedom Pond</span>
<img src="images/04_lrg.jpg" alt="original image" title="">
<span>Tree House - Freedom Farm</span>
<img src="images/03_lrg.jpg" alt="original image" title="">
<span>"Corn Dog" - Waldo, a chocolate Lab</span>
<img src="images/02_lrg.jpg" alt="original image" title="">
<span>The work boat "Heidi &amp; Heather"</span>
<a href="http://www.google.com/"><img src="images/01_lrg.jpg" alt="original image" title=""></a>
<span>"Caribbean Princess", Frenchman's Bay, ME<br>This one's taller.</span>
</div>

[ack]

Thanks for your suggestions jscheuer1.

I'm not sure what I'm doing wrong, but I tried adding the oninit function, and kept the script in the "head" of the html:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [800, 363], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["pic1.jpg"],["pic2.jpg"],["pic3.jpg"],["pic4.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer img').attr('usemap', '#1');
	}
})

</script>

and then renamed my html image map '1', and kept it in the "body" of the html:

<map name="1">
<area shape="rect" coords="132,333,0,362" href="index.html">
<area shape="rect" coords="266,333,134,362" href="page2.html">
<area shape="rect" coords="399,333,268,362" href="page3.html">
<area shape="rect" coords="530,333,401,362" href="page4.html">
<area shape="rect" coords="665,333,533,362" href="page5.html">
<area shape="rect" coords="799,333,667,362" href="page6.html">
</map>

I know the map works on its own because I tested it with this:

<img src="pic1.jpg" usemap="#1" border="0">

But adding that extra line (the oninit function) in the Ultimate Fade-In SlideShow didn't seem to make it use the map. Did I miss something?

I don't mind using another code, but I don't really need a lot of options, and I've already gone through the ultimate fade-in script to disable all the random options it came with, and I don't know much about javascript. I just need a relatively simple thing that fades smoothly from one image to the next automatically, where I can set how long it stays on each image and how long it takes to fade, and where it doesn't pause for any reason (ie mouseovers) or show buttons or captions or anything.

[jscheuer1]

Works here. I see nothing wrong with your code. I may have missed something though.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.