Results 1 to 3 of 3

Thread: fade in image script ??

  1. #1
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fade in image script ??

    used frontpage 2003 to upload site to host,
    script works fine on local machine
    after upload only images 2 of the images are displayed
    script below is from host site



    /***********************************************
    * 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='250px' //SET IMAGE WIDTH
    var slideshow_height='300px' //SET IMAGE HEIGHT
    var pause=2000//SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
    fadeimages[0]=["poolslider.jpg"]
    fadeimages[1]=["spaslide.jpg"]
    fadeimages[2]=["kitchenslide.jpg"]
    fadeimages[3]=["loungeslide.jpg"]
    fadeimages[4]=["masterbedslide.jpg"]
    fadeimages[5]=["twinbedslide.jpg"]
    fadeimages[6]=["garagegamesslide.jpg"]
    ////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][0]
    }

    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;visibility: hidden"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

    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=insertimage(nextimageindex)
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj2.style.visibility="hidden"
    setTimeout("rotateimage()",pause)
    }
    }

    function insertimage(i){
    var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
    tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
    tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
    return tempcontainer
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex][0]
    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=insertimage(curimageindex)
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

  2. #2
    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

    For one thing, this:

    Code:
    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
    fadeimages[0]=["poolslider.jpg"]
    fadeimages[1]=["spaslide.jpg"] 
    fadeimages[2]=["kitchenslide.jpg"]
    fadeimages[3]=["loungeslide.jpg"]
    fadeimages[4]=["masterbedslide.jpg"]
    fadeimages[5]=["twinbedslide.jpg"]
    fadeimages[6]=["garagegamesslide.jpg"]
    should be:

    Code:
    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
    fadeimages[0]=["poolslider.jpg", "", ""]
    fadeimages[1]=["spaslide.jpg", "", ""] 
    fadeimages[2]=["kitchenslide.jpg", "", ""]
    fadeimages[3]=["loungeslide.jpg", "", ""]
    fadeimages[4]=["masterbedslide.jpg", "", ""]
    fadeimages[5]=["twinbedslide.jpg", "", ""]
    fadeimages[6]=["garagegamesslide.jpg", "", ""]
    Other problems could still exist, a link to the page would help if the above doesn't take care of it. Also, make sure the images are on the server and that their spelling and capitalization match exactly what is in the code (image.JPG, image.jpg, Image.jpg, Image.JPG, etc. are all different online, not so locally).
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you very much it was a error with capitilisation on several file names
    help very much appreciated...
    site for your reference
    http://members.tripod.com/highgrove-villa/index.html

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
  •