I need to modify a script to allow variable sized pictures

[countrydj]

I have a free script that scrolls in vertical direction, up or down.
The script defines FIXED picture sizes.
I need to modify a script to allow variable sized pictures.
I need the width of each picture to be fixed, to fit into the column.
Here is the script:

<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk

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

data=new Array()
data[0]=new Array("photos/advertising/3counties.jpg","Thumbnail SlideShow Created By ApacheJeff","http://www.ckmarquees.co.uk/")
data[1]=new Array("photos/advertising/acceo.jpg","Alt text for Image 2","photos/advertising/acceo.jpg")
data[2]=new Array("photos/advertising/autohome-assistance.jpg","Alt text for Image 3","photos/advertising/autohome-assistance.jpg")
data[3]=new Array("photos/advertising/bolsover-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[4]=new Array("photos/advertising/canvas-repair.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[5]=new Array("photos/advertising/caravan-guard.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[6]=new Array("photos/advertising/cleopatras.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[7]=new Array("photos/advertising/edgetechnology.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[8]=new Array("photos/advertising/grantham-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[9]=new Array("photos/advertising/kdrewe.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[10]=new Array("photos/advertising/leisure-power.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[11]=new Array("photos/advertising/leisure-sales.jpg","Thumbnail SlideShow Created By ApacheJeff","http://www.ckmarquees.co.uk/")
data[12]=new Array("photos/advertising/lpgenious.jpg","Alt text for Image 2","photos/advertising/acceo.jpg")
data[13]=new Array("photos/advertising/micks-mobile.jpg","Alt text for Image 3","photos/advertising/autohome-assistance.jpg")
data[14]=new Array("photos/advertising/northstaffs-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[15]=new Array("photos/advertising/onechem.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[16]=new Array("photos/advertising/ropers.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[17]=new Array("photos/advertising/shield.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[18]=new Array("photos/advertising/waldegraves.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[19]=new Array("photos/advertising/warburtons.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[20]=new Array("photos/advertising/west-midland-caravans.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")
data[21]=new Array("photos/advertising/wandahome.jpg","Alt text for Image 4","photos/advertising/bolsover-caravans.jpg")

imgPlaces=10 // number of images visible
imgWidth=180 // width of the images
imgHeight=50 // height of the images
imgSpacer=40 // space between the images

dir=0 // 0 = up, 1 = down

vis3Window=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 initVIS3(){

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(){vis3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}

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

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

displayArea.style.height=containerHeight+"px"
displayArea.style.clip="rect(0,"+(imgWidth+"px")+","+(containerHeight+"px")+",0)"

imgPos= -pic0.height

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

if(dir==0){imgPos+=(pic0.height)+imgSpacer} // if up

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

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

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

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

scrollVIS3()
}

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

nowDivPos[i]=parseInt(currentImage.style.top)

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

if(dir==0&&nowDivPos[i]<= -(pic0.height+imgSpacer) ||dir==1&&nowDivPos[i]>containerHeight){

if(dir==0){currentImage.style.top=containerHeight+imgSpacer+"px"}
if(dir==1){currentImage.style.top= -pic0.height-(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(){vis3Win(data[this.i][2])}

nextPic++

}
else{
currentImage.style.top=nowDivPos[i]+"px"
}

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

}

function stopVIS3(){
clearTimeout(timer)
}

function vis3Win(loc){
if(loc==""){return}
if(vis3Window==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1')
newin.focus()
}
}

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

// -->
</script>

I have highlighted the part of the script that sets the fixed height of the pictures.
I need it to be variable.
Here is a link to the web page, which is under construction / experimenting, where the scroller is running:
http://touringcaravanclub.co.uk/
Can anybody show me how to edit this script.

Thank you,

John C

[ajfmrf]

Well, you could easily say that you were sooooooo close to doing just that when you copied then highlighted the script like you did.

I looked at the images you have to work with.

First of.I would add a index.html or index.htm to you directories to keep people from being able to look at what ever you have there.As it is now I or anyone can look into each directory and see what you have.If you don't mind people being able to do this then don't bother but if you want to keep people out for any reason add the page even if it has absolutely nothing on it it will give people an blank page to see instead of everything you have there.

There red part:
imgHeight=50 // height of the images

Can be changed to what ever value you want( use the best size for your image collection.The line above is also important because this too needs to be set to you pictures.
imgWidth=180 // width of the images

You change those two numbers to edit the image sizes by height and width.

The images you have at the top of your page are pretty distorted at 1000 x 150- that does not work good for your images.Do you know what the original width,heights were before you ended with this size?

And I don't know what the original size of the images you have in the script script above but that should be what you are looking at-make sure the image size is not causing distortion

[jscheuer1]

I don't think that's going to get it. Don't you want the images to be of varying heights so that they maintain their aspect ratio at width 180?

If so, that script is just not going to do it. I wrote a script a while back that can, but it's for horizontal scrolling. However, recently someone coming for help on it had turned it into a vertical scrolling script. It retained its ability to scale the images within it. So I've made up a live demo for you:

http://home.comcast.net/~jscheuer1/s...rtscroll-h.htm

Is that what you're looking for?

[countrydj]

I don't think that's going to get it. Don't you want the images to be of varying heights so that they maintain their aspect ratio at width 180?

If so, that script is just not going to do it. I wrote a script a while back that can, but it's for horizontal scrolling. However, recently someone coming for help on it had turned it into a vertical scrolling script. It retained its ability to scale the images within it. So I've made up a live demo for you:

http://home.comcast.net/~jscheuer1/s...rtscroll-h.htm

Is that what you're looking for?

Hi jscheuer1..
Thank you forgetting back to me so quickly.

YES. That is exactly what I am looking for
There was just 1 problem with the script. On this occasion I needed to link to another web site.
I modified your script and removed the preset width and height settings.

The problem is that the Sponsors who supply the logos for linking to, provide them in lots of different sizes.
I HAVE to limit the width to 180 pixels so as not to exceed the width of the column.

I have taken the liberty of downloading the source code, and the crawler2.js file.
I have copied the appropriate codes to another page, and saved crawler2.js to my own server.
I have assumed that the fact that you gave me the link, you wouldn't mind if I copied the source code, and used it in my own site. Is this OK with you ??? I have not removed your credit from the script.

With your approval, I will write the script to a file and call it with <?php echo $yourscript ?>

If not, I will remove it

Also, I would appreciate a copy of the 'horizontal crawler' script, if that is possible.
I could use this with another web page that has fixed sized scrolling pictures.

Once again, I want to thank you so very much for all the help and advice that you have given to me.....

!!!!! THANK YOU !!!!!

John C

[countrydj]

Hi ajfmrf's ...

Thank you for your reply.

Fortunately for me, jscheuer1 already had a script that is perfect for my needs.

Thank for the reminder about putting an index.htm file in my regional directories.
I started off with index.php and because I have 21 regions to load up, I changed it to the-region-name.php so as not to get confused which region I was working on.

The images you have at the top of your page are pretty distorted at 1000 x 150- that does not work good for your images.Do you know what the original width,heights were before you ended with this size?

I realise this, but at the moment, I haven't been supplied with good photos.
The whole site is under construction / experiment.

Regards,

John C

[jscheuer1]

Let's see. Your last post makes it sound like you don't need the script any more, or maybe you don't need the horizontal one any more.

On the demo page I set some css styles:

<style type="text/css">
.marquee a img, .marquee0 a img {
	width: 180px;
	display: block;
	border: 2px solid white !important;
	margin: 10px auto;
	padding: 2px;
}
.marquee a img:hover, .marquee0 a img:hover {
	border: 2px solid blue !important;
}
.marquee0 div {
	left: 0px !important;
	white-space: normal !important;
}
</style>

That one in red may or may not be all that's required to accommodate various width images, resizing them to scale to width 180. I mean it will work, but if the images are a lot different than that, it might mess up the scrolling action. If it does, the script could be edited to fix that, but I don't think it will be a problem.

The sister script, the one this script was taken from is here:

http://www.dynamicdrive.com/dynamici...wler/index.htm

You may use any Dynamic Drive script or any modified Dynamic Drive script as long as you follow these guidelines:

http://www.dynamicdrive.com/notice.htm

If you have any questions about the terms feel free to ask. But for what you're describing, as long as the script credit appears in the source code of the served page, that is as long as when I visit the page, if I hit 'View Source', I can see the credit, then you are good.