2 replies [Last post]
killthepixelnow
killthepixelnow's picture
Offline
newbie
Last seen: 2 years 38 weeks ago
Timezone: GMT-5
Joined: 2011-12-19
Posts: 4
Points: 7

Hello, I'm trying to create a simple image gallery with a list of thumbnails to show the picture. In the past I used tables but now I'm willing to do it with CSS.

What i want to do is to click any of the thumbnails and change the image without reloading the entire page. As I already told you, I used to create different HTML documents for each image, which was a pain in the ass.

Any ideas of how to solve this issue?

You can check the website in here:
http://www.killthepixelnow.com/rodencia/galeria001.html

This code shows how the gallery is structured:

<div id="galeria-container">
                                    		<div id="galeria-thumbnails">
                                            		<div id="galeria-columns_wrapper">
                                                    	<div id="thumbs_col001">
                                                    		<div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb001"><span>01</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb002"><span>02</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb003"><span>03</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb004"><span>04</span></a></div>
                                                            <div id="thumbnail_wrapper005"><a href="#" class="galeria-thumb005"><span>05</span></a></div>
                                                   	 	</div>        
                                                    	<!--End of column001-->
                                       		  			<div id="thumbs_col002">
                                                   			<div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb006"><span>06</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb007"><span>07</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb008"><span>08</span></a></div>
                                                            <div id="thumbnail_wrapper001"><a href="#" class="galeria-thumb009"><span>09</span></a></div>
                                                            <div id="thumbnail_wrapper005"><a href="#" class="galeria-thumb010"><span>10</span></a></div>
                                                    	</div>
                                             			<!--End of column002-->
                                                    	<div class="clean"></div>
                                                    </div>
                                                    <!--End of colums wrapper-->
                                       		  <div id="galeria-navigation">
                                                    	<div id="galeria-left_arrow"><a href="#" class="left_arrow"><span>Atrás</span></a></div>
                                                        <div id="galeria-numbers"><p><a href="#">1</a> / <a href="#">42</a></p></div>
                                                        <div id="galeria-right_arrow"><a href="#" class="right_arrow"><span>Adelante</span></a></div>
                                                    </div>
                                                    <!--End of navigationr-->
                                            </div>
                                            <!--End of thumbnails-->
                                    		<div id="galeria-images">
                                            		<img src="images/galeria-img001.jpg" width="590" height="384" alt="Rodencia" / class="main_image">
                                            </div>
                                            <!--End of images-->
                                            <div class="clean"></div>
                                    </div>
                            <!--End of galeria container-->

killthepixelnow
killthepixelnow's picture
Offline
newbie
Last seen: 2 years 38 weeks ago
Timezone: GMT-5
Joined: 2011-12-19
Posts: 4
Points: 7

CSS

Here's the CSS:

/*Galería*/
#galeria-container{
	width:806px;
	height:404px;
	margin-left:auto;
	margin-right:auto;
}
#galeria-columns_wrapper{
	margin-bottom:20px;
}
#galeria-thumbnails{
	width:170px;
	height:404px;
	float:left;
}
#galeria-thumbnails span{
	display:none;
}
#thumbs_col001{
	width:80px;
	height:350px;
	float:left;
	margin-right:10px;
}
#thumbnail_wrapper001{
	width:80px;
	margin-bottom:10px;
}
#thumbnail_wrapper005{
	width:80px;
}
a.galeria-thumb001{
	background-image:url(../images/galeria-thumb001_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb001{
	background-image:url(../images/galeria-thumb001_down.jpg);
}
a.galeria-thumb002{
	background-image:url(../images/galeria-thumb002_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb002{
	background-image:url(../images/galeria-thumb002_down.jpg);
}
a.galeria-thumb003{
	background-image:url(../images/galeria-thumb003_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb003{
	background-image:url(../images/galeria-thumb003_down.jpg);
}
a.galeria-thumb004{
	background-image:url(../images/galeria-thumb004_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb004{
	background-image:url(../images/galeria-thumb004_down.jpg);
}
a.galeria-thumb005{
	background-image:url(../images/galeria-thumb005_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb005{
	background-image:url(../images/galeria-thumb005_down.jpg);
}
a.galeria-thumb006{
	background-image:url(../images/galeria-thumb006_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb006{
	background-image:url(../images/galeria-thumb006_down.jpg);
}
a.galeria-thumb007{
	background-image:url(../images/galeria-thumb007_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb007{
	background-image:url(../images/galeria-thumb007_down.jpg);
}
a.galeria-thumb008{
	background-image:url(../images/galeria-thumb008_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb008{
	background-image:url(../images/galeria-thumb008_down.jpg);
}
a.galeria-thumb009{
	background-image:url(../images/galeria-thumb009_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb009{
	background-image:url(../images/galeria-thumb009_down.jpg);
}
a.galeria-thumb010{
	background-image:url(../images/galeria-thumb010_up.jpg);
	background-repeat:no-repeat;
	display:block;
	width:76px;
	height:58px;
	border: 2px solid #dcab55;
}
a:hover.galeria-thumb010{
	background-image:url(../images/galeria-thumb010_down.jpg);
}
#thumbs_col002{
	background-color:#3F300;
	width:80px;
	height:350px;
	float:left;
}
#galeria-images{
	width:590px;
	height:404px;
	float:right;
}
#galeria-images .main_image{
	border: 10px solid #eae5e1;
}
#galeria-navigation{
	width:170px;
	height:auto;
	clear:left;
}
#galeria-navigation span{
	display:none;
}
#galeria-navigation #galeria-left_arrow{
	width:10px;
	float:left;
}
#galeria-left_arrow a.left_arrow{
	background-image:url(../images/btn-back_arrow001.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	width:10px;
	height:17px;
	display:block;
	float:left;
}
#galeria-left_arrow a:hover.left_arrow{
	background-image:url(../images/btn-back_arrow001.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
}
#galeria-numbers{
	width:150px;
	float:left;
	text-align:center;
}
#galeria-numbers p{
	color:#d9d1bd;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:16px;
	margin:0;
	padding:0;
}
#galeria-numbers a{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:16px;
	color:#d9d1bd;
	text-decoration:none;
}
#galeria-numbers a:hover{
	color:#ba8c2e;
	text-decoration:underline;
}
#galeria-navigation #galeria-right_arrow{
	width:10px;
	float:left;
}
#galeria-right_arrow a.right_arrow{
	background-image:url(../images/btn-forward_arrow001.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	width:10px;
	height:17px;
	display:block;
	float:left;
}
#galeria-right_arrow a:hover.right_arrow{
	background-image:url(../images/btn-forward_arrow001.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 20 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9257
Points: 3263

First things first

First, get the gallery structure right. A gallery is a list. See my inline-block thumbnail gallery demo for coding examples.

For the image swap, it is important that there is a graceful fail-over, that is, even if the scripting is not supported, or if it is disabled, the page must still work, if with less panache. The scripting must be unobtrusive. Further, accessibility requirements demand that it should be fully functional from the keyboard. Again, there's an app a demo for that: Swapping images with javascript. Some folks like the swap to occur upon hovering the thumbnail. There are accessibility issues there, not to mention that I consider the approach annoying. The latter, of course, being the ultimate reason for avoiding swap-on-hover. Wink

Off topic, but trying to be helpful: For these illustrations, first crop to an interesting part of the image, then make your thumbnail from that cropped section.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.