After searching through countless blog posts I have been looking for a really great image gallery slideshow. Something that could be added into WordPress and made as an easy publishing solution. This lead me onto Galleria which is a beautiful open source responsive image slideshow using jQuery.
In this tutorial I want to demonstrate how we can put together a very basic gallery example on any webpage. The JS codes are not very difficult and you can run them quickly within any layout. It does require a copy of the jQuery library but this should not be a problem. Also Galleria does include a number of premium themes aside from the regular default solution. It is a nice way to support the project and get a more customized look for your image gallery.
Live Demo – Download Source Code
Building the Webpage
First we need to construct the basic HTML and setup the Galleria plugin. You can download the latest copy right from their website and move over just the most important files. This would include galleria-1.2.9.min.js along with the themes folder. It is important that these files are kept in the same directory because each theme is read from the same location.
jQuery Galleria Image Slideshow Demo
I moved my Galleria JavaScript file into a /js/ folder along with the themes. If you create your own or purchase one it is easy to copy/paste into this themes folder and have everything nicely organized. Plus if you want to run any of the additional plugins which connect into Flickr or Picasa you should copy over this folder, too. I will be using a very basic example with our own local image files.
There are also notable CSS files to create the page design itself, along with a custom Google web font. And I have included a copy of the jQuery library hosted from Google. These resources should not take much time to load and you can still have excellent page speeds without sacrificing the benefits of an image gallery.
Internal HTML
It may surprise you just how easy it is to setup an internal HTML gallery. I have two div containers wrapped around the various img tags we will be using. The first DIV container sets the outer boundaries of the width/height for the image slideshow. Then the internal DIV will create the effects and the interface.
Reading through the Galleria quick start guide may also be useful. It outlines some additional attributes which you can tack onto the img tag. These will present a number of helpful pieces of data such as caption text or specific thumbnail shots. Thankfully Galleria is programmed to auto-generate smaller thumbnails based on the size of your images. But creating your own thumbnails will save time as the script can pre-load this a lot faster than the full image itself.
An even more exciting feature is the ability to include videos within the slideshow. These can be hosted on YouTube or Vimeo, and hopefully there will be support in the near future to host more services. This is the sample HTML code from their website documentation.
Just the sheer number of options and solutions you can build with Galleria is mindblowing. Custom options are possibly the greatest method for editing this plugin to your liking. There are so many choices and you honestly don’t even need to bother with any of them! But for JS developers who like to get their hands dirty I would recommend skimming that list of options to see if you can toy around with any cool effects.
Adding the JavaScript
Finally we come to the last important section which requires a bit of JavaScript code. You should place this at the bottom of the HTML document wrapped inside <script></script> tags. If it is easier to create a separate document you may do this as well, just remember to include it underneath the jQuery and Galleria sources in your document header.
$ (function(){
Galleria.loadTheme(‘js/themes/classic/galleria.classic.min.js’);
Galleria.run(‘#mygallery’);
});
It is so easy to create a default gallery with basic settings, I am often surprised by the outstanding quality. Articulating the process to create your own theme is very time-consuming. I recently stumbled onto a great WordPress plugin called Image Gallery Reloaded which does use the Galleria jQuery plugin. It is free to include within any WordPress site and it comes attached with a customized version of the Classic theme. Search around the web for more resources and you may be surprised to find out the tremendous popularity of Galleria among other webmasters.
Live Demo – Download Source Code
Closing
There are so many other responsive image slideshow plugins but very few have impressed me like Galleria. Especially because this project will remain open source for the entirety of its life, it is safe to assume you can run this in any number of web projects. The ability to purchase extra premium themes is really an added bonus for serious users who do not have time to make their own customized layout. Feel free to download a copy of my source code and try adding this slideshow gallery into your own website.