Slideshow with image maps (image maps change with slides)

[sonofray]

I'm looking for a slideshow solution (JavaScript, JQuery, whatever) that will allow image maps/hotspots that will be unique to each slide. I've got slideshows, I've got image maps with great sticky tooltips, and I want one SCRIPT TO RULE THEM ALL!:D

Thanks,

- Michael

[vwphillips]

http://www.vicsjavascripts.org.uk/MapSlideShow/MapSlideShow.htm

[jscheuer1]

Or you could go with the Ultimate Fade-in Slide Show:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Use an oninit as highlighted below:


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').each(function(){
jQuery(this).find('img').each(function(i){
jQuery(this).attr('usemap', '#' + (i + 1));
});
});
}
})

Don't miss the added comma (red) after the togglerid value.

Then each of the images in the slide show will use respectively maps named:

#1
#2
#3

and so on for however many images are in the slideshow.

[sonofray]

How could I not use something called "Ultimate?" :)

I'm used to normal maps on a placed image like this:

<div id="slides"><img src="images/slides1_03.jpg" alt="" width="960" height="420" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="7,393,60,415" href="index.html" target="_self" alt="Slide 1" /><area shape="rect" coords="66,394,121,416" href="slide2.html" target="_self" alt="Slide 2" /><area shape="rect" coords="128,393,180,418" href="slide3.html" target="_self" alt="Slide 3" /><area shape="rect" coords="188,393,240,417" href="slide4.html" target="_self" alt="Slide 4" /><area shape="rect" coords="247,393,300,418" href="slide5.html" target="_self" alt="Slide 5" />
<area shape="rect" coords="906,122,958,253" href="slide2.html" alt="next page" />
</map>

So where would they go in your code below?:

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: [
["images/dog.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/fruits.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["images/pool.jpg"],
["images/cave.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').each(function(){
jQuery(this).find('img').each(function(i){
jQuery(this).attr('usemap', '#' + (i + 1));
});
});
}
})

</script>

Thanks so much.

- Michael

[jscheuer1]

The slideshow will generate this part (you won't see it, but it will be part of the page):


<img src="images/slides1_03.jpg" alt="" width="960" height="420" border="0" usemap="#Map" />

Only instead of:


usemap="#Map"

it will be:


usemap="#1"

and #2 for the next and #3 for the next and so on for all of the slideshow images in order.

So, elsewhere on your page you can put:


<map name="1" id="1"><area shape="rect" coords="7,393,60,415" href="index.html" target="_self" alt="Slide 1" /><area shape="rect" coords="66,394,121,416" href="slide2.html" target="_self" alt="Slide 2" /><area shape="rect" coords="128,393,180,418" href="slide3.html" target="_self" alt="Slide 3" /><area shape="rect" coords="188,393,240,417" href="slide4.html" target="_self" alt="Slide 4" /><area shape="rect" coords="247,393,300,418" href="slide5.html" target="_self" alt="Slide 5" />
<area shape="rect" coords="906,122,958,253" href="slide2.html" alt="next page" />
</map>

and then another with:


<map name="2" id="2"><area shape="rect" co . . .

and so on, each time increasing the number until you have one for each of the images in the slideshow.

[sonofray]

:DYES! I've got the Ultimate Slideshow WITH Image Maps WITH Sticky Tooltips. You've helped me and taught me, and I am eternally grateful jscheuer1. Many forums are not as friendly.

Blessings,

- Michael

[WebSurfer]

Thank you so much jscheuer1,
this was exactly what I was looking for. I didn't dare to implement imagemaps into the slideshow, but when I read your post, I gave it a try. And it works perfect. :)

[scottmc]

Taking this one step further, how would I now use those image map links to go from slide to slide. So, for example, on the images I am rotating, I have 4 circles, each indicating the position in the slide show, so, it shows 4 bubbles and if you are on the 3rd slide, only the 3rd circle is solid. I have an image map on these circles, and I assume now I just need a function to add in the script above that will navigate the slide show to the corresponding slide? I've been messing with functions within this but haven't been successful yet - please help! :)

[jscheuer1]

That doesn't sound like an image map to me. That sounds like navigation buttons. See:

http://www.dynamicdrive.com/forums/entry.php?248-Extra-Buttons-for-Ultimate-Fade-in-slideshow

[newDev]

Hi - thanks to this thread and John I have image maps working inside the ultimate slide show. I have one issue -- when the user hovers over an image in the slideshow the slideshow pauses (which is perfect) however if the user is on an image and then hovers over the image mapped area - the slideshow starts again.

Any idea on how to resolve that would be greatly appreciated. Thanks.

[dreamteam]

Hi,

Thank you John for your post, it has helped me setup a slideshow easily.

Can you please tell me how I can link to internal slides of the same slideshow using image maps/hotlinks --ex: jump to slide #7, #1, etc.

Thanks again!

James

[jscheuer1]

If you set your slideshow up as shown in my post in this thread:





var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery . . .


Then you can use mygallery2.showslide(3) or mygallery2.navigate(2) to jump to the slide represented by that number (0 based index). Using the showslide() method will not cause an automatically rotating slideshow to stop, navigate() will. You may use these as onclick events for link or area tags, ex:


<area shape="rect" coords="7,393,60,415" href="javascript:void(4);" onclick="mygallery2.showslide(3); return false;" alt="Slide 4" />

or:


<a href="javascript:void(3);" onclick="mygallery2.navigate(2); return false;">Go To Slide 3</a>

[dreamteam]

Thank you John!!

[dreamteam]

Hi John,

I please have another question, I have a jQuery based drop down menu that's now going behind the slideshow (it should appear on top of it) --how can I make the slideshow appear behind the drop down menu

Thank you!

[jscheuer1]

Raise the z-index (in CSS) for the menu to 2000.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[dreamteam]

Thank you John!!

Everything works great now, you have made me very happy --I had been looking for a slideshow with hotlinks for navigation because the design was complicated, but with your help everything was piece of cake.

Thanks again!

[dreamteam]

Hi John,

For some reason, the first slide is not always loading instantly when the page is loaded --the first or second slide shows up after a minute or two, or sometimes it just loads properly without any delays

Please help.

Thank you!

[jscheuer1]

All images take time to load. Sometimes they're cached or the connection is really good, so it takes little or no apparent time. Other times they're not cached and the connection isn't so fast at the moment, then they take a while to load. Not much you can do about that. You can take steps that will help in most cases:

1) Optimize images for smallest possible byte size (less bytes take less time to load);

2) If there's another page that folks will be going to first, and likely to stay there long enough for the first image to be preloaded, you can preload it there. An easy way to preload an image on another page is to make it position: absolute; visibility: hidden; and negative left and top its pixel width or more and height or more respectively, ex (say the image is called 'myfirstimage.jpg'):


<img src="myfirstimage.jpg" style="position: absolute; visibility: hidden; left: -30000px; top: -30000px;">

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[vutaikt]

perfect. worked with me thks
If you set your slideshow up as shown in my post in this thread:



Then you can use mygallery2.showslide(3) or mygallery2.navigate(2) to jump to the slide represented by that number (0 based index). Using the showslide() method will not cause an automatically rotating slideshow to stop, navigate() will. You may use these as onclick events for link or area tags, ex:


<area shape="rect" coords="7,393,60,415" href="javascript:void(4);" onclick="mygallery2.showslide(3); return false;" alt="Slide 4" />

or:


<a href="javascript:void(3);" onclick="mygallery2.navigate(2); return false;">Go To Slide 3</a>