Solved

Image Gallery using Javascript and CSS

Posted on 2007-11-30
3
3,412 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

635 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