Javascript Gallery

CyClonenl · Feb 3, 2006

Hi,

I am creating a site with photo's and i wanted to know if its possible to let them resize when they click on the photo.

I want to show a thumbnail first and let it get bigger when they click on it.

Thanks in advance!

BillyRayPreachersSon · Feb 3, 2006

This is very possible. There are many gallery scripts out there - have you tried looking at places such as

http://www.dynamicdrive.com,

or searching for "javascript gallery scripts" on Google?

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BabyJeffy · Feb 3, 2006

Here is some sample code I had sitting on my desktop:

Code:

<html>
<head>
<title>Test</title>
<style type="text/css">
.thumb {
	width:100px;
	border:5px solid black;
}
</style>

<script type="text/javascript">
function popWindow() {
	var pathToBigImage = './large/';
	var imgWidth = 640;
	var imgHeight = 480;
	window.open(pathToBigImage + this.src,'mypopup','width='+imgWidth+',height='+imgHeight);
}
function initThumbs() {
	var myCol = document.getElementsByTagName('img');
	for (var loop=0, max=myCol.length; loop < max; loop++) {
		if (myCol[loop].className.indexOf('thumb') >= 0) {
			myCol[loop].onclick = popWindow;
		}
	}
}
window.onload = initThumbs;
</script>
</head>

<body>
<img src="yourimage.jpg" class="thumb" />
</body>
</html>

The javascript will add an onclick to each image that has a class="thumb" once the page has loaded. I have provided some variables that you can set to define the width and height of the popup window - and the path to the directory that holds the larger versions of the thumbnails. The thumbnails and large images need to have the same name (although it is simple to alter it).

This solution will only work with javascript - if it is disabled, then the popups will not work.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

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!

Javascript Gallery

CyClonenl

Programmer

BillyRayPreachersSon

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor