Solved

Image Gallery using Javascript and CSS

Posted on 2007-11-30
3
3,402 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:Aus2Srq
3 Comments
 
LVL 12

Accepted Solution

by:
oceanbeach earned 500 total points
ID: 20382386
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

0
 
LVL 1

Expert Comment

by:Computer101
ID: 20953162
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript to set default value on SharePoint form field 7 20
html border input line 7 16
Reactjs with .NET 3 39
Can't get page to reload 9 14
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question