www.webdeveloper.com
Results 1 to 1 of 1

Thread: please help me with a drop-in image slideshow

  1. #1
    Join Date
    Nov 2003
    Location
    Chicago
    Posts
    2

    please help me with a drop-in image slideshow

    (i posted this on the dhtml thread, but posting over here, too in case anyone can help)

    Pardon me if this particular issue has been addressed before, but I am having a problem with some code.

    I am using the "Drop-in Image Slideshow" code from dynamicdrive.com
    (See original code here: http://www.dynamicdrive.com/dynamici...opitslide2.htm )

    I copy & pasted it into my page (in a table cell) and it looks great. I click on one of the images & it takes me to the page that I linked it to. All great... up until that point.

    It is when i hit the back button on my browser to return to the homepage when all heck lets loose. The slideshow starts to wig out on me and eventually crashes my browser (and even my system one time).

    I am on a Mac OS 9.2 testing in IE 5.
    I also tested this in OSX and it did the same thing.

    THEN I tested on a PC, and the slideshow did not appear at all. It was just white space where my image should have been.

    Now I am new to DHTML in general, so I don't know how to go about fixing this. Is there extra code that I should be adding to my document to make it work? Or is this code just buggy? Or does anybody else have any tried & true code for this type of activity that I could use?

    What should I do? My client really wants this drop-in slideshow image rotator.

    TIA,
    Estella

    Here is what my code looks like. I just changed the variables that it told me to (height & width, images & links). I placed it in my default.asp (my homepage) inside of a table cell.

    PHP Code:

    <script language="JavaScript1.2">

    //Drop-in slideshow II (hyperlinked)- By Dynamic Drive
    //For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
    //This credit MUST stay intact for use

    var slideshow_width='460px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
    var slideshow_height='260px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
    var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)

    var dropimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed

    dropimages[0]="images/rotate0.jpg"
    dropimages[1]="images/rotate1.jpg"
    dropimages[2]="images/rotate2.jpg"
    dropimages[3]="images/rotate3.jpg"
    dropimages[4]="images/rotate4.jpg"

    var droplinks=new Array()
    //SET IMAGE URLs. Extend or contract array as needed
    droplinks[0]="/self_adhesive_calendars.asp"
    droplinks[1]="/desk_calendars.asp"
    droplinks[2]="/wall_calendars.asp"
    droplinks[3]="/greeting_cards.asp"
    droplinks[4]="/photo_cards_frames.asp"

    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (
    p=0;p<dropimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=dropimages[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:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')
    else
    document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

    var 
    curpos=parseInt(slideshow_height)*(-1)
    var 
    degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1


    function movepic(){
    if (
    curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.top=curpos+"px"
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+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("movepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" "canvas0"
    }
    else
    document.images.defaultslide.src=dropimages[curimageindex]
    linkindex=curimageindex
    curimageindex
    =(curimageindex<dropimages.length-1)? curimageindex+0
    }

    function 
    rotatelink(){
    window.location=droplinks[linkindex]
    }

    function 
    resetit(what){
    curpos=parseInt(slideshow_height)*(-1)
    var 
    crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.top=curpos+"px"
    }

    function 
    startit(){
    var 
    crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
    rotateimage()
    }

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

    </script> 
    Last edited by Green*Tea; 11-20-2003 at 03:43 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles