Results 1 to 3 of 3

Thread: Fade-in Slideshow Hyperlinking?

  1. #1
    Join Date
    Dec 2004
    Location
    Singapore
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade-in Slideshow Hyperlinking?

    Script: Fade-In Slideshow
    http://dynamicdrive.com/dynamicindex...nslideshow.htm

    Is it possible to modify this script in any way so that the images that appear have hyperlinks? For example, each image that appears would have a different hyperlink?

  2. #2
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    I was able to figure out how to add the same hyperlink to all images. Happened to work ok in our case since we were sending everyone to a single products page.

    It would be nice if it were possible to do this on a per image basis though.

    There are two locations we had to modify. One for NS browsers the other for IE browsers.
    For NS
    document.write('<a href="page.html"><img name="defaultslide" src="'+fadeimages[0]+'"></a>')

    For IE
    tempobj.innerHTML='<a href="products.html"><img src="'+fadeimages[nextimageindex]+'" border="0"></a>'

    One thing we are having difficulty with is why images are not showing for NS at all. Posted a message to that affect on this script already. You can see this at http://www.autosafetymagnets.com

    Hope this helps.

    p.s. if you have NS at our site can you see the images in the right center area?

  3. #3
    Join Date
    Dec 2004
    Location
    Singapore
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeps, the images don't show up in Mozilla Firefox either, they work fine in IE6 though. Other than that, thanks for the link code, it's start, I'll see what I can do with it

    EDIT: Got it to work!!
    I modified the script using your suggestions and added bits from the Drop in slideshow 2 which has this hyperlinking feature

    Modified Code:

    Code:
    /***********************************************
    * Fade-in image slideshow script-  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 full source code
    ***********************************************/
    
    var slideshow_width='140px' //SET IMAGE WIDTH
    var slideshow_height='225px' //SET IMAGE HEIGHT
    var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
    
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]="1.png"
    fadeimages[1]="2.jpg"
    fadeimages[2]="3.png"
    
    var fadelinks=new Array()
    //SET IMAGE URLs. Extend or contract array as needed
    fadelinks[0]="http://www.dynamicdrive.com"
    fadelinks[1]="http://www.freewarejava.com"
    fadelinks[2]="http://www.javascriptkit.com"
    
    ////NO need to edit beyond here/////////////
    
    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p]
    }
    
    var ie4=document.all
    var dom=document.getElementById
    
    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
    else
    document.write('<a href="'+fadelinks[curimageindex]+'"><img name="defaultslide" src="'+fadeimages[0]+'"></a>')
    
    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1
    
    
    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML='<a href="'+fadelinks[curimageindex]+'"><img src="'+fadeimages[nextimageindex]+'" border="0"></a>'
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }
    
    function rotateimage(){
    
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }
    
    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }
    
    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
    rotateimage()
    }
    
    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)
    Last edited by torpedo009; 12-23-2004 at 09:56 AM. Reason: Got it to work!

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
  •