Create a gallery with Drupal and Thickbox
Powerful features and special effects are not something that only big websites with plenty of cash to burn can afford. In fact, most of the neat design features you see nowdays are pretty easy to get right - some with practically no programming required. Let's look at how to create a basic image gallery using Drupal, Views and Thickbox.
For the purposes of this example, you'll need to have the following installed - apart from Drupal (or a Site prebuilder distribution) itself:
I should say that there are drupal modules available, most notably jCarousel, that provide this type of functionality straight out of the box. However, what you'll often find is that it is possible to imitate the functionality of contributions by clever use of things like views and CCK. Often, creating your own features is far more flexible and powerful in the end too.
Follow this list of instructions to get your gallery up and running:
- Create a new content type called gallery and give it a new CCK image field called gallery image
- Create a new Image style called gallery style using ImageCache - use scale and crop to force the images into suitable dimensions, say 100x100 pixels
- Create a number of new gallery posts using various images
- Create a new view that filters by gallery content type and displays only the gallery image field - ensure you select Thickbox: gallery_style_image for the format and set the Label option to None
- Style your output using CSS (Hint: you may want to use Firebug in Firfox to find out class names for the images in your view)
That's all there is to it. The rest is styling with CSS to create some nice effects. For example, you could set the opacity to 0.7 for your images, until someone hovers over the image and it goes to 100%. In the same way you could play with borders and shading to highlight the currently hovered over image.
It's also possible to seriously upgrade the gallery as it stands. Often, you'd like your gallery to rotate through a large number of images - larger than there is space on the page to show at one time. No problem! You won't even need to do any programming, but you will need the following contribution:
Once this is installed, revisit the view and set the Style from unformatted or grid (or whatever you have used), to Slideshow. Most of the default settings are fine to at least view the results with. You'll need to come back and play around with the settings to get things just right.
Enjoy!
You are online with David Mercer
"Bestselling author of books about the web, eCommerce and marketing." Wikipedia
Inspiring and empowering entrepreneurs, businesses, bloggers and startups through social, marketing, and business advice.
30 000+ readers and counting
"This made my day" - Guy Kawasaki
Author of Enchantment and The Art of the Start
Sponsor this webpage for cents a day
- Real SEO backlinks
- Premium page position
- Large ad space
- Displays every hit
- Targeted audience
- High conversions
Become a recognized visionary
Share your insights into the future of your niche. Gain a following and drive brand recognition, traffic and sales.
Social SEO website reviews
Add your site to the world's premiere web directory and bookmarking service. With social integration and SEO juice to deliver multiple backlinks & great ROI.
Boost book & product sales
Track, analyze and promote any book or product sold through Amazon, anywhere in the world from around 3c per day.
topulo.us predictions
- Social influence will overtake web traffic as the primary metric for advertisers and marketers
- "Steve jobs" by Walter isaacson will sell more than 200 000 copies in 2012 on Amazon.com alone.
- Apple's iPad will sink below 50% market share by mid 2013
- Google search plus your world will kill off Twitter within two years
- Cloud printing with cloud ready printers will kill off the fax machine
TopRank
- Online Marketing News: Facebook IPO, Harmonize with Google+, Pinterest Dominates Traffic
- Essential Shifts in Online Marketing: Are You On Board? Are You Optimized?
- Blogger Relations: Push or Pull? How to Get Bloggers to Mention Your Brand
- Getting Your Internet Marketing Dream Job: How to Interview & Succeed at a Top Agency
- Google+ Optimization vs. Community Building: Pros & Cons of Google SPYW
terms of use | privacy | about | write for us | affiliates | employment | partner with us | advertise | contact
© site prebuilder 2009





















