Image Gallery Functionality

Perfect Layout provides full Hoverbox Image Gallery functionality. With a few modifications, Perfect Layout's implementation is exactly the same as the original system by Nathan Smith. As you'll see in the example below, each thumbnail is displayed with the others in a grid-like structure. Hovering over the thumbnail showes a higher resolution version, hense the name "Hoverbox." Clicking the thumbnail takes the user to the full size image. I've made a small modification to the code to allow the gallery to expand with the width of the box containing it, so try resizing the window to see that effect.

  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail
  • ThumbnailThumbnail

Images come from the Ark-La-Tex Gem & Mineral Shows.

All thumbnail images must be 200 by 150 pixels. The small thumbnails created through styling. Read Nathan's page about Hoverbox to get a better understanding of how the system works.

Internet Explorer 7 requires its own special styles to work correctly, and they are discussed in the IE 7 Overrides page. Internet Explorer 6 cannot correctly use Hoverbox, so special styles were set up to remove the hover effect in that browser. See the IE 6 Overrides page for more information.

Relevant HTML

<div class="imageGalleryContainer">
	<ul class="hoverbox">
		<li><a href="../images/gallery/images/001.jpg"><img src="../images/gallery/thumbs/001.jpg" alt="Thumbnail" /><img src="../images/gallery/thumbs/001.jpg" alt="Thumbnail" class="preview" /></a></li>
		<li><a href="../images/gallery/images/002.jpg"><img src="../images/gallery/thumbs/002.jpg" alt="Thumbnail" /><img src="../images/gallery/thumbs/002.jpg" alt="Thumbnail" class="preview" /></a></li>
	</ul>
	<div class="clearBoth"></div>
</div>

Relevant CSS

.imageGalleryContainer
{
	margin:0 auto;
	width:98%;
	padding:0 0 1em 0;
}

.hoverbox
{
	cursor:default;
	list-style:none;
}

.hoverbox a
{
	cursor:pointer;
}

.hoverbox a .preview
{
	display:none;
}

.hoverbox a:hover .preview
{
	display:block;
	position:absolute;
	top:-33px;
	left:-45px;
	z-index:1;
}

.hoverbox img
{
	background:#fff;
	border-color:#aaa #ccc #ddd #bbb;
	border-style:solid;
	border-width:1px;
	color:inherit;
	padding:2px;
	vertical-align:top;
	width:100px;
	height:75px;
}

.hoverbox li
{
	background:#eee;
	border-color:#ddd #bbb #aaa #ccc;
	border-style:solid;
	border-width:1px;
	color:inherit;
	display:inline;
	float:left;
	margin:3px;
	padding:5px;
	position:relative;
}

.hoverbox .preview
{
	border-color:#000;
	width:200px;
	height:150px;
}

« Back to Functionality Index