This tutorial requires the Image Manager and AdvLink plugins. The entire process is simplified when using the Image Manager Extended, a subscription plugin

An image popup is typically launched from a thumbnail, or smaller version of the target image, but can be launched from a text link as well. If using a text link, skip to step 2.

1. Open the Image Manager and insert an image to be used as the thumbnail image.
2. Select the image, or text, and open AdvLink Enter the relative path (the path without your site address) into the URL field. You can use the File Browser to find the image
3. Type jcepopup in the Classes field in the Advanced Tab or select JCE Popup from the Class List if available, eg:
   
   
4. To add a title and/or caption to the popup, enter text in the Title field. To create a title and caption, separate them with a double colon, eg title::text
5. To create a gallery of images in the popup, assign each popup link to the same 'group' by giving each link the same rel attribute value. To this click the Advanced Tab and select (Add Value) from the Relationship Page To Target list. Enter the group name in the new field provided.
   
   
6. Click Insert.

Image Popup Parameters

An image popup can accept 3 parameters in the rel attribute. Parameters must be in the key[value] format and be separated with a semi-colon.

1. Click the Advanced Tab in AdvLink and select (value) from the Relationship Page To Target list.
2. Enter the parameters in the field provided.

• group[name] - Sets the popup group the image belongs to. This is the same as creating a group using step 5 above.
• caption[title::text] - Sets a caption for the popup to appear above or below the popup image. This gives the same result as step 4 above, but frees up the title attribute for the link element.
• title[text] - Sets the title attribute for the popup image.

Simple gallery using a table and 2 grouped images

You can hide a popup link by adding noshow to the class, eg: class="jcepopup noshow"

You can create a popup that opens automatically when the page loads by adding either autopopup-single (popups will open only once per page per browser session) or autopopup-multiple (popups will open every time the page loads) to the popup class, eg: class="jcepopup autopopup-single".
The popup link must have a unique id, eg: