Help with a sensible approach to pop-up images

Request Type: 
General Assistance
Author: 
Bjorn Akselsen
Issue/Request: 

I am trying to find a solution to a functionality we have on our current site: http://www.yale.edu/egyptology/ae_gebel_rear_chamber.htm. Images embedded in the text (many!) opens up to a large version (in a new window) when clicked (JavaScript). As this is research-based content, the client likes the functionality of a detailed large version. Migrating this solution to the Drupal environment seem overwhelming, so I would love to get input and help on other/better approaches. So far I have 3 contenders, the last of which I would need help with. But I would also appreciate other feedback! 

Option 1
http://dev.egyptology.yale.edu/ghueita-temple-central-rear-chamber, has the same smaller images opening up to larger versions opening up in a blank browser window (unlike our current model, not named html pages with images embedded). A decent alternative, though with some pitfalls, i.e. the “parent” browser window dictates the size of the pop-up window.

Option 2
http://dev.egyptology.yale.edu/archaeological-expeditions/ghueita-temple…. Here the illustrations are reconfigured so that they fill the full text area width, in my view obviating a need for a pop-up. I’m partial to this solution, though the client may still prefer a solution that gives an option of even larger images.

Option 3
Colorbox, as used here http://yalesites.yale.edu, seem like a promising option. This would have to be enabled on each image individually. Is there some step-by-step documentation of how to use this module? I have enabled it under “modules” but then I got stuck…

Thanks for your help!

Nancy Flowers-Mangs on February 3, 2015:

http://dev.egyptology.yale.edu/news/students-graduate-program-egyptology

Hi Bjorn, 

I set the image to open with Colorbox. See if this works for you.

There is a lot of flexibility with this, and if you do this on an Image field, you only need to set it up once and it will generate the new window automatically. Here’s all I did:

Let me know if that works.

Bjorn Akselsen on February 3, 2015:

Thanks Nancy. I must admit I’m really fumbling when it comes to the fields… I seem not to be able to grasp the basics. I set image to Colorbox under “Manage Display” for this page:  http://dev.egyptology.yale.edu/ghueita-temple-central-rear-chamber but I’m not finding a way to get Colorbox to display those images. I go under “Edit”, thinking there’s a selector somewhere to specify what image I want to open up in Colorbox, but cannot see any. 

I.e. the first image on the page is Figure_1_small.jpg and I’d like that to open up in Colorbox to a larger version named Figure_1_large.jpg. But I cannot find anywhere to specify that.

Sorry to be so helpless….

Nancy Flowers-Mangs on May 29, 2015:

Working with Bjorn offline so closing this ticket.