Basic Javascript Image Gallery

One of the comments left recently by Michael on the Summer Fields design post asked about how to create a very simple image gallery with the design. The concept included in the design was very basic. It included a section that would allow for showing some pictures, and I had mentioned in the text that it was possible to make it more functional by adding some javascript to create a gallery.

The area text was just a suggestion about the different ways you could use the section, but Michael asked what javascript could actually be used to accomplish it. In order to make it work, I’m going to add 2 id elements to the existing code so I can more easily separate the gallery from anything that may come before or after it.

Original HTML

The original HTML looks like this in the sample template (obviously some filler text was used):

<div id="gallery">
<p class="entrytext"><img src="sunflower.jpg" style="width: 130px; height: 130px; float:right;" alt="placeholder" />Our Photo Gallery</p>
<ul>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
</ul>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>
</div>


Move the Paragraph Out

To be honest, I don’t remember why it is that I had inline CSS in there, possibly because the entire thing was meant to be a placeholder. In any event, we can change that too while we’re here, but first I want to take out that bottom paragraph and put it OUTSIDE the closing div.

The reason I want to move the paragraph is that I’m going to be parsing all the links in the div with the gallery ID using javascript, and if there are links in the paragraph also, then they’ll try to trigger an image preview (which they don’t have).

Moving that paragraph out of the div could be problematic for some designs, and in those cases, it’s more efficient to add a new ID to the UL containing the image thumbnails. For this, it’s super simple to just fix the issue by moving the paragraph.

...
</ul>
</div>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>

From this point on we can totally ignore that paragraph because it’s not longer involved in what we’re doing.

Add New ID & Remove Inline Style

Now I want to add an ID (we’ll call it imagepreview) to the larger image on the right so that I can more easily target that image. At the same time, it gives us something to reference in CSS to get that inline CSS out of there.

After editing that section, we should have this (removed the inline CSS and added the imagepreview id):
<div id="gallery">
<p class="entrytext">Our Photo Gallery <img src="sunflower.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
...

Put Real Text In

Our final edit on this HTML should be in the form of filling in the list elements with real text and taking out the dummy text. An example should look like:

<li>
<a href="the-full-size-image-goes-here.jpg">
<img src="the-thumbnail-image-goes-here.jpg" alt="Some real alt text." />
</a>
</li>

You can add as many list items (li) as you need, it doesn’t matter.

Add Javascript

Ok, so now it’s all ready for some javascript. You can download the gallery.js gallery file here. Head up to the top of the page HTML and add the code to include our new javascript file:

<script type="text/javascript" src="gallery.js"></script>

Onclick Variation

Now keep in mind that Michael asked how to do the hover view of the images, but it would be just as simple to do on a click event. If you want to do an onclick instead, just edit the gallery.js file on lines 14-19 to look like this instead:
for ( var i=0; i < links.length; i++) { links[i].onclick = function() { return showPic(this); } links[i].onkeypress = links[i].onclick; }

Adjust the CSS

Finally, to make sure we have better control of the styling, let's adjust a bit of the CSS file included with the template.

Find the CSS section that looks like this:
/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}


We're going to change the 'div#gallery img' to be 'div#gallery ul li img' instead so that we're only controlling the gallery thumbnails with that CSS. Then we're going to add our new 'imagepreview' image to be controlled differently and add the old inline CSS on the line underneath.

/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery ul li img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery img#imagepreview {width: 130px; height: 130px; float:right;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}

Using this Elsewhere

While the example is obviously using the Summer Fields template, this same code can be used in any site so long as you create a section that looks like this:

<div id="gallery">
<p><img src="someplaceholder.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
<li><a href="full.jpg"><img src="thumb.jpg" alt="the alt text." /></a></li>
</ul>
</div>

The only naming requirements of the javascript are that it's all in an element with an id=gallery (doesn't have to be a div) and that the big image has an id=imagepreview. Other than that, you should be fine to use it in various ways. The big image doesn't have to be in a 'P' element and the thumbnails don't have to be in a UL, so feel free to adjust as needed.

Questions?

Feel free to post them here.

~Nicole