Vertical conveyor belt slide show

[danisrocky]

Hello,

I was trying to use Vertical conveyor belt slide show ( http://home.comcast.net/~jscheuer1/side/marquee_v_slide.htm ) but i am facing a problem .... i cannot set height and width of the photos ... it is taking original height and width of the photo ... which is not equal (one photo is big and other is small) so my slide show dont come in one line .....

can i set height and width for photos ?

Please Help ....

Tried Script


<script type="text/javascript">
/*
Vertical Pausing Slideshow - freely adapted from:
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content slideshow. Credit MUST stay intact for use
visit http://www.dynamicdrive.com/forums
*/

//Specify the marquee's width (in pixels)
var marqueewidth="140px"
//Specify the marquee's height
var marqueeheight="225px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no 1=yes)?
var pauseit=1
//Specify images' border
imgBorder=0

var photos=new Array();
//Specify images, optional link, optional target:
photos[0]=['http://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Fightingposter.jpg/200px-Fightingposter.jpg', 'http://www.google.com', '_blank'] //Image w/link and target
photos[1]=['http://i43.tinypic.com/ofa5b9.jpg', 'http://www.dynamicdrive.com'] //Image w/link
photos[2]=['files/photo3.jpg'] //Plain Image
photos[3]=['files/photo4.jpg']
photos[4]=['files/photo5.jpg']
photos[5]=['files/photo6.jpg']
photos[6]=['files/photo7.jpg']
photos[7]=['files/photo8.jpg']
photos[8]=['files/photo9.jpg']

////NO NEED TO EDIT BELOW THIS LINE////////////
var preload=new Array()
for (var i_tem = 0; i_tem < photos.length; i_tem++){
preload[i_tem]=new Image()
preload[i_tem].src=photos[i_tem][0]
}

var actualheight=marqueecontent=''
var copyspeed=marqueespeed
var pausespeed=(pauseit)? 0 : copyspeed
var iedom=document.all||document.getElementById
var cross_marquee, cross_marquee2, ns_marquee

for (var i_tem = 0; i_tem < photos.length; i_tem++){
if (typeof photos[i_tem][1]!=='undefined'){
marqueecontent+='<a href="'+photos[i_tem][1]+'"'
marqueecontent+=typeof photos[i_tem][2]!=='undefined'? ' target="'+photos[i_tem][2]+'"' : ''
marqueecontent+='>'
}
marqueecontent+='<img src="'+photos[i_tem][0]+'" alt="Image #'+[i_tem+1]+'" border="'+imgBorder+'"><br>'
marqueecontent+=typeof photos[i_tem][1]!=='undefined'? '</a>' : ''
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="overflow:hidden;"><div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;"><table align="center"><tr><td height="'+marqueeheight+'" align="center" valign="middle">Loading . . .</td></tr></table>')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}

function populate(){
if (document.all)
for (var i_tem = 0; i_tem < preload.length; i_tem++)
if (typeof preload[i_tem].complete=='boolean'&&!preload[i_tem].complete){
setTimeout("populate();", 2000)
return;
}
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '0px' : parseInt(marqueeheight)+0+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+0)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}
</script>

[vwphillips]

<html >

<head>
<title></title>
<style type="text/css">

#tst1{
position:absolute;overflow:hidden;left:300px;top:20px;width:300px;height:344px;text-Align:center;border:solid 1px #cccccc;background:#eaf5e0;text-Align:left;
}

.Images{
width:300px;text-Align:center;
}


</style>
<script type="text/javascript">

// Continuous ScrollerII (17-February-2009)
// by: Vic Phillips http://www.vicsjavascripts.org.uk

// To provide a continuous Scroll any number of images or HTML messages in a banner of any length
// For both Vertical or Horizontal Applications.
// With event call functions to Stop or Start the scroll
// and to change the direction between scroll left and right.

// Application Notes
// The effect is initialised and controlled by event calls to function
// zxcScroller('h','tst2','start',1,100,200);
// where:
// parameter 0 = the mode, for vertical 'v', for horizontal 'h'. (string 'v' or 'h')
// parameter 1 = the unique id name of the scroll container. (string)
// parameter 2 = (optional) to scroll up/left = negative digit or down/right = positive digit. (digit, default = -1)
// may also be used to control the scroll speed.
// parameter 3 = (optional) the scroll speed (milli seconds). (digits, default = 100)
// parameter 4 = (optional) the hold delay speed (milli seconds), (digits, default = no hold)
// may only be used if parameter 2 is 1 or -1.
// parameter 5 = (optional) the hold position from the left/top (px). (digits, default = 0)
// parameter 6 = (optional) the initial delay before scrolling (milli seconds). (digits, default = no auto start)
//
// The first call will initialise the effect.
// Subsequent calls may be used control the effect by updating parameters 2, 3

// To Stop & Start the Scroller
// Function zxcScrollerSS('tst1','v',true) may be used to stop and start the scroller.
// where:
// parameter 0 = the mode, for vertical 'v', for horizontal 'h'. (string 'v' or 'h')
// parameter 1 = the unique id name of the scroll container. (string)
// parameter 2 = (string) to toggle the rotation between stop and start the scroller. (string)
// parameter 2 = true to start or false to stop the scroller. (boolen, default = false)


// Functional Code size = about 2.86k

function zxcScroller(mde,id,ud,spd,hold,holdpos,srt){
var p=document.getElementById(id);
mde=(typeof(mde)=='string'?(mde+' '):' ').charAt(0).toLowerCase();
if ((mde!='v'&&mde!='h')||!p) return;
if (!p[mde+'scroll']) return p[mde+'scroll']=new zxcScrollerOOP(mde,p,ud,spd,hold,holdpos,srt);
var oop=p[mde+'scroll']
clearTimeout(p.to);
oop.spd=spd||oop.spd;
oop.ud=ud||-oop.ud;
}

function zxcScrollerSS(zxcp,zxcmde,zxcrun){
if (typeof(zxcp)=='string') zxcp=document.getElementById(zxcp);
zxcmde=(typeof(zxcmde)=='string'?(zxcmde+' '):' ').charAt(0).toLowerCase();
if ((zxcmde!='v'&&zxcmde!='h')||!zxcp) return;
var zxcoop=zxcp[zxcmde+'scroll'];
if (zxcoop){
zxcrun=zxcrun||false;
clearTimeout(zxcoop.to);
if (typeof(zxcrun)=='boolean') zxcoop.run=zxcrun||false;
else zxcoop.run=!zxcoop.run;
if (zxcoop.run) zxcoop.scroll();
}
}

function zxcScrollerOOP(mde,p,ud,spd,hold,holdpos,srt){
p.style.overflow='hidden';
this.p=p;
this.mde=mde;
this.vh=mde=='v'?'top':'left';
var os=mde=='v'?['offsetHeight','offsetTop','height']:['offsetWidth','offsetLeft','width'];
var c=p.getElementsByTagName('DIV')[0];
var clds=c.childNodes;
for (var z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
this.wh=clds[z0][os[0]]+clds[z0][os[1]];
}
}
holdpos=(typeof(holdpos)=='number'?holdpos:0)-this.wh;
c.style.position='absolute';
c.style[this.vh]=holdpos+'px';
c.style[os[2]]=this.wh+'px';
var max=(c[os[0]]+p[os[0]]);
var pos=0;
this.ary=[[c,0,[]]];
while (pos<max){
var z1=this.ary.length;
this.ary[z1]=[c.cloneNode(true),pos+=this.wh,[]];
this.ary[z1][0].style[this.vh]=this.ary[z1][1]+holdpos+'px';
p.appendChild(this.ary[z1][0]);
}
for (var clds,z2=0;z2<this.ary.length;z2++){
clds=this.ary[z2][0].childNodes;
for (var z2a=0;z2a<clds.length;z2a++){
if (clds[z2a].nodeType==1) this.ary[z2][2].push(clds[z2a][os[1]]);
}
}
this.ud=ud||-1;
this.spd=spd||100;
this.hold=typeof(hold)=='number'?hold:false;
this.holdpos=typeof(hold)=='number'?holdpos:0;
this.to=null;
this.data=[pos,-this.wh];
this.run=false;
if (typeof(srt)=='number'){
this.run=true;
this.to=setTimeout(function(oop){return function(){oop.scroll();}}(this),srt);
}
}

zxcScrollerOOP.prototype.scroll=function(){
var spd=this.spd;
for (var r=1,z1=0;z1<this.ary.length;z1++){
this.ary[z1][1]+=this.ud;
this.ary[z1][0].style[this.vh]=this.ary[z1][1]+this.holdpos+'px'
if (this.hold&&Math.abs(this.ud)==1){
for (var z1a=0;z1a<this.ary[z1][2].length;z1a++){
if (parseInt(this.ary[z1][0].style[this.vh])+this.ary[z1][2][z1a]*this.ud==this.holdpos) spd=this.hold;
}
}
if ((this.ud<0&&this.ary[z1][1]<=this.data[1])||(this.ud>0&&this.ary[z1][1]>this.data[0])) this.ary[z1][1]=this.data[(this.ud<0)?0:1]+this.ud;
}
this.to=setTimeout(function(oop){return function(){oop.scroll();}}(this),spd);
}



</script>
<script type="text/javascript">

function Init(){
zxcScroller('v','tst1',-1,10);
zxcScrollerSS('tst1','v',true);
}

</script>
</head>

<body onload="Init();">
<div id="tst1" style="overflow:hidden;"
onmouseout="zxcScrollerSS('tst1','v',true);"
onmouseover="zxcScrollerSS('tst1','v');"
>

<div class="Images" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /><br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" width="110"/>
</div>
</div>

</body>

</html>

or


<style type="text/css">

#tst1{
position:absolute;overflow:hidden;left:300px;top:20px;width:300px;height:344px;text-Align:center;border:solid 1px #cccccc;background:#eaf5e0;text-Align:left;
}

.Images{
width:300px;text-Align:center;
}

.Images IMG{
width:220px;height:150px;
}

</style>