Position Images in rows 1

circlemaker · Aug 24, 2004

Hello,

I am new to javascript and was wandering if anyone could point me in the direction of a script that will allow me to position a number of images in rows i.e. I want to specify how many images per row (6) and if I have 20 images it will then display 3 x rows of 6 + 1 row of 2. I am actually loading the list of images into an array, so I *think* what I need to do is find a way of spliting the array per row and then displaying it.

Thanks in advance

circlemaker

BillyRayPreachersSon · Aug 24, 2004

This works for me, and does exactly what you describe:

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		var imageNames = ['123.gif', '456.gif', 'foo.jpg', 'bar.jpg', 'wibble.png', 'xyz.gif'];
		var imagesPerRow = 4;

		function showImages() {
			var outputHTML = '';
			for (var loop=1; loop<imageNames.length+1; loop++) {
				outputHTML += '<img src="' + imageNames[loop-1] + '" />';
				if (loop % imagesPerRow == 0) outputHTML += '<br />';
			}
			document.getElementById('imageContainer').innerHTML = outputHTML;
		}
	//-->
	</script>
</head>
<body onload="showImages();">
	<div id="imageContainer"></div>
</body>
</html>

Obviously, you can change formatting, etc by modifying the HTML that is generated in the "for" loop.

Hope this helps,
Dan

circlemaker · Aug 24, 2004

Thanks for that - it works a treat.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Position Images in rows 1

circlemaker

Programmer

BillyRayPreachersSon

Programmer

circlemaker

Programmer

Similar threads

Part and Inventory Search

Sponsor