I have just implemented a css sprite for a list of items. The purpose of this was that when a user hovers over an item, the image changes... What I have been asked to do now is to add a pop up for each of those list items. How would I go about doing this?

Is there any way by using aFancybox module to achieve this?

The pop up would consist of a page title, image and a close button.

At the moment the list items are hard coded in the page.tpl.php template.

I use drupal 7

This is the sort of thing I am trying to achieve. So a set of images which change on hover, and when clicked on a little pop up appears. enter image description here

2 Answers 2


You should probably follow webkenny's approach. However, you could simplify this by creating a unique node type that accommodates the display info you need.

As for the css sprites go through this. While the sprites offer benefits, I wouldn't get dogmatically insistent on using sprites either, since you'll have to hard-wire the coordinates as per hover, if part of your goal is passing off the site to a non-technical. The performance gain is offset by the preparation time (unless you're using SASS which has excellent sprite-assisting facilities). Regardless, your content type for the popup information can contain either the coordinates for the hover sprite or image file fields for the hover and non-hover images which views manages when building that horizontal element. Finally, I'd go with Colorbox, as Fancybox's community is much smaller. I don't see where fancybox has a feature that CB doesn't for your requirements.

  • Thank you @kyle-skrinak I've set up the view and colorbox module... the only thing is... the pop up is not displaying what I would like it to... It's displaying the same thumbnail image as the view, instead of displaying the content that's on the page which is linked to the image... if that makes sense. What adjustments do I need to make in order to get the thumbnails in the view, to when linked open up the content/text of the pages that the thumbnails are coming from/linked to?
    – kine456
    Commented Jun 18, 2013 at 6:28
  • "Image styles" found at admin/config/media/image-styles are your friend. Be sure to have one per view: thumbnail/hover and one for where the image appears in the pop-up. Then, you can tells views to use each one accordingly depending on the view.
    – Screenack
    Commented Jun 18, 2013 at 9:36
  • Thank you @Kyle-skrinak Re: and one for where the image appears in the pop-up The thing is, I don't want the image to appear in the pop-up, I just want text (content from the node). Is this even possible? Or does the colorbox module only display images?
    – kine456
    Commented Jun 19, 2013 at 4:05
  • Yes, colorbox allows for inline (i.e., an arbritary mix of images and text) html. Additionally Colorbox Node allows you to call nodes, and only displays content (not the full page) via colorbox using ajax which is nice and performant. I'm using colorbox this way here (click on one of the towns listed in the map) or here (click on any of the news stories) You can style your node content with Display Suite.
    – Screenack
    Commented Jun 19, 2013 at 9:39
  • 1
    Thank you @Kyle-skrinak. That is exactly what I want! I was wrecking my brain trying to figure out how to do it with just Colorbox, but didn't realise I also needed Colorbox Node. Thanks for that!!!
    – kine456
    Commented Jun 20, 2013 at 1:52

I wouldn't approach it this way. Hardcoding list items, with content, in a tpl.php is generally frowned upon and will ultimately require more work than this should entail.

Instead use Views and the Colorbox module. Create a view with the list of nodes you want to display, pop it in a block on the page in the region you'd like it to display, and use the Colorbox plugin to Views show the popover on click. Use CSS to style the colorbox however you please. This can be handled strictly with configuration and a touch of CSS. This way, when the theme changes someday, the functionality is maintained.

See http://drupal.org/project/views and http://drupal.org/project/colorbox for more details.

  • Thanks for that @webkenny I've got a translation banner which is made up of 9 different languages. They are all images. Each image has to change on hover. The way I am doing it at the momemnt is as css sprite (fringefocus.com/2010/tutorial/…). From what a can see the colorbox is a pop up functionality, but how do I get the css sprite to work? I'd rather not have too many images (there are 9 languages) and would prefer a single image for the translation banner.
    – kine456
    Commented Mar 19, 2013 at 2:51
  • Happy to help. This sounds like something I might have more success with if I can see an example of what you're doing. Would you have a live example I could look at? Even if it's not totally functional yet? Or a mockup of what you're trying?
    – webkenny
    Commented Mar 19, 2013 at 11:27
  • Thank you @webkenny This is the sort of thing I am trying to achieve. So a set of images which change on hover, and when clicked on a little pop up appears. img266.imageshack.us/img266/1096/cssspritepopup.png
    – kine456
    Commented Mar 19, 2013 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.