...

View Full Version : Scrolling picture show...



Romulus
01-19-2003, 06:58 PM
I'm new to Javascript and I would eventually like to design a script that can be put on a page that would have a series of pictures scrolling in a layer that would hide the overflow. It would be good if they were also in a loop so that the user would not be able to tell where the end and the beginning were, it would just look like continuous pics.
That would be the menu, as it were. So with a "onmouseover" I could get the scrolling list to stop so that the user could click on one of the pictures and then have a larger version of it appear below. I know that this can be done with frames, but I would rather do it without if that's possible.
Anyway, I would just like any help at all getting this going because it seems like it is a heavy project. I've been trying to look at similar scripts and break them apart but it's pretty hard for me to do.

any help is good help.

thanks.

A1ien51
01-19-2003, 07:18 PM
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

Romulus
01-20-2003, 01:02 AM
That's a good script...very close to what I was talking about.
Is there a way to make the scrolling smoother though? I was adjusting the speed and when it gets down to a lower number the movement does not seem as....well, smooth.

Roy Sinclair
01-20-2003, 09:35 PM
Originally posted by Romulus
That's a good script...very close to what I was talking about.
Is there a way to make the scrolling smoother though? I was adjusting the speed and when it gets down to a lower number the movement does not seem as....well, smooth.

If the OS is Win9x or WinME the timer won't be good for values < 18ms which can make low timer intervals useless on those client machines.

Smoothness of animation can also be heavily effected by the CPU/Video subsystem of the client machine. If you're animating a huge portion of the screen a slow processor or slow video subsystem may be unable to keep up and when that happens the screen will become jerky as some intervals simply don't get displayed.

Romulus
01-20-2003, 09:53 PM
I decided to try to make a kind of scrolling picture menu by using layers and I've run into a bit of a problem. I want to have a layer that will make something like a 300px wide area visable on the screen. Then I was trying to put a 400+ px layer, with the thumbnail pics on it, below the first layer and have it scrolling back and forth so that you can only see the 300px space. However, when I tried to do this it seems like both layers are moving together. There are supposed to be 7 identical thums on the bottom layer, but you can only see 5 because there is only 300px visable. And because both layers seem to be moving you never see all the pictures scroll by the space.
I also put a left, reset, and right button to control the scrolling and it doesn't seem to work the way I wanted. I wanted the pictures to start, centered over the 300px space and then go right or left. But it only seems to go left and won't go all the way to the right.
I've included the script that I was making in Dreamweaver and if anyone could help me out a little with the problem, it would be a great help. :)
------------------------------
<html>
<head>
<title>Scrolling Picture Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_HScroller(el,dr,tx,ox,spd) { //v1.6 by PVII
var g,gg,fr,sp,pa='',slw=true,m=false,w,ww,lx,rx;tx=parseInt(tx);
if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;}else{return;}
if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
}else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var xx = parseInt(gg.left);if(isNaN(xx)){
if(g.currentStyle){xx=parseInt(g.currentStyle.left);}else if(document.defaultView){
xx=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("left"));}else{xx=0;}}
if(document.all || document.getElementById){w=parseInt(g.offsetWidth);if(!w){w=parseInt(g.style.pixelWidth);}
if(g.hasChildNodes){for(wx=0;wx<g.childNodes.length;wx++){ww=parseInt(g.childNodes[wx].offsetWidth);
if(ww>w){w=ww;}}}}else if(document.layers){w=parseInt(g.clip.width);}lx=tx-w+parseInt(ox);rx=tx;
if(dr=="Right"){if(xx>lx){m=true;xx-=sp;if(xx<lx){xx=lx;}}}
if(dr=="Left"){if(xx<rx){m=true;xx+=sp;if(xx>rx){xx=rx;}}}
if(dr=="Reset"){gg.left=tx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
if(m){gg.left=xx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=true;
eval("g.p7Magic=setTimeout(\"P7_HScroller('"+el+"','"+dr+"',"+tx+","+ox+",'"+spd+"')\","+fr+")");
}else{g.toMove=false;}
}
//-->
</script>
</head>

<body>

<div id="containLayer" style="position:absolute; left:271px; top:195px; width:300px; height:63px; z-index:1; clip: rect(0px 300px 63px 0px); background-color: #D8D0C8; layer-background-color: #D8D0C8; border: 1px none #000000; overflow: hidden;">
<div id="contentLayer" style="position:absolute; width:420px; height:63px; z-index:1; left: -60px; top: 0px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;">
<table width="420" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
<td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
</tr>
</table>
</div>
</div>


<div id="Controls" style="position:absolute; width:100px; height:20px; z-index:2; left: 375px; top: 280px;">
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;" onMouseOver="P7_HScroller('containLayer','Right',0,300,'Medium')" onMouseOut="P7_HScroller('containLayer','Stop',0,0,'Medium')"><img src="PVII%20scroller%20Ideas/pk_left.gif" width="26" height="20" border="0"></a></td>
<td align="center"><a href="javascript:;" onClick="P7_HScroller('containLayer','Reset',0,0,'Warp')"><img src="PVII%20scroller%20Ideas/pk_home.gif" width="28" height="20" border="0"></a></td>
<td align="right"><a href="javascript:;" onMouseOver="P7_HScroller('containLayer','Left',0,0,'Medium')" onMouseOut="P7_HScroller('containLayer','Stop',0,0,'Medium')"><img src="PVII%20scroller%20Ideas/pk_rite.gif" width="26" height="20" border="0"></a></td>
</tr>
</table>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum