Image Gallery using Javascript and CSS

I am creating a gallery of images and found some code that sorta works for my needs. I am using CSS and Javascript. My thumbnails are listed in <LI> tags and when clicked on javascript is to change the full sized image and changes the css on the clicked image to let the user know which thumbnail is selected.

I split the <ul> between two div tags to take advantage of background-image capabilities. I have one image for the thumb and another for the full size (i.e. -- image1_tn.jpg and image1_fs.jpg).

How would I modify the following code to get the full size image (in a folder titled 'fs') to replace when the thumbnail (in a folder titled 'tn')?

Thanks!
Aus2Srq

<html>
<head>
<style type="text/css">
#thumb {
	float: left;
	background-image: url(images/gallery/tn_back.png);
	height: 267px;
	width: 256px;
}
#thumb ul {
	list-style:none; 
	padding:5px; 
	margin: 25px 25px 0px 0px; 
	width:195px; 
	float:right; 
	height:200px; 
	overflow:auto; 
}
#thumb ul li {
	display:inline; 
	width:50px; 
	height:50px; 
	float:left; 
	margin:0 4px 4px 0; 
	border:1px solid #444; 
	cursor:pointer;
}
#thumb ul li img {
	display:block; 
	width:50px; 
	height:50px;
}
#col_image ul li.click i img.default { padding: 25px 25px 0px 0px; width:auto; height:auto; }
 
#thumb ul li.off {display:none;}
 
#thumb ul li.click { border-color:#fc0; background:#f8f8f8; cursor:default;}
 
#col_image ul li.click i { position:relative; left:0; top:0; width:545px; height:355px; }
 
#col_image ul li.click i img { margin:5px auto 0 auto; width:auto; height:auto; }
</style>
 
<script language="javascript">
clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;
 
	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("click", "");
				}
				this.className+=" click";
				}
			}
		}
</script>
</head>
<body onload="clickMenu('thumb')">
 
<div id="thumb">
        <ul>
        	<li><i><img src="images/gallery/tn/image1.jpg" title="" alt="" /></i></li>
            <li><i><img src="images/gallery/tn/image2.jpg" title="" alt="" /></i></li>
            <li><i><img src="images/gallery/tn/image3.jpg" title="" alt="" /></i></li>
 
</ul>
        </div><!-- End thumb //-->
    	<div id="fullsize_image">
        <ul>
        	<li class="click"><i><img class="default" src="images/gallery/fs/image1_fs.jpg" /></i></li>
        </ul>
        </div><!-- End fullsize_image //-->
</body>
</html>

Open in new window

Aus2Srq

Asked: 2007-11-30

Advertise Here

1 Solution

LVL 12

oceanbeachCommented: 2007-11-30

Hello Aus2Srq,

I am not sure I understand how the layout is to look, but perhaps this will work (or at least be a good start)...

I hope this helps!

oceanbeach

<html>
<head>
<style type="text/css">
#thumb {
        float: left;
        background-image: url(images/gallery/tn_back.png);
        height: 267px;
        width: 256px;
}
#thumb ul {
        list-style:none; 
        padding:5px; 
        margin: 25px 25px 0px 0px; 
        width:195px; 
        float:right; 
        height:200px; 
        /*overflow:auto; */
}
#thumb ul li {
        display:inline; 
        width:50px; 
        height:50px; 
        float:left; 
        margin:0 4px 4px 0; 
        border:1px solid #444; 
        cursor:pointer;
}
#thumb ul li img {
        display:block; 
        width:50px; 
        height:50px;
}
#col_image ul li.click i img.default { padding: 25px 25px 0px 0px; width:auto; height:auto; }
#thumb ul li.off {display:none;}
#thumb ul li.click { border-color:#fc0; background:#f8f8f8; cursor:default;}
#col_image ul li.click i { position:relative; left:0; top:0; width:545px; height:355px; }
#col_image ul li.click i img { margin:5px auto 0 auto; width:auto; height:auto; }
 
 
ul { position: relative; }
li span { display: none; }
li.click span {
display: block;
position: absolute;
left: 0;
width: 500px;
height: 500px;
background: #f00; }
 
</style>
<script language="javascript">
clickMenu = function(menu) {
        var getEls = document.getElementById(menu).getElementsByTagName("LI");
        var getAgn = getEls;
 
        for (var i=0; i<getEls.length; i++) {
                        getEls[i].onclick=function() {
                                for (var x=0; x<getAgn.length; x++) {
                                getAgn[x].className=getAgn[x].className.replace("click", "");
                                }
                                this.className+=" click";
                                }
                        }
                }
</script>
</head>
<body onLoad="clickMenu('thumb')">
<div id="thumb">
  <ul>
    <li><i><img src="images/gallery/tn/image1.jpg" title="" alt="" /><span><img class="default" src="images/gallery/fs/image1_fs.jpg" /></span></i></li>
    <li><i><img src="images/gallery/tn/image2.jpg" title="" alt="" /><span>SPAN2</span></i></li>
    <li><i><img src="images/gallery/tn/image3.jpg" title="" alt="" /><span>SPAN3</span></i></li>
  </ul>
</div>
<!-- End thumb //-->
</body>
</html>

Open in new window

LVL 1

Computer101Commented: 2008-02-21

Forced accept.

Computer101
Community Support Moderator

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Expand your skills with this month's free Premium course.

Image Gallery using Javascript and CSS

Join & Write a Comment Already a member? Login.

Featured Post