Slideshow with image maps (image maps change with slides)

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

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

Quote:

---

Originally Posted by jscheuer1

Code:

---

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:

Code:

---

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

---

or:

Code:

---

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

---

Thank you John!!

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!

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.

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!

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!

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'):

HTML Code:

---

<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.

perfect. worked with me thks

Quote:

---

Originally Posted by jscheuer1

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:

Code:

---

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

---

or:

Code:

---

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

---

---