Solved

Image Gallery using Javascript and CSS

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
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!
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 …
The viewer will learn how to count occurrences of each item in an array.

911 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

22 Experts available now in Live!

Get 1:1 Help Now