Websites, Design & Online Marketing

jQuery Gallery Effects without a Plugin

To see a working example of the gallery click here.

One thing web developers do that really makes their designers happy is to build the design so it’s perfect to the last pixel.  This is not too bad if you’re hand cratfting every page but it can be a challenge if you’re using a Content Management System.

My experience has been that it is difficult to find WordPress gallery or slider plugins that provides flexibility in the choice of jQuery effects and the in mark-up created. I often feel I spend more time wrestling with the plugins to get them looking just how my designer wants than I do on the rest of the build.

Today I’m going to show you a WordPress technique that gives you all the flexibility you need for simple galleries and slide shows.   The technique is flexible because it doesn’t use a plugin.

  • Your content is regular WordPress posts,
  • you control the mark-up through template files
  • you style your work with CSS
  • and you code the jQuery yourself.

It’s great because it is quixk & easy, gives you complete control.  It also avoids the code bloat which comes with some plugins.  f rolling your own code sounds scary please read a little further.  You may be surpised by how straightforward it is.

How it Works

We are going to create a Gallery Panel to show a series of images with jQuery transition effects as the images change. A Gallery Control holds image thumbnails and we also show a content excerpt in a text panel.  The images and content can come from regular WordPress posts.

jQuery gallery from WordPress posts - no plugin required

In this blog post I cover markup, styling and jQuery animation for the gallery.  My next post will show you how to modify a WordPress template file to create the gallery.  The example page shows the jQuery gallery and two transition effects.

The Markup

I decided to use an unordered list for the Gallery Panel. Each list item has an id attribute to identify the post it refers to.  The list items contain the featured image wrapped by a link to the post and a div containing the post exceprt content (for details see the example).

Gallery Panel Markup

<ul id="ws-gallery-panel">
 <li id="ws-feature-post1" class="selected">
  <a href="/feature-post1"><img src="/wp-content/uploads/2012/11/feature-image1.jpg" /></a>
  <div class="ws-text">...</div>
 </li>
 <li id="ws-feature-post2">
  <a href="/feature-post2"><img src="/wp-content/uploads/2012/11/feature-image2.jpg" /></a>
  <div class="ws-text">...</div>
 </li>
 <li id="ws-feature-post3">
  <a href="/feature-post3"><img src="/wp-content/uploads/2012/11/feature-image3.jpg" /></a>
  <div class="ws-text">...</div> </li>
 <li id="ws-feature-post4">
  <a href="/feature-post4"><img src="/wp-content/uploads/2012/11/feature-image4.jpg" /></a>
  <div class="ws-text">...</div>
 </li>
</ul>

For the Gallery Control area I will use a group of <div>s, but an unordered list would be fine here too.  The important thing is that each control thumbnail links to its corresponding post and identifies the correct image in the gallery panel.  We do that using the href and data-toggle attributes.

Gallery Control Markup

<div id="ws-gallery-control">
 <div class="selected"><a href="/posts/feature-post1" data-toggle="#ws-feature-post1">
  <img src="/wp-content/uploads/2012/11/feature-image1.jpg" />
 </a></div>
 <div><a href="/posts/feature-post2" data-toggle="#ws-feature-post2">
  <img src="/wp-content/uploads/2012/11/feature-image2.jpg" />
 </a></div>
 <div><a href="/posts/feature-post3" data-toggle="#ws-feature-post3">
  <img src="/wp-content/uploads/2012/11/feature-image3.jpg" />
 </a></div>
 <div><a href="/posts/feature-post4" data-toggle="#ws-feature-post4">
  <img src="/wp-content/uploads/2012/11/feature-image4.jpg" />
 </a></div>
</div>

Styling with CSS

In the Gallery Panel we absolutely position the gallery items, one on top of the other.  Because we are using absolute positioning we call take advantage of z-index to order the images.  We bring the selected image to the front using z-index 3 and leave the others at the back with z-index 1.

Using z-index in an image gallery

Gallery Panel CSS

#ws-gallery-panel { margin: 0; padding: 0; list-style: none; position: relative; }
#ws-gallery-panel li { z-index: 1; width: 100%; height: 380px; position: absolute; top: 0; left: 0; }
#ws-gallery-panel li.selected { z-index: 3; }
#ws-gallery-panel a { color: black; font-weight: bold; text-decoration: none; font-size: 14px; }
#ws-gallery-panel img { float: left; }
#ws-gallery-panel .ws-text { float: right; padding-right: 25px; width: 265px; min-height: 220px; background: #e2e2e2; z-index: 1; }
#ws-gallery-panel .ws-text.selected { z-index: 3; }

Apart from this there’s nothing special about the way I have laid out the Gallery.  If you want your gallery to look different be my guest.  There’s very little that you can’t do with this technique!  For the sake of completeness here’s the Gallery Control styling from my example.

Gallery Control CSS

#ws-gallery-control { position: absolute; right: 0; bottom: 0; width: 280px; padding-right: 10px; z-index: 10; }
#ws-gallery-control img { float: left; width: 138px; height: 81px; }

Animation with jQuery

Now to the fun part!  We have out Gallery Panel and Gallery Controls marked up and laid out.  In the Gallery Panel we have carefully arranged the selected image to have z-index 3 and be at the front putting all other images to the back with z-index 1.

We implement our jQuery transition effects by manipulating the z-index property.  To create a cross-fade we would do this:

  • Change the selected image’s z-index to 2.
  • Move the new image to z-index 1 and slowly fade it in.
  • When the fade-in is complete tidy up by moving the (previously selected) image from z-index 2 to z-index 1.

The code snippet below shows how this is done.  I’ve abbreviated the code a little to make things clearer.  If you want to see the full details check the source code in the example.

Cross Fade jQuery

function selectWsImage(controlElement, fadeSpeed) {
        // find this thumbnail's image and display it in the content panel
        var targetId = controlElement.attr('data-toggle');
        var $selectedItem = $('#ws-gallery-panel li.selected');
        var $targetItem = $(targetId);
        $selectedItem.removeClass('selected').css('z-index', 2);
        $targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
                $selectedItem.css('z-index', 1);
        });
}
wsGalleryFadeInterval = 7000;
$(document).ready(function(){
        $('#ws-gallery-control a').click( function(event) {
                event.preventDefault();
                selectWsImage($(this), wsGalleryFadeInterval);
         });
})

The nice thing about using the data-toggle attribute to store the target image id is it leaves the href attribute available for a meaningful link.  This improves your page semantics and is great for search engines and other crawlers.  In our jQuery we add the event.preventDefault() call to ensure the Gallery Control thumbnails update the Gallery panel image but do not follow the link held in our href.

I hope you get the basic idea.  Once you’ve got it you can start adding new effects of your own.  Here, for example is a ‘fly-away’ slider effect.

Fly Away Slider jQuery

function slideWsImage(controlElement, fadeSpeed) {
        var targetId = controlElement.attr('data-toggle');
        var $selectedItem = $('#ws-gallery-panel li.selected');
        var $targetItem = $(targetId);
        var width = $(targetId).width();
        var height = $(targetId).height();
        $targetItem.css('z-index', 2);
        $selectedItem.animate({left: '+=' + width, top: '+' + height, opacity: 0}, fadeSpeed, function() {
                $selectedItem.removeClass('selected').css({left: 0, top: 0, opacity: 1, 'z-index': 1}).show();
                $targetItem.addClass('selected').css({'z-index': 3});
        });
}

In the next post I will show you how to modify a WordPress template to create the markup and jQuery demonstrated here.