How to Create A Simple Hover Gallery

Fri, 08/05/2011 - 17:59 -- James Sinkiewicz

Reminiscent of those at WhiteHouse.gov

A friend of mine asked me if I could create a website for his small construction business. Of course I couldn't refuse, but to make sure I would not be responsible for making all the changes in the future, I decided to use Drupal CMS to create it. I asked him to look around the internet for ideas on what he wanted to show his visitors. One of the things he asked if I could do was make an image gallery like the one at WhiteHouse.gov so he could show images of his work on various projects. "Of course", I said, "Drupal can do anything!"

I thought I would be able to do a quick Google search and find out how it was done. From the results, I discovered that I was not the first person to try to find out. The web was filled with unanswered requests for this information. I was never able to find out exactly how the White House's official website created their header gallery, but luckily Drupal is so flexible that there are often many ways to accomplish the same goal.

Besides, I did not want to copy it exactly, just make something 'reminiscent' of the one on the Executive Office's home page.

Documenting this task would have made for a very long post, so I created a PowerPoint presentation and saved it as a PDF. If this "how to" tutorial would be of interest to you, feel free to download it here (4MB). In my version, I use a 3X3 matrix of thumbnails to use as hover targets. The PDF tutorial uses Drupal 6, but could be easily done with Drupal 7. From what I can tell, the one on WhiteHouse.gov uses the Drupal core Views module generated "pager" numbers as the hover targets. I'm also guessing they used the Drupal ToolTips module for the popup text effects and perhaps the NodeQueue module to prioritize their gallery objects. I did not include these features in my tutorial. Besides, their methodology might be a state secret. If I guessed correctly, you did not hear it from me!

Update: I was very proud to be able to present this tutorial at the 2011 DrupalCamp L.A. held at the University of California Irvine Conference Center. These sessions were recorded and if you would like to watch the presentation, you can view it here (45 minutes). I was a bit nervous giving my first DrupalCamp session, so please excuse any errors and poorly chosen analogies!

Tags: 
Views
NodeReference_URL
CCK
Async
Share: 

Comments

Submitted by Richard on

Insightful. I'm really like what you've done here, and what ever in this blog. We all benefit form this 'cookbook' style, no matter novice or expert, because everyone have to work on a lot of modules and no one know how to do everything in Drupal at first glance. This is the way Drupal tutorial should be written and we will break those Drupal steep learning curve. It's not hard to learn how a module work, but it is sure hard when trying to solve problems by putting modules togather. That's the real hard part of Drupal.

If you just spend more time on this slides and do screen recording, watch-me-doing recording. These kind of stuff will be the best Drupal tutorials exist. I mean the tutorials when come in packaged is so powerful, by repeat and re-used your contents like video/slides/notes/files. That's perfect!

I think you should start doing a lot of this and become Drupal University. That's even better than open Drupal shop. If you considered make this as your main business, I'll be one of your customer ;)
I imagined you will become something like buildamodule.com with rich learning course material like cs50.tv

Regards,
Richard

Submitted by kallu on

hi..its great work ..thanxx

Submitted by Ed Walsh on

Is there any examples of this on any test sites you have made? or is the only example on the .gov site?

Submitted by James Sinkiewicz on

Thank you for the kind words. The site I am creating that will use this hover gallery method is not yet complete, but that is a great idea! If anyone uses the method I've posted to make a similar hover gallery, I'd love you to post your link so others can view and learn.

Submitted by varun on

Am developing a drupal site for my NGO (this is currently being developed on a different domain name, till i finalise the website layout and content) and i got stuck despite following instructions. http://artbydinesh.in/forum

This is where i am currently :) You have done an amazing job with the pdf. If you get time and if you are inclined to, please let me know what i might have done wrong. Thank you.

Submitted by James Sinkiewicz on

You look like you are making good progress and your gallery is looking good so far. Remember that my demonstration is for a gallery that is 950px wide and all alone in its region. Your web page is 1000px wide and you have put a menu to the left of your gallery, so your gallery is shifted over a bit and gets cut off. But other than than, I think you got it done.

Submitted by Michael on

Great looking gallery and very good instructions - for Drupal 6. I am trying to follow this for Drupal 7, and can't quite get it because the Views and Slideshow modules are so different between the two versions (at least to me). When I create the View, I get the gallery and title image, but the "thumbnails" are full size - I can't seem to even find a way to get thumbnails without creating one myself and loading an extra image. Is there a way to do this with the jQuery slideRezise option?

Submitted by James Sinkiewicz on

If I find some time, I may do it again for D7, but just not enough time to get to it.

Pages

Add new comment