This tutorial requires the Image Manager and Link 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 also be launched from a text link. If you are using a text link, skip to step 2.
- Open the Image Manager and insert an image to be used as the thumbnail image.
- Select the image, or text, and open the Link dialog. Enter the relative path (the path without your site address) into the URL field. You can also use the File Browser to find the image.
- Click on the Popups tab and select JCE MediaBox Popups from the Popup Type list
- To add a title and/or caption to the popup, enter text in the Title and Caption fields.
- To create a gallery of images in the popup, assign each popup link to the same 'group' by giving each link the Group value.
- Set any other parameters needed for the popup.
- Popup Icon - Display a popup icon on the target image or text.
- Icon Position - Set the position of the popup icon.
- Dimensions - Set the width and height of the popup
- Autopopup - Set whether the popup should open automatically when the page loads. You will need to assign a unique ID to the link in the Advanced Tab.
- Hide Popup Link - Hides the popup link and child elements. Useful when creating image galleries launched from a single link.
- Media Type - Select Popup Media Type. This is crucial in determining how the popup will load. Some formats such as images and social media like Youtube and Vimeo etc. can be detected from the popup url by JCE MediaBox
- Parameters - Set additonal parameters.
- Click Insert.
A browser cookie is used to store the autopopup state - whether it has been opened already - when using Autopopup Single.
Example HTML created by these steps :
<a class="jcepopup" title="Desert" href="/images/desert.jpg" data-mediabox="1" data-mediabox-group="nature" data-mediabox-title="Desert" data-mediabox-caption="Picture of a desert"><img title="winter.jpg" width="200" src="/images/desert.jpg" alt="Winter" /></a>
Simple gallery using 2 grouped images