John thank you very much for your help.
Josh thanks for your advise.
But still I have some problems.
So I found something else here http://www.huntingground.freeserve.c...mgscroll3h.htm
but I'm not sure how to use it.
here is the codec
Code:
<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 3</TITLE>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
// ********** User Defining Area **********
data=[
["pic01sm.jpg","Alt / Title text for image 1","pic01.jpg"],
["pic02sm.jpg","Alt / Title text for image 2","pic02.jpg"],
["pic03sm.jpg","Alt / Title text for image 3","pic03.jpg"],
["pic04sm.jpg","Alt / Title text for image 4","pic04.jpg"],
["pic05sm.jpg","Alt / Title text for image 5","pic05.jpg"],
["pic06sm.jpg","Alt / Title text for image 6","pic06.jpg"],
["pic07sm.jpg","Alt / Title text for image 7","pic07.jpg"],
["pic08sm.jpg","Alt / Title text for image 8","pic08.jpg"],
["pic09sm.jpg","Alt / Title text for image 9","pic09.jpg"],
["pic10sm.jpg","Alt / Title text for image 10","pic10.jpg"],
["pic11sm.jpg","Alt / Title text for image 11","pic11.jpg"],
["pic12sm.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=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=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>
and here is the instructions
Code:
User Options within the script
Data array
The data array holds information regarding the image, alt/title text, and link target
["pic1.jpg","Alt / Title text for image 1","page1.htm"],
["pic2.jpg","Alt / Title text for image 2","page2.htm"],
If no alt or title text or link is required leave the quotes empty
["pic3.jpg","Alt / Title text for image 3",""],
["pic4.jpg","","page3.htm"],
image_places=5
The number of image places are dynamically created, the script uses these image places to sequencially show all the available images.
The display area automatically resizes to accommodate this number of places. If you set more image places than there are images the extra places will show a duplicate image.
My example is set to show 5 images places scrolling through ten available images.
imgWidth=50 Width of the images
imgHeight=50 Height of the images
imgSpacer=0 Space between the images
dir=0 Scroll direction. The slideshow can scroll to the left or right
newWindow=0 Open a new window for links 0 = no 1 = yes
John do you think something like that will work?
If you think so I'd really appreciate if you can help me to understand where to put the link for the picture and where the target link, and what other changes I must do.
I also don't know where exactly in my blob Template must put the codec.(Now I"m using: Ad a widget -> HTML/JavaScript Add in the blogger)
I also found something here http://www.smoothdivscroll.com/colorbox.htm but I don't know how to use...
All these looks Greek to me.
(It's funny for me to say that because I'm from Greece!)
I feel that I'm using you...
-Sou
problem with editable marquee in I.E.
Reply With Quote
Bookmarks