Support Tutorials JCE MediaBox Create an Ajax or IFrame popup
Create an Ajax or IFrame popup PDF Print E-mail
Tutorials - JCE MediaBox
Wednesday, 16 July 2008 17:45

This tutorial requires the AdvLink plugin.
JCE MediaBox 1.x is required for this type of popup.

  1. Select some text or an image to apply the link to (you can use the Image Manager to insert the image).
  2. Open the AdvLink. Enter the relative path (the path without your site address) into the URL field if the link is to one on your site, either by hand or by using the Link Browser, or the full url if it is an external link (to another site).
  3. Type jcepopup in the Classes field in the Advanced Tab or select JCE Popup from the Class List if available, eg:

    classes
  4. Click on the Advanced Tab and enter text/html, text/xml or ajax in the Target MIME type field if the link is on your site, or iframe if the link is on an external site.
  5. To add this popup to a group of other popup items, add a group parameter (see Popup Parameters below)
  6. Add any required parameters including width and height (see Popup Parameters below)
  7. Click Insert.

Popup Parameters

An ajax/iframe popup can accept 4 standard parameters in the rel attribute, and ajax popups can accept additional style parameters. Parameters must be in the key[value] format and be separated with a semi-colon.

  1. Click the Advanced Tab in AdvLink and select (Add Value) from the Relationship Page To Target list.

    rel_example
  2. Enter the parameters in the field provided.
  • group[name] - Sets the popup group the popup 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.
  • width[640] - Sets the width of the popup content.
  • height[480] - Sets the height of the popup content.
  • Various media type specific parameters, eg: autostart[true];allowfullscreen[true]
  • To add additional inline-styling to the content of an ajax popup : styles[background-color:#FFFFFF;text-align:center]

A popup link can be hidden 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: id="popup1"

Last Updated on Thursday, 03 June 2010 16:38