Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Slideshow with image maps (image maps change with slides)

  1. #1
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post Slideshow with image maps (image maps change with slides)

    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!

    Thanks,

    - Michael

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

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

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    Use an oninit as highlighted below:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Image Map information ...

    How could I not use something called "Ultimate?"

    I'm used to normal maps on a placed image like this:
    Code:
      <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?:
    Code:
    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    usemap="#Map"
    it will be:

    Code:
    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:

    Code:
        <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:

    Code:
        <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    sonofray (02-10-2012)

  7. #6
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up Ultimate Slideshow Image Map Sticky Tooltip AWESOMENESS!

    YES! 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

  8. #7
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #8
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Navigate from slide to slide in slide show

    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!

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

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

    http://www.dynamicdrive.com/forums/e...e-in-slideshow
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •