<html>
<head>
<style>
P
{
margin:0px;
padding:0px
}
body
{
FONT-SIZE: 10pt;
FONT-FAMILY:Tahoma
}
</style>
</head>
<body>> It may be acting exactly as it should, but I would like to see image <BR>> 1 immediately follow image 9. Any ideas as to how to make that happen?<BR>
<BR>
Well, this is one creative question indeed!?<BR>
<BR>
I don't recall to have ever seen anything like that in my browsing experience at all.<BR>That's why I google-d a little and came out with nothing.<BR>
Everything I've found can already be done with marquee.<BR>
Than I came to conclusion that the "not-breaking looping image strip" script doesn't exist!<BR>(I don't even know how to properly name it!)<BR>
Because nobody ever made\wrote one.<BR>
<BR>
Therefore I gave it a thought.<BR>
Not that it is impossible, but it does require some creativity for sure.<BR>
You surely can make a scrolling image sequence with javascript of course, but the problem is<BR>
that you are reinventing the wheel. Your question is how to make a circle out of a linear segment?<BR>
And that's a challenge.<BR>
We will need a total HTML, CSS and JavaScript <FONT>collaboration for this one to come true</FONT>. <BR>
And some calibration also.<BR>
<BR>
My solution script is very simple comparing to what I've found... (~180 KB for marquee, not even a loop!)<BR>So lets give it away:<BR>
*******<BR>
CSS begining<BR>
<BR>
#holder{ position:absolute; left:120px; top:120px; width:484px; height:460px; overflow:hidden; }<BR>
#roller {white-space:nowrap; margin-left:0; }<BR>
<BR>
CSS ended<BR>
<BR>
! My images were 160px wide so the "holder" width should be 480 + 4 px for 3 image view width.<BR>
<BR>
HTML BEGINING<BR>
<BR>
<DIV ID=holder><BR>
<div id=roller><BR><img src="DavidSylvian-DeadBeesOnACake.jpg"><BR><img src="PeterMurphy-Deep.jpg"> <BR><img src="ErikSanko-PastImperfektPresentTense.jpg"><BR><img src="3DoorsDown-Another700Miles.jpg"><BR><img src="Audioslave-OutOfExile.jpg"><BR><img src="Bauhaus-SwingTheHartache.jpg"><BR><!--Repeat the first three (3) to complete the circle (number depends on the view width--><BR><img src="DavidSylvian-DeadBeesOnACake.jpg"><BR><img src="PeterMurphy-Deep.jpg"> <BR><img src="ErikSanko-PastImperfektPresentTense.jpg"><BR>
</div><BR>
</DIV><BR>
<BR>
HTML ENDED<BR>
<BR>
Script Begining<BR>
<BR>
//W3C make ID=ID<BR>
var roller = document.getElementById('roller')<BR>
<BR>
var i=0;<BR>
function rollnow(){<BR> if(i < 980){/* You will need Explorer for this (980) value;<BR>
! alert(roller.offsetWidth) in IE to get the correct value before adding the repeated images in HTML!<BR>
Because Firefox and Opera are not reporting it correctly, in other case we could've used universal<BR>
roller.offsetWidth for automation and dynamic html for adding repeated images. If you don't have IE than <BR>
youll have to manually calculate the num of images * width + <FONT>R to get this value </FONT>*/<BR>
i++;<BR> roller.style.marginLeft=-i;<BR> }else{i = - 4 } //R = resync coefficient; R=[n of repeated images - 1 * 2], where: n = (3 - 1) * 2 = 4<BR> }<BR>//The n of repeated Images depends on view width / image width. Round it: if > 1; n = 2. If > 2; n = 3 etc.<BR>
var intervalID = window.setInterval(rollnow, 20);<BR><BR>Script Ended<BR>
*******<BR>
<BR>
To make it loop faster you can always state: i = i + n; n=1,2,3,4,5,6...<BR>
<BR>
Regards<BR><BR><BR>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<BR> Troy III<BR> progressive art enterprise<BR>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<BR><br /><hr />Be one of the first to try Windows Live Mail. <a href='http://ideas.live.com/programpage.aspx?versionId=5d21c51a-b161-4314-9b0e-4911fb2b2e6d' target='_new'>Windows Live Mail.</a></body>
</html>