Now whats wrong with this code? lol!

  • 1
  • Question
  • Updated 9 years ago
  • Answered
<!--<HTML>
<HEAD>
<TITLE>Slide Show</TITLE>

<script type="text/javascript">
<!--
// ********** User Defining Area **********

data=[
["resources/trans.jpg","Alt / Title text for image 1","pic01.jpg"],
["resources/trans.jpg","Alt / Title text for image 2","pic02.jpg"],
["resources/trans.jpg","Alt / Title text for image 3","pic03.jpg"],
["resources/trans.jpg","Alt / Title text for image 4","pic04.jpg"],
["resources/trans.jpg","Alt / Title text for image 5","pic05.jpg"],
["resources/trans.jpg","Alt / Title text for image 6","pic06.jpg"],
["resources/trans.jpg","Alt / Title text for image 7","pic07.jpg"],
["resources/trans.jpg","Alt / Title text for image 8","pic08.jpg"],
["resources/trans.jpg","Alt / Title text for image 9","pic09.jpg"],
["resources/trans.jpg","Alt / Title text for image 10","pic10.jpg"],
["resources/trans.jpg","Alt / Title text for image 11","pic11.jpg"],
["resources/trans.jpg","Alt / Title text for image 12","pic12.jpg"] // no comma at end of last index
]

imgPlaces=5 // number of images visible
imgWidth=100 // width of the images
imgHeight=100 // height of the images
imgSpacer=6 // 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=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=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;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

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

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

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"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[i]=parseInt(currentImage.style.left)

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

if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>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[i]+"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

// -->

Slide Show









--->

By the way its for image scrolling, like the one use in Dejavu apparel site... but dosn't work for me!

Help the panda please! lol! 3rd Ace Design
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Sagar,

I don't see it closed, Try put <!-- </script> --> at the end of it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
good catch Connor!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey sagar

As the Deja Vu Apparel is my site... I guess I should be the one to answer ya! =) First of all... where did you get this code? It's not the one I used on my site.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
Hey connor , tried that but didnt work!

Hey littleus i thought u were offline?? ne ways its the same source as yours i have removed credits just to post it here.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Did you grab it from the Yola code site? It may help to make sure that there are no line breaks in your code.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
whats the link for the site littleus?
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
<!---<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 3</TITLE>

<script type="text/javascript">

// Jeff
// www.huntingground.freeserve.co.uk

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

data=[
["resources/trans.jpg","Alt / Title text for image 1","pic01.jpg"],
["resources/trans.jpg","Alt / Title text for image 2","pic02.jpg"],
["resources/trans.jpg","Alt / Title text for image 3","pic03.jpg"],
["resources/trans.jpg","Alt / Title text for image 4","pic04.jpg"],
["resources/trans.jpg","Alt / Title text for image 5","pic05.jpg"],
["resources/trans.jpg","Alt / Title text for image 6","pic06.jpg"],
["resources/trans.jpg","Alt / Title text for image 7","pic07.jpg"],
["resources/trans.jpg","Alt / Title text for image 8","pic08.jpg"],
["resources/trans.jpg","Alt / Title text for image 9","pic09.jpg"],
["resources/trans.jpg","Alt / Title text for image 10","pic10.jpg"],
["resources/trans.jpg","Alt / Title text for image 11","pic11.jpg"],
["resources/trans.jpg","Alt / Title text for image 12","pic12.jpg"] // no comma at end of last index
]

imgPlaces=5 // number of images visible
imgWidth=100 // width of the images
imgHeight=100 // height of the images
imgSpacer=6 // 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=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=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;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

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

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

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"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[i]=parseInt(currentImage.style.left)

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

if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>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[i]+"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

</script>

</HEAD>
<BODY onload="initHIS3()">
<h1><span>Horizontal Image Scroller 3</span></h1>
<center>

<DIV id="his3container" style="position:relative; width:0px;height:0px; border:1px solid red;overflow:hidden">

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

</DIV>

</BODY>
</HTML>

--->

this is what i have so far.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
thats the one u are using? right littleus?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Nope... that's a different one! =)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It's the Horizontal image scroller #6 (I deleted the box underneath) on the Yola Code Site (http://yolacodes.yolasite.com)
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Sagar,

You have to add another html widget with this in it:







--!>

This calls the slider
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Sorry didn't come up, here it is:

<!--
<BODY onload="initHS6()"> <DIV id="scroll_box" onmouseover="pause()" onmouseout="reStartHS6()"> <div id="scroller1" style="position:absolute;left:0px;top:0px"></div> <div id="scroller2" style="position:absolute"></div> <div id="imgtxt" onmouseout="hideTxt(event)"</div> </DIV> </BODY>
-->
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
wo thanks mate! how do i get that?
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
did you try it connor? was it workin that way?
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Here is the total working code(from deja vu apparel):

<!--
<HEAD>
<TITLE>Horizontal Image Scroller 6h</TITLE>

<script type="text/javascript">

//Jeff
// www.huntingground.freeserve.co.uk

hs6Arr=[
//["thumb1.jpg","bigpic1.jpg","Alt Text 1","text box text"],

["resources/images/image-1.jpg","","",""],
["resources/images/image-1.jpg","","",""],
["resources/images/image-1.jpg","","",""],
["resources/photos/24ow1.jpg","","",""],
["resources/photos/24s1.jpg","","",""],
["resources/photos/6pj2.jpg","","",""],
["resources/photos/S2p2.jpg","","",""],
["resources/photos/6o3a.jpg","","",""],
["resources/photos/T1.jpg","","",""],
["resources/photos/24s3.jpg","","",""]
]

dir=0 // 0 = left 1 = right
speed=1

imageSize=100 // % set to zero to use fixedWidth and fixedHeight values

fixedWidth=100 // set a fixed width
fixedHeight=60 // set a fixed height
spacerWidth=20 // space between images
dualFade=0 // 0 = fades in, 1 = fades out then in

biggest=0
scrollBoxBorder=0
totalWidth=0
hs6Timer=null

lastN=0
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0

preload=new Array()
for(var i=0;i<hs6Arr.length;i++){
preload[i]=[]

for(var j=0;j<2;j++){
preload[i][j]=new Image()
preload[i][j].src=hs6Arr[i][j]
}

}

function initHS6(){
scrollBox=document.getElementById("scroll_box")
scroll1=document.getElementById("scroller1")
//alert(preload[0][0].src)
for(var k=0;k<hs6Arr.length;k++){

scroll1.innerHTML+='<img id="pic'+k+'" src="'+preload[k][0].src+'" alt="'+hs6Arr[k][2]+'" title="'+hs6Arr[k][2]+'" onclick="initFade('+k+')" onmouseover="showTxt(this,this.offsetParent.id,'+k+')" onmouseout="hideTxt(event)">'
if(imageSize!=0){ // use percentage size
newWidth=preload[k][0].width/100*imageSize
newHeight=preload[k][0].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}

document.getElementById("pic"+k).style.width=newWidth+"px"
document.getElementById("pic"+k).style.height=newHeight+"px"

if(document.getElementById("pic"+k).offsetHeight>biggest){
biggest=document.getElementById("pic"+k).offsetHeight
}

document.getElementById("pic"+k).style.marginLeft=spacerWidth+"px"
totalWidth+=document.getElementById("pic"+k).offsetWidth+spacerWidth
}

totalWidth+=1

for(var l=0;l<hs6Arr.length;l++){ // vertically center images
document.getElementById("pic"+l).style.marginBottom = (biggest-document.getElementById("pic"+l).offsetHeight)/2+"px"
}

if(scrollBox.currentStyle&&!window.opera&&document.compatMode!="CSS1Compat"){
scrollBoxBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}

scrollBox.style.height=biggest+scrollBoxBorder+"px"
scroll1.style.width=totalWidth+"px"
scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= scroll1.offsetWidth+"px"
scroll2.style.top= 0+"px" //-scroll1.offsetHeight+"px"
scroll2.style.width=totalWidth+"px"

if(dir==1){
speed= -speed
}

scrollHS6()
}

function scrollHS6(){
clearTimeout(hs6Timer)
scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)
scroll1Pos-=speed
scroll2Pos-=speed
scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"
hs6Timer=setTimeout("scrollHS6()",50)

if(dir==0){
if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}

if(scroll2Pos< -scroll1.offsetWidth){
scroll2.style.left=scroll1.offsetWidth+"px"
}
}

if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.width)){
scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"
}

if(scroll2Pos>parseInt(scrollBox.style.width)){
scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"
}
}

}

st=null
function pause(){
clearTimeout(hs6Timer)
clearTimeout(st)
}

function reStartHS6(){
clearTimeout(st)
st=setTimeout("scrollHS6()",100)
}

function initFade(n){
count=n
if(lastN==n||fading==1){return}

if(dualFade==0){fadeValue=0}
else{fadeValue=100}

picNum=n
lastN=n
fadePic()
}

function fadePic(){
displayEl=document.images["bigpic"]
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadePic()",fadeSpeed)

if(displayEl.filters){displayEl.filters.alpha.opacity=fadeValue}
else{displayEl.style.opacity=(fadeValue/100)-0.1}

if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayEl.src=hs6Arr[picNum][1]
}

if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}

function showTxt(obj,objParentID,num){
if(hs6Arr[num][3]==""){return}

imgTxt=document.getElementById("imgtxt")
imgParent=document.getElementById(objParentID)

imgTxt.innerHTML=hs6Arr[num][3]

scrollBoxBorder=0
imageBorder=0

txtBorder=0
txtPadding=0

if(document.uniqueID && document.getElementById("pic"+num).currentStyle){ // ie
imageBorder=parseInt(document.getElementById("pic"+num).currentStyle.borderWidth)
//txtPadding=parseInt(imgTxt.currentStyle.paddingLeft) // uncomment for doctype
}

if(window.getComputedStyle){
scrollBoxBorder=parseInt(document.defaultView.getComputedStyle(scrollBox, '').getPropertyValue("border-top-width"))

scrollBoxBorder=(/firefox/i.test(navigator.userAgent)?scrollBoxBorder:(window.opera?-scrollBoxBorder:0))

imageBorder=parseInt(document.defaultView.getComputedStyle(document.getElementById("pic"+num), '').getPropertyValue("border-top-width"))
txtPadding=parseInt(document.defaultView.getComputedStyle(imgTxt, '').getPropertyValue("padding-top"))
txtBorder=parseInt(document.defaultView.getComputedStyle(imgTxt, '').getPropertyValue("border-top-width"))

}

imgTxt.style.display="block"
imgTxt.style.width=obj.offsetWidth-(imageBorder*2)-(txtPadding*2)-(txtBorder*2)+"px"

imgTxt.style.left=obj.offsetLeft+imgParent.offsetLeft+scrollBoxBorder+imageBorder+"px"
imgTxt.style.top=(obj.offsetTop+imgParent.offsetTop)+obj.offsetHeight-imgTxt.offsetHeight+scrollBoxBorder-imageBorder+"px"

}

function hideTxt(e){
if(e.toElement&&event.toElement.id!="imgtxt"){
imgTxt.style.display="none"
}

if(e.relatedTarget&&e.relatedTarget.id!="imgtxt"){
imgTxt.style.display="none"
}
}

</script>

<style>

/* where used the border and padding must have a value even if it is zero */

#scroll_box{
position:relative;
width:100%;
overflow:hidden;
background-color:#ffffff;
border:1px solid #ffffff;
text-align:left;
}

#scroller1 img, #scroller2 img{
cursor:;
border:1px solid #ffffff;
}

#imgtxt{
position:absolute;
left:0px;
top:0px;
font-size:12px;
border:0px solid red;
padding:5px;
background-color:#FFFFFF;
display:none;
opacity:0.75;
}

#bigpic{
opacity:0.9;
margin-top:20px;
}
</style>

<!--[if IE]>

<style type="text/css">

#imgtxt{
filter:alpha(opacity=75); /*opacity for IE */
}

#bigpic{
filter:alpha(opacity=100); /*opacity for IE */
}

</style>

<! [endif]-->

-->

Then add a new html widget and put in this code:

<!--

<BODY onload="initHS6()"> <DIV id="scroll_box" onmouseover="pause()" onmouseout="reStartHS6()"> <div id="scroller1" style="position:absolute;left:0px;top:0px"></div> <div id="scroller2" style="position:absolute"></div> <div id="imgtxt" onmouseout="hideTxt(event)"</div> </DIV> </BODY>

-->
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
And remember to add in the correct address for your images!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
This code is not the one that sagar posted.. but that is the one that I used on my site.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
I know, but he said like the one on your site, and it's probably better code!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for helping out!
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
hey littleus thanks, in you code where do i need tomake changes except for the top part (image addresses)
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Well, you don't need to change anything else. If you want you can change parts of the css like bg colour. Your probably can change the speed too.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
great thanks Connor!
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
thanks littleus / connor ... cheers guys!