Results 1 to 7 of 7

Thread: Ultimate Fade In Slideshow v2.0 with 2x hotspots/image maps

  1. #1
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade In Slideshow v2.0 with 2x hotspots/image maps

    Hi,
    I've used The Ultimate Fade in Slideshow a few times and love it!!

    I'm currently trying to do something with it but not sure how and would really appreciate some help.

    The idea is to have a selection of 6 images fading through the slideshow but the images have areas on the left hand side saying 'click here for details on blah blah' and on the right hand side is saying 'click here for details on blah blah blah' (message is on the same place on all 6 of the fading images) sending you to 2 different urls.

    The images are 920px x 339px and I'd like 2 hotspots/image maps dividing the images (left and right).

    I know it's pretty simple to direct you to another url when you 'click' on the slideshow but I need 2 areas on the same slideshow to take you to 2 diferent urls.

    Hope this is clear...

    Can anyone help???

  2. #2
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Red face An idea...

    Hi,

    I can imagine, that I'll place two transparent absolutely positioned divs over the slider with the images, where the first leads on click to the first url, and the second to the second url.

    Cheers

  3. #3
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Xman, I tried that but doesn't seem to work when it's over the top of the JS slideshow ;o( Any ideas why not?

    Thanks

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    You need to give the divs a high z-index. Try z-index:1100

    here is an example of a way it could be done
    Last edited by azoomer; 11-02-2011 at 12:01 PM.

  5. #5
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks azoomer, I had a look at your example and can see what you've done.
    I tried to apply the same to mine but as soon as I try to change the coordinated of the boxes, it moves the grey boxes to sit over the slideshow but pushes the text links below...

    I've uploaded my text page and supplied a link below if you could possibly spare a few minutes to take a look, I'd be very grateful.

    www.clockwork-design.com/CLIENTS/Chatfield

    I also have Cufon working on the same page, I hope that's not interfering.

    Thanks

    J

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="fadeslideshow.js">
    /***********************************************
    * 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>
    <script type="text/javascript">
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //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:'auto', pause:2500, 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 set = this.setting, halfwidth = set.dimensions[0]/2, $urllinks;
    			set.$wrapperdiv.append('<a style="top: 0; left: 0;"></a><a style="top: 0; left: ' + halfwidth + 'px;"></a>');
    			set.$urllinks = set.$wrapperdiv.find('a').last().prev().add(set.$wrapperdiv.find('a').last())
    			.css({display: 'block', height: set.dimensions[1], width: halfwidth, position: 'absolute', zIndex: 1001})
    			/*@cc_on @*//*@if(@_jscript_version >= 5).css({backgroundImage: 'url(placeboforhover.gif)'})@end @*/
    			.eq(0).attr({href: 'http://www.google.com/', title: 'Click for info on Google'}).end()
    			.eq(1).attr({href: 'http://www.dynamicdrive.com/', title: 'Click for info on Dynamic Drive'}).end();
    		},
    	onslide: function(activelayer, curindex){
    		//may be used to dynamically update links
    		//they'll be known as: this.setting.$urllinks.eq(0) and this.setting.$urllinks.eq(1)
    	}
    })
    </script>
    Notes:

    This is in place of, not in addition to previous methods. It places the links inside the wrapper and makes them elements of the script that could be updated from existing or additional entries in each imagearray item. Any questions, feel free to ask.
    Last edited by jscheuer1; 11-02-2011 at 02:39 PM. Reason: add notes
    - John
    ________________________

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

  7. #7
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's it John!! it works perfect now! Thank you so much

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
  •