Solved

Image Gallery using Javascript and CSS

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can i check if the text is an Isogram ? 2 24
Location of Buttons 4 14
css selector 1 16
Detect Closed Loops (circles, figure-8s, etc) in PNG Images 6 31
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

813 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now