Javascript Image Gallery Using Mootools (Part 2)

Last time, I provided a reasonably decent solution for creating a HTML friendly Javascript image gallery using mootools. After taking in some of its faults, and learning more about javascript, I’ve rewritten the whole code, and have came up with a new version, a simple, easy to use gallery that everyone can use.

Demo

Features

Anybody Can Use It – If Javascript is confusing to you, no worries. This solution doesn’t require any javascript knowledge. The only work require is one variable in the javascript & the actual HTML for the images.
Thumbnails – Unlike the previous version, you can now embed a different/smaller image in the previews.
Preview Slider – Easily slide through dozens of photos.
HTML friendly – Like the last time, this solution doesn’t compromise google bots or people with javascript disabled.
Better Transitions – The large photos ease in & ease out when switching
Image Descriptions – You have the ability to include a caption with every image

HTML

To set up the gallery properly, we need to write the necessary HTML to create the large image stage and the thumbnail slides. For the thumbnail slides, we’ll use an unordered list (<ul>) and list-items with links. The link tag will provide the path to the larger image to show on the stage and the img tag displays the thumbnail. The “moveleft” and “moveright” links move the slides left and right on the page.

<li><a href=”LARGE IMAGE” class=”item”><span>DESCRIPTION HERE</span><img class=”thumb” alt=”” src=”THUMBNAIL”/></a></li>

</ul>

</div>

<a id=”moveright” href=”#”>Right</a>

</div><br clear=”all”/>

Now of course you need set up the top part of the web page. For this part, we’ll need to reference the css for the gallery, the javascript for the image gallery and the mootools 1.2 beta release. Also, it’s always safe to declare the webpage DOCTYPE as XHTML so that it’s javascript compliant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Javascript Image Gallery Using Mootools</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  

<script src="mootools-12b.js" type="text/javascript"></script> <!-- MOOTOOLS 1.2 BETA -->
 <script src="imagegallery.js" type="text/javascript"></script> <!--   IMAGE GALLERY   -->

<link rel='stylesheet' href='imagegallery.css' type='text/css' />

</head>

CSS

Now comes the cascading style sheet to create the design for the image gallery. The trickiest parts of the CSS is definitely the slider. For the slider, we create the buttons for moving the slider forward and back, and thumbnail area. The unordered list tag holds the thumbnails, but what makes the slider work is that the width of the unordered list is very large and the parent div of the unordered list (called the #wrapper) is the width of what will actually be displayed. That way the javascript can move the position of the unordered list to show different thumbnails. The key to the #wrapper CSS is the “overflow: hidden” attribute which allows the thumbnails to stretch out horizontally and not be in view.

body{ background:black; color:white; }#img_gallery{ margin:50px auto; width:500px; }

#img_gallery a{ outline:none; border:none; }

#img_gallery a img{border:none;}

/* — IMAGE STAGE */

#fullimg{

width:500px;

overflow:hidden;

height:380px;

}

#fullimg img{ width:500px; }

#fullimg p, #fullimg span{

position:absolute;

background:black;

opacity:.5;

color:white;

margin:0px;

width:500px;

padding:6px;

font-size:11px;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

/* — SLIDER — */

#img_gallery #wrapper{

overflow:hidden;

padding:4px 2px;

width: 460px;

float:left;

height:50px;

background-color:#181818;

position: relative;

}

#items{

margin:0px 0px;

padding:0px;

list-style:none;

width:50000px;

position: relative;

letter-spacing:0em;

}

#items li{

float:left;

list-style:none;

margin-right:2px;

}

#items .thumb{

width:75px;

height:50px;

cursor:pointer;

margin:0px;

padding:0px;

}

#items .large{

display:none;

position:absolute;

}

#fullimg .thumb{display:none;}

#items .item p, #items .item span{

display:none;

text-indent: -2000em;

}

#moveleft, #moveright{

margin:0px;

height:58px;

color: white;

width: 16px;

text-indent: -2000em;

text-decoration: none;

z-index: 1000;

display:block;

cursor: pointer;

float:left;

}

#moveleft{background: url(’left.gif’);}

#moveright{background: url(’right.gif’);}

#moveleft:hover, #moveright:hover{ background-position:bottom; }

Javascript

The javascript is built for the most recent build of the mootools beta 1.2. I’ve heavily commented the code which you can view here. The only thing that needs to be changed in the javascript is the number of slides in the gallery.

var slides = 2;

License

You are NOT allowed to distribute this software with attribution. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.