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!
-
Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Javascript Gallery
- Thread starter CyClonenl
- Start date
BillyRayPreachersSon
Programmer
This is very possible. There are many gallery scripts out there - have you tried looking at places such as or searching for "javascript gallery scripts" on Google?
Hope this helps,
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Hope this helps,
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Here is some sample code I had sitting on my desktop:
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
[/tt]
What is Javascript? FAQ216-6094
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>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
[/tt]
What is Javascript? FAQ216-6094
- Status
Similar threads
- Locked
- Question