Solved

Image Gallery using Javascript and CSS

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

747 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

8 Experts available now in Live!

Get 1:1 Help Now