Solved

Image Gallery using Javascript and CSS

Posted on 2007-11-30
3
3,407 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Node.js 11 82
Geolocation works...sometimes 2 40
Javascript: Range object 16 34
Set a parameter in a properties file and use in html table. 14 59
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

751 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