Results 1 to 5 of 5

Thread: Ultimate Fade In Slideshow v2.0 -

  1. #1
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade In Slideshow v2.0 -

    I'm using "Ulitmate Fade In Slideshow v2.0" on a "Volusion" platform e-comm site. The slide show works great however, I'd like to define multiple link areas on some of the slide images.

    Currently, each slide has basically the following settings:

    ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],

    How and where do I add the "map" info to the image (in this case "slide_brands03.jpg") so that when someone click on that map, it links to another page?

    Thanks in advance,

    Robert

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

    Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.


    I happen to know this script quite well, so in this case I will tell you what I know about using it with an image map. Basically all you have to do is give the image a usemap attribute, and then, somewhere else on the page, make an image map with that name. You might also need to make the mouseenter event of the map(s) be the same as the mouseenter event of the slideshow (for the pause onmouseover and mouseover captions, if any).

    Fortunately the slideshow has an oninit event that you can setup for the on page call, where all of that, except adding the map itself to the page can be done.

    How many maps did you have in mind? One person I did this with had only one map that they wanted used for all of the images. But a separate map can be made for each, and I believe I've set that up for at least one person as well. Yes, there's a thread on it:

    http://www.dynamicdrive.com/forums/s...e-with-slides)

    That's for using a different map for each image. If you want a single map for all, or want something else, or have any questions, let me know about it in this thread.
    - John
    ________________________

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

  3. #3
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply. I'm new to this forum so I apologize for posting in the wrong area.

    I'm working on the following site: "http://www.runnersmark.com"

    The existing slide show code, which works fine is:

    <div id="homepage">
    <div id="homeLeft">
    <div id="slideshow">
    <!----------------------
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ---------------------->

    <script type="text/javascript">

    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
    ["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
    ["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
    ["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
    })


    </script>

    The slide show has four images, each linking to a different page. That all works correctly however, I'd like to add the following map to only the first image. It's the one with 11 logos.

    <map name="1">
    <area shape="rect" coords="23,74,172,132" href="http://www.runnersmark.com/SearchResults.asp?mfg=Zoot" alt="Zoot">
    <area shape="poly" coords="256,59,233,74,232,98,246,111,205,112,208,135,340,136,355,113,316,108,327,96,328,74,304,59" href="http://www.runnersmark.com/SearchResults.asp?mfg=Vibram+FiveFingers" alt="Vibram FiveFingers">
    <area shape="poly" coords="546,75,439,104,425,93,426,73,407,96,407,119,424,128,448,120" href="http://www.runnersmark.com/SearchResults.asp?mfg=Nike" alt="Nike">
    <area shape="poly" coords="701,86,593,86,582,119,680,122,699,104,719,107,724,87,733,55,726,53,702,67" href="http://www.runnersmark.com/SearchResults.asp?mfg=Inov%2D8" alt="Inov-8">
    <area shape="poly" coords="292,161,146,161,142,176,197,180,223,191,173,203,194,222,259,198,236,181,288,179" href="http://www.runnersmark.com/SearchResults.asp?mfg=Brooks" alt="Brooks">
    <area shape="poly" coords="382,185,487,186,494,155,397,157,387,142,364,149,346,182,349,193,366,192" href="http://www.runnersmark.com/SearchResults.asp?mfg=Asics" alt="Asics">
    <area shape="poly" coords="654,151,646,142,529,143,528,159,588,161,637,182,666,164,683,162,666,153" href="http://www.runnersmark.com/SearchResults.asp?mfg=Saucony" alt="Saucony">
    <area shape="poly" coords="98,178,30,230,34,241,18,247,15,259,22,268,144,269,152,263,153,249,141,245,131,238" href="http://www.runnersmark.com/SearchResults.asp?mfg=Adidas" alt="Adidas">
    <area shape="rect" coords="210,233,354,266" href="http://www.runnersmark.com/SearchResults.asp?mfg=Skora" alt="Skora">
    <area shape="poly" coords="550,214,495,222,408,254,438,265,540,264,549,244,540,230" href="http://www.runnersmark.com/SearchResults.asp?mfg=Altra" alt="Altra">
    <area shape="poly" coords="721,192,652,192,619,248,596,250,598,264,742,263,741,250,693,249" href="http://www.runnersmark.com/SearchResults.asp?mfg=New+Balance" alt="New Balance">
    </map>

    I looked at the code you mentioned in your initial reply and I wasn't sure how to implement it. I'm not a programmer - only a designer so please be patient.

    Thanks for any help,

    Rob

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Replace:

    Code:
    var mygallery=new fadeSlideShow({
     wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
     dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
     imagearray: [
     ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
     ],
     displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
     persist: false, //remember last viewed slide and recall within same session?
     fadeduration: 500, //transition duration (milliseconds)
     descreveal: "ondemand",
     togglerid: ""
     })
    with:

    Code:
    var mygallery=new fadeSlideShow({
     wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
     dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
     imagearray: [
     ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
     ["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
     ],
     displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
     persist: false, //remember last viewed slide and recall within same session?
     fadeduration: 500, //transition duration (milliseconds)
     descreveal: "ondemand",
     togglerid: "",
    	oninit: function(){
    		var w = this.setting.$wrapperdiv, $ = jQuery;
    		w.find('.gallerylayer').each(function(){
    			$(this).find('img').eq(0).attr('usemap', '#1');
    		});
    		$('map[name="1"]').bind('mouseenter', function(){w.mouseenter();});
    	}
    })
    - John
    ________________________

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

  5. #5
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thank you! That worked perfectly!

    Robert

Similar Threads

  1. Remove initial fade in from Ultimate Fade-in slideshow
    By optimus203 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-14-2012, 06:37 PM
  2. Ultimate Fade-in slideshow (v2.4) - fade description text
    By kwakker35 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-06-2012, 03:13 PM
  3. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 12:18 PM
  4. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  5. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM

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
  •