Web Development Documentation

Overview

You can link an image to a popup window that displays a larger version of the same image, another image, a PDF, or even a Joomla! article.

Option 1: Make a popup link to a Joomla! Article

The "Apply Now" button at right is an example of an image that links to an article in a popup window.

1) Add the button image.

1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window.

2) Link the image to the article.

1. Select the image you uploaded in Step 1.
2. Click the Insert/Edit Link button on the editor toolbar:
   
   
   
   
3. Under "Search...", click Content (see #1 below).
4. Click the name of the top-level category that contains the article you want to link to (see #2 below).
5. If your article is in a subcategory, click the name of the subcategory containing the article.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
6. Click once on the name of the article you want linked to the button.
   
   

3) Create the popup.

1. In the Link window, click the Popups tab (see #1 below).
2. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
3. Select "Internal Links" for the Media Type option (see #3 below).  This will display the article content without the surrounding elements such as the banner and navigation menu.
4. Click Insert (see #4 below) and then Save & Close the article.
5. Test the page to check the display.  If the window needs to be a different size, go back to the JCE MediaBox Popups options and adjust Dimensions (see #5 below). The first field after Dimensions is width in pixels; the second field is height in pixels. 
   
   

Option 2:  Make a popup link to a File or Image

The "Rutgers Day" image at right is an example of an image that links to a PDF file in a popup window.  If adding a popup to an existing image or file link, skip to step 5.

1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window.  If the image already exists in the article, copy the link from the URL field.
   
2. Select the image you uploaded in Step 1.
3. Click the Insert/Edit Link button on the editor toolbar (See screenshot under Option 1, 2b above).
4. If  the popup will display the full size version of an image that has already been inserted into the article, click it then the Link tool and copy the URL and continue the next step to add the popup.
   Otherwise, in the Link window, look to the right of the URL field for the "Browse" icon (it looks like a tiny piece of paper).  Click it and browse to the image or PDF that should open in the popup:
   
   
   
   
5. In the Link window, click the "Popups" tab (see #1 below).
6. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
7. [Recommended] Enter a short description of the image or the file in the "Title" and/or "Caption" fields.
8. [Optional] Set dimensions for popup (see #3 below). The first field after Dimensions is width in pixels; the second field is height in pixels. (You may want to do this if what will be displayed in the popup is very large).
9. Click the Insert button (see #4 below).
10. Save the article.