Results 1 to 4 of 4

Thread: Ultimate Fade-In SlideShow v2.0 and image maps

  1. #1
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In SlideShow v2.0 and image maps

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

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

    HTML Code:
    <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>
    Last edited by jscheuer1; 02-10-2012 at 05:35 PM. Reason: important change to second code block
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

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

    Code:
    <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:
    Code:
    <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.
    Last edited by jscheuer1; 03-27-2010 at 03:46 AM. Reason: format code

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

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
  •