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!
Comments
jquery cycle
It should be noted that one must add the following code for the slideshow to work
$(document).ready(function() {
$('.views_slideshow_singleframe_teaser_section').after('<div id="nav">').cycle({
fx:'fade',
pager: '#nav'
});
});
I can't read jQuery
Honestly, I cannot even understand what this code is or does, but my slideshows work, as have others. Maybe you are talking about something outside of this tutorial? Not sure.
Some good points
Considering the great value of this article alone, I find it useful and need to add something on my own. First of all, the reasoning is quite an essential thing to consider before talking about the straight facts, or facts which might seem obvious. But it should be mandatory to cite various external sources used and to cite them properly. While this might look a bit pushy and directive, it should be a primary thing to look at after reading any article. Thank you for your trial.
Pages
Add new comment