1.

Solve : Continuous image marquee?

Answer»



Group: Members
Posts: 1
Joined: Today, 08:34 PM
Member No.: 11,016

Warn: (0%) -----

   
Hello All,

I am adding a continuous image scroller to my website and am having issues with Windows Explorer...the code is below, can anyone help?
Basically the last image scrolling to the left disappears before it reaches the END, #7 does not show up, and 1 and 6 overlap after the first go around.

Script:


<!--<br>// Jeff
// www.huntingground.freeserve.co.uk

// ********** User Defining Area **********





DATA=[
["images/medical_modalities_trans.png","Alt / Title text for image 1","pic01.jpg"],
["images/cbct_trans.png","Alt / Title text for image 2","pic02.jpg"],
["images/pharma_trans.png","Alt / Title text for image 3","pic03.jpg"],
["images/surgical_care_trans.png","Alt / Title text for image 4","pic04.jpg"],
["images/pacs_trans.png","Alt / Title text for image 5","pic05.jpg"],
["images/veterinary_trans.png","Alt / Title text for image 6","pic06.jpg"],
["images/medical_modalities_trans.png","Alt / Title text for image 1","pic01.jpg"],
["images/cbct_trans.png","Alt / Title text for image 2","pic02.jpg"],
["images/pharma_trans.png","Alt / Title text for image 3","pic03.jpg"],
["images/dental_implants_trans.png","Alt / Title text for image 7","pic07.jpg"] // no comma at end of last index
]

imgPlaces=5 // number of images visible
imgWidth=156 // width of the images
imgHeight=150 // height of the images
imgSpacer=4 // space between the images

dir=0 // 0 = left, 1 = right

newWindow=1 // 0 = Open a new window for links 0 = no 1 = yes

// ********** End User Defining Area **********

moz=document.getElementById&&!document.all

step=1
timer=""
speed=25
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;inewImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("SRC","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}

containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")

containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"

displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
displayArea.onmouseover=function(){stopHIS3()}
displayArea.onmouseout=function(){scrollHIS3()}

imgPos= -pic0.width

for(var i=0;icurrentImage=document.getElementById("pic_"+i)

if(dir==0){imgPos+=pic0.width+imgSpacer} // if left

initPos=imgPos
if(dir==0){currentImage.style.left=initPos+"px"} // if left

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos+"px"
imgPos+=pic0.width+imgSpacer
}

if(nextPic==data.length){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}

scrollHIS3()
}

timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

nowDivPos=parseInt(currentImage.style.left)

if(dir==0){nowDivPos-=step}
if(dir==1){nowDivPos+=step}

if(dir==0&&nowDivPos<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos>containerWidth){

if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}

if(nextPic>data.length-1){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}

nextPic++

}
else{
currentImage.style.left=nowDivPos+"px"
}

}
timer=setTimeout("scrollHIS3()",speed)

}

function stopHIS3(){
clearTimeout(timer)
}

function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
newin.focus()
}
}

// add onload="initHIS3()" to the opening BODY tag

// -->



Body:

<BODY onload="initHIS3()">


<center>
<div style="padding: 2px 0PX 0px 0px;">
<DIV id="his3container" style="position:relative; width:0px;height:0px; border:0px ;overflow:hidden">

<div style="background-image:url(images/gradient);
background-repeat:repeat;
width:858px;
height:150px;"

>

<div id="display_area" style="position:absolute; left:0; top:0; width:0px; height:0px; clip:rect(0,0,0,0)"></div>
</div>
</DIV>
</div>




THANKS in advance!


Discussion

No Comment Found

Related InterviewSolutions