Advertisement
  1. Code
  2. Creative Coding
Code

Image Gallery With Custom Sized Images (Bonus jQuery Plugin)

by
Languages:

As I promised in my previous article, here is the tutorial on creating a gallery out of the custom sized images. As a bonus you'll learn how to create a basic jQuery plugin to present the larger sized image of the thumbnail in a more appealing way.

If you did not read my previous article about custom image sizes, please read it so it will be easier to understand this tutorial.


Step 1 Decide on Image Sizes

Depending on your theme's layout, and what grid system it uses, you can decide on different image sizes for thumbnails. Before deciding think about how many images you want to have in a row, what is the width of the container where the thumbnails will be displayed, margins, paddings, etc.

I will use a 940 pixel wide, 2 column layout (8/4 ratio) as an example, where the content will be 620 pixels and the sidebar 300 pixels with a 20 pixel left margin. The content area and the sidebar area will have inner padding of 20 pixels. Now a little math: content is 620px wide with padding of 20px, leaving 580px for thumbnails; and displaying 5 thumbnails per line, each having a right margin of 10px so they are not stuck together; 5th image in each line will not have a right margin; thumbnails will be 108px in width and height, and cropped.

The larger sized image will be maximum of 660px wide and 660px tall, they will be resized proportionally without cropping.

You can choose whatever sizes fit your layout, if you decide to change sizes they can be easily regenerated (see previous post on how to do it), and they don't have to be square shaped.


Step 2 Setting Up the Custom Sizes

Edit the functions.php file so it looks something like this:


Step 3 Generate Thumbnail List, Excluding the Image Set as Featured

Still in functions.php add the method generate_thumbnail_list:

In content-single.php call the generate_thumbnail_list method, passing the post ID as a parameter.

The above will output an unordered list, containing links to the larger files and the thumbnail images.


Step 4 Styling the Gallery

Obviously the thumbnails need to be styled, otherwise it is just a plain list of images. Add the following to your existing stylesheet or create a new one and enqueue it:

This will put images next to each other, leaving some space around them.

At this point clicking on the thumbnail will open the large image on a blank page. This is a good fallback in case the JavaScript is disabled.


Step 5 Open the Images With a jQuery Image Gallery

Style Zoomed Image Gallery

Before writing any JavaScript it would be desirable to know how the large image will be displayed. Here is what I had in mind:

Note: all this will be generated from the jQuery plugin. This is just to show the process of creation.

A transparent overlay on top of all the content, with the image in the middle and the controls on the top right corner. While the image is loading there will be a spinner showing. In the root of the document body a wrapper div will be added, which will contain the links for navigation to the next and previous, a link to close the gallery, and the wrapper around the image where the image will be loaded. This is the minimal HTML code that will be used for the gallery.

Adding the following style will style the above elements as in the image above (comments are included to explain parts that may not be immediately obvious):

The outcome of the above:

Now Some JavaScript

The HTML code above will not be needed, it will be generated with JavaScript. Events will be attached for opening, navigating and closing the gallery. Navigating and closing the gallery can be done from the keyboard or using the mouse.

The JavaScript below is also commented to explain what's going on:

After including the above plugin, initialize it by adding the plugin call into the generate_thumbnail_list method:


Example

A real life example of how this works and how it can be used: Zoom jQuery Photo Gallery Plugin demo


References

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.