Leveraging JQuery Masonry can help us achieve a much better layout and it’s integration in a WordPress theme is pretty easy. If you’re not familiar with this technique, jQuery masonry allows you to flow blocks of content similarly to a mason wall. It’s pretty neat and there are many great WordPress themes that incorporate it.
Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.
I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.
If you’ve been following the Bluelime Media website you will know that we’ve partnered with Barbara from BlueCitrus on many occasions to develop websites and as the saying goes, “The son of the cobbler has no shoes“, the BlueCitrus website was in need of a facelift. My latest teaching gig at Langara provided me with the opportunity to design and develop a WordPress site for Barbara. The goal of the class was to teach the students how to use WordPress to create a portfolio. So building a site for Barbara was the perfect project.
Barbara laid the ground work and designed the header, navigation and gave me a good indication of how she wanted the site to work, but I was given carte blanche on how to make the portfolio work. After looking at numerous portfolio examples, I came across the stunning work of Koldo Barroso. Koldo’s illustrations are simply marvelous and I could look at them all day. His portfolio section is simple, yet very elegant. On closer examination of his site, I noticed that he uses Slimbox to display his gallery pieces which is just a slimmed down version of the original Lightbox.
A few clicks later, I read a few tutorials on how to use Slimbox and decided to use it to build it Barbara’s portfolio section. If you’re familiar with WordPress plugins, you’ll know that beyond how to install and activate, instructions are usually fairly slim when it comes to how to use them. Since I just finished the site and the steps I took are still fresh in my mind, I thought I’d walk you through on how to set your own gallery using the Slimbox Plugin.
In my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.
Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.
I asked Ben to look at my code and in my coda-slider.js file, he simply changed
.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />') .after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');
.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'" onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />') .after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');
Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.
Inspired by a beautiful design by Mizu Creative, my task was to convert the design into a WordPress based website enabling the client to make edits themselves and insert a series of slide shows with different behaviours. Converting the design into WordPress templates was a breeze, but finding a way to integrate the slide shows proved challenging. My initial thought of course was to use flash, but flash is expensive, annoying, hard to update and quite frankly, I don’t like it. I knew that Tzaddi had recently built a WordPress site where she used jQuery, so I thought I would investigate.
After a couple of Google searches, I found exactly what I needed.
InnerFade by Medienfreunde
The first demo I found was the InnerFade plugin. As the name suggests this plugin allows a series of text or images to fade in and out.
I’m not exactly sure who created this code, because my German is non-existent, but using his/her demo, I found the solution for one type of slide shows and used it on several sections of the Enhance Dental Centre website including this page, where you can see a series of before and after shots fading in an out.
Better Coda Slider by Remy Sharp
The second demo I found was the better coda slider. The aim of Remy‘s demo was to look at the original effect used on the Coda site and improve on it. Once again, using his example and making a few adjustments, I was able to use the code and create a “slider” effect where users can view the various testimonials.
All in all, I’m very pleased with the final outcome of the site. What proved to be daunting and challenging initially, turned out to be fairly simple and I look forward to playing with jQuery on more sites. What are your thoughts?