Joomla: Thumbnail to Popup Image

From Gruff Goat Wiki

Purpose

You create a story with a thumbnail photo and would like to allow the visitor to click on the thumbnail to view a larger photo in a pop-up window.

Requirements

This process requires familiarity with the Media Manager and adding images to a story.

Steps

1. Open your content item for editing in one window
2. Create your story including the thumbnail image
3. Open the Media Manager in a new window
4. Navigate to the folder containing the larger image for pop-up
5. Rollover the image for pop-up
   • Make a note of the Width and Height
6. Click the pencil icon to get the image code
7. Copy only the image URL from the image code
   • eg. http://www.domain.tld/images/stories/photos/popup.jpg
8. Return to the content item window
9. Highlight the text or image code to link from
10. Click the insert/edit link icon
11. Select the popup tab
12. Check javascript popup
13. Paste the image URL into Popup URL
14. Enter a name for the window
    • Usually a description of the photo
15. Enter the Width and Height
16. Enter where you wish popup window to popup
    • Usually c / c
17. Click the Update button
18. Save your changes and test the results.