How to add an image gallery to a template (part 2)

This is part 2 in a series of tutorial posts about adding an image gallery to a website template. For this post to be useful, make sure to read part 1 first!

In the part 1 of this tutorial I described how to replace the single sample image of the Gallery template with a simple jQuery image gallery plugin. Part 1 ended when one of the example galleries included with the plugin had been inserted in its default form. In this second part, it is time to adjust the image gallery to fit better into the template design and replace the default images with own photos.

Step 7: Adjusting the CSS

This is what the CSS for the image gallery plugin looks like right now:

#gallery {width:515px; margin:0 auto;}
#gallery img.output {width:500px; height:375px; border:solid 5px #fff;}
#gallery span.caption {display:block; margin:1em 0;}
#gallery ul.thumbnails {width:100%; list-style:none; margin:0; padding:0;}
#gallery ul.thumbnails li {float:left; margin:0 0.5em 1em;}
#gallery ul.thumbnails li img {width:100px; height:75px; border:solid 5px #fff; cursor:pointer;}
#gallery ul.thumbnails li img.active {border:solid 5px #77D0EF;}

The gallery itself is 515 pixels wide, and the image sizes are 500 x 375 pixels for the large image and 100 x 75 pixels for the thumbnails. Since the main content area in the Gallery template is 750px, I want bot the large images and the thumbnails to be larger. Taking the border into account, I define the width of #gallery as 750px and the width of the images to 740px. The thumbnails are set to 130x95px. There are also a few other changes I want to do, adjustments of margins and colors of borders.

After making the wanted changes, my CSS for the image gallery looks like this:

#gallery {width:750px; margin:0 auto 20px auto;}
#gallery img.output {width:740px; height:525px; border:solid 5px #ddd;}
#gallery span.caption {display:block; margin:0;}
#gallery ul.thumbnails {width:100%; list-style:none;
margin:20px 0 10px 0; padding:0;}
#gallery ul.thumbnails li {float:left; margin:0 10px 5px 0;}
#gallery ul.thumbnails li img {width:130px; height:92px; border:solid 5px #ddd;
cursor:pointer;}
#gallery ul.thumbnails li img.active {border:solid 5px #c03939;}

Step 8: Adding own photos and editing the HTML

Now I want to remove the sample images and insert own photos into the gallery. I’ll stick to the theme from the original template and use dog photos, to keep the example relevant with gallery template designer Steve’s site about dogs. First of all, I delete the numbered images in the /images folder (which is located in the template folder). Second, I create my selected new images in the proper sizes using an image editor. 740 x 525 pixels for the large versions, 130 x 92 pixels or the thumbnails. I save the large images as 1.jpg, 2.jpg and 3.jpg – and the corresponding thumbnails as 1_thumb.jpg, 2_thumb.jpg and 3_thumb.jpg, all in the /images folder.

The next step is to edit the HTML for the new images. At this point, the HTML for the sample images look like this:

<div id="gallery">
  <img class="output" src="images/1.jpg" alt="" />
  <span class="caption">Monument Valley</span>
  <ul class="thumbnails">
    <li><img class="active" src="images/1.jpg" title="Monument Valley" alt="" width="100" 
     height="75" /></li>
    <li><img src="images/2.jpg" title="Honey Bee" alt="" width="100" height="75" /></li>
    <li><img src="images/3.jpg" title="Cup of Coffee" alt="" width="100" height="75" /></li>
    <li><img src="images/4.jpg" title="Grand Tetons" alt="" width="100" height="75" /></li>
    <li><img src="images/5.jpg" title="LA Skyline" alt="" width="100" height="75" /></li>
    <li><img src="images/6.jpg" title="Leaf" alt="" width="100" height="75" /></li>
    <li><img src="images/7.jpg" title="Chinese Bell" alt="" width="100" height="75" /></li>
    <li><img src="images/8.jpg" title="Ladybird" alt="" width="100" height="75" /></li>
  </ul>
  <br class="clear" />
</div>

There are two changes to make. First, replacing the code for the sample images with the code for my three own images. And second, move the caption to display it as a header above the large image instead of as an ordinary smaller text below the large image. The first change is a matter of removing unwanted list items and then changing the title, width and height attributes (the file name remains the same). The second change is made by creating a <h2> element right after the div id=”gallery” tag and then copy the <span> tag (including class=”caption” and ending tag) into this new header element. With these changes applied, the code will look something like this:

<div id="gallery">
  <h2><span class="caption">Papillon (adult)</span></h2>
  <img class="output" src="images/1.jpg" alt="" />
  <ul class="thumbnails">
    <li><img class="active" src="images/1.jpg" title="Papillon (adult)" alt="" width="130" 
    height="92" /></li>
    <li><img src="images/2.jpg" title="Papillon (puppy)" alt="" width="130" height="92" /></li>
    <li><img src="images/3.jpg" title="Kleinspitz (puppy)" alt="" width="130" height="92" /></li>
  </ul>
  <br class="clear" />
</div>

Finally, I add a credit link in the footer to the creator of the Gallerax jQuery plugin, nodethirtythree design.

Step 9: Save and review the result in the browser

By now, the image gallery looks as I want it to look. Sizes have been adjusted, I have replaced the sample images with own photos and made sure that the code validates without errors. This is what the modified template looks like in the browser:

Click here to see a live demo…

Final words

This version of the Gallery template is now available as a separate download (gallery-alt.zip) so you can dive right into it and play with the image gallery plugin without having to repeat all steps in this tutorial. To download Gallery (alternate version), click the screenshot above. For more details about the Gallery template, go to the Gallery template page.

gallery, jQuery, templates, tutorials