Creating Popup Images PDF Print E-mail
Documentation - Image Manager Extended
Tuesday, 08 May 2007 16:25
The Image Manager Extended can be used to effortlessly create popup images for your site by creating the code necessary to support Lightbox/Slimbox, Thickbox or JCE MediaBox style popups, in just a few clicks!It is assumed that you either have the JCE Utilities / MediaBox plugin installed and published, or some other plugin, extension or template that has Slimbox, Lightbox or Thickbox support
There are 3 methods for creating a popup -
  • Creating a popup for an image that has an associated thumbnail - This method assumes that the image to be used as the main popup image already has a thumbnailed version present in the thumbnail folder, either from the upload process or by using the Thumbnail function.
  • Creating a popup for an image that does not have an asscociated thumbnail - No thumbnail is present and one needs to be created using the Thumbnail function.
  • Creating a popup for an image using an alternate thumbnail image - No thumbnail is present and you wish to used a different  image as the thumbnail (this could be any image at all, located in any folder).

Creating a popup for an image that has an associated thumbnail

As stated above, this method assumes that a thumbnail already exists. You can check this by selecting the image (click to the right of its name), and checking to see if the thumbnail icon is a 'Create Thumbnail' icon or a 'Delete Thumbnail' thumb_delete.gificon. If it is the latter, a thumbnail exists, and should be located in the 'thumbnails' folder in the same directory as the image. Proceed by following these steps:

1.    Click the Popup Tab.
 
2.    Check the Enable checkbox.

3.    Select the 'Compatability Mode' - What type of popup are you using?
JCE Mediabox - the default choice. This requires that the JCE Utilities / MediaBox plugin is installed and published.
Thickbox - Requires JQuery and Thickbox
Lightbox / Slimbox - Requires a Lightbox or Slimbox plugin or the facility built into your template.
Window Popup - Not recommended, but a backwards compatability option to create JCE 1.0.x style standard window popups.
4.    Select the image that is to be used as the popup image by clicking on its name. A dialog will appear asking whether you would like   to use the image's associated thumbnail. Click 'Yes'.
imgmanager_popup_confirm.gif







5.     The URL field in the Popup tab will be filled the popup image's url, and the relevant fields in the Article Image tab will be filled with the thumbnail image's values.

6.     You can now add a Caption for the popup image by entering text in the Caption field.

A caption is a short desciption for the image that is displayed underneath the popup image in the popup itself. It should not be confused with the JCE Caption Plugin.
The Group field is used to associate image popups, thus creating a popup gallery, where the visitor can naviagte from one image to the next from within a single popup. To use this feature, all the images must be on the same page (or end up on the same page within the various Joomla! content items) and have the same Group name.
Example: I have created 3 popup images in my content item, and assigned them all the Group name of 'gallery'. When the visitor views any of the popups by clicking on any one of the images, navigation items are included in the popup allowing the viewer to move to the other images in the Group.

Creating a popup for an image that does not have an asscociated thumbnail

1.   Select the image to be used in the popup blicking to the right of the image's name.
2.   Click the 'Create Thumbnail' button thumb_create.gif select the desired values in the dialog that appears. The default values are usually adequate. Click 'OK'.
3.   Follow steps 1 to 6 above.

Creating a popup for an image using an alternate thumbnail image

The procedure for this method is quite different to the above two in that we must manually specify which is the popup image and which is the thumbnail image. It is however, relatively straight forward and only takes a few more clicks than the above methods!

With the 'Aricle Image' tab selected, click on the image name of the image that is to be the thumbnail, ie: the image that will be clicked to launch the popup.

1.    Click the 'Popup Image' tab.

2.    Check the 'Popup Image' checkbox.

3.    Select the 'Compatability Mode' - What type of popup are you using?

4.    Click on the name of the image that is to be the popup image, ie: the image that will be disaplayed in the popup.
If this image has an associated thumbnail, you will be asked whether you would like to use this thumbnail - Click 'No'.5.    If you wish, you can now fill in a Caption for the image, or assign it to a Group.


The final steps are the same for each one of these methods.

Assign values to  the Article Image if necessary (Vspace, Hspace, Align etc.)

Click 'Insert'

To remove an existing Popup, simply uncheck the Popup Image checkbox, then click the 'Update' button.
Last Updated on Tuesday, 03 May 2011 10:01
 

Search

Your Account



Tweets

JCE

@joomlablogger This appears to be a Joomla! 1.7 to 2.5 upgrade issue, not a JCE one

by JCE