popups

popups

  • Creating a Popup Link to a file with JCE Editor Image Manager Extended

    Overview

    This page shows how to create a popup link from an image to a file with JCE Editor Pro's Image Button.  Note: This can also be done in the standard JCE Editor.

    Procedure

    Step 1: Click Insert/Edit Image button (the one with a star)

    JCE Editor Pro: "Insert/Edit Image" button (with star)

    Step 2: Select the image to be linked to the popup

    • Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane (see #1 below). If you are adding a new image, click the Upload button (see #2 below):

      JCE Editor: Image Manager Extended, "Folders" pane and "Upload" button
    • If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below). Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      "Upload" popup window

    • Once you have located or uploaded your image, select its filename from the "Name" pane:

      JCE Editor: Image Manager Extended, Select filename

    Step 3: Create the popup link

    • Select the "Popups" tab in "Image Manager Extended" (see #1 below)
    • For "Popup Type," select "JCE Mediabox" (see #2 below)
    • Browse to the folder containing the file that should appear in the popup window (see #3 below)
      • Note that you can upload a new file using the Upload button.
    • Enter a title for the file in the "Title" field (see #4 below)
    • Enter a caption for the file in the "Caption" field (see #5 below)
    • Click Insert once complete (see #6 below)
      JCE Editor: Image Manager Extended, "Popups" tab
    • Save & Close your article.  The image you selected in Step 2, when clicked, will link to a popup window displaying the file you selected in Step 3.

     

  • Creating a Popup Link to a file with JCE Editor Image Manager Extended (Joomla! 4)

    Overview

    This page shows how to create a popup link from an image to a file with JCE Editor Pro's Image Button.  Note: This can also be done in the standard JCE Editor.

    Procedure

    Step 1: Click Insert/Edit Image button (the one with a star)

    JCE Editor Pro: "Insert/Edit Image" button (with star)

    Step 2: Select the image to be linked to the popup

    • Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane (see #1 below). If you are adding a new image, click the Upload button (see #2 below):

      JCE Editor: Image Manager Extended, "Folders" pane and "Upload" button
    • If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below). Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      "Upload" popup window

    • Once you have located or uploaded your image, select its filename from the "Name" pane:

      JCE Editor: Image Manager Extended, Select filename

    Step 3: Create the popup link

    • Select the "Popups" tab in "Image Manager Extended" (see #1 below)
    • For "Popup Type," select "JCE Mediabox" (see #2 below)
    • Browse to the folder containing the file that should appear in the popup window (see #3 below)
      • Note that you can upload a new file using the Upload button.
    • Enter a title for the file in the "Title" field (see #4 below)
    • Enter a caption for the file in the "Caption" field (see #5 below)
    • Click Insert once complete (see #6 below)
      JCE Editor: Image Manager Extended, "Popups" tab
    • Save & Close your article.  The image you selected in Step 2, when clicked, will link to a popup window displaying the file you selected in Step 3.

     

  • Creating a Popup Link to an article, file, or image with standard JCE Editor

    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

    button applyThe "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:

      Joomla! 3.x: JCE Editor, "Insert/edit Image" button

    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.

      Joomla 3.x: Linking to content

    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 a workorder 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. 

      Joomla 3.x: Link popup window, "Popups" tab

    popup imageOption 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 windowIf 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:

      Joomla! 3.x: "Link" popup window, "Browse" icon

    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 a workorder 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.

      Joomla! 3.x: Link popup window, "Popups" tab options

     

  • Creating a Popup Link to an article, file, or image with standard JCE Editor (Joomla! 4)

    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

    button applyThe "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:

      Joomla! 3.x: JCE Editor, "Insert/edit Image" button

    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.

      Joomla 3.x: Linking to content

    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. 

      Joomla 3.x: Link popup window, "Popups" tab

    popup imageOption 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 windowIf 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:

      Joomla! 3.x: "Link" popup window, "Browse" icon

    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.

      Joomla! 3.x: Link popup window, "Popups" tab options

     

  • Link to Files on Box and Display in Popup

    Get the public link to the Box file

    General:  Be sure there is at least one other co-owner in your unit with full access to the files.

    1. Click the Share button on the right side of the file.
    2. Below Share Link, click the slider button for "Create shared link". Text will change to "Shared link is created" and a URL will appear.
    3. Underneath the URL, change the access from "People in your company" or "Invited people only" to "People with the link". 
    4. If the URL provided will work as it is, click Copy and move on to "Create link to the Box file" section. If a shortened or custom link is preferred, continue with next step in this section.

      box share link setup

    5. [optional]  Click "Link Settings".
    6. [optional] Enter a custom path with no spaces (12-30 characters).
    7. Click Save.
    8. Click Copy to copy the URL to the clipboard for the next step.

    Link to the Box file

    1. In the Joomla article, select the text or image to be linked and click "Insert/edit link" tool.
    2. Paste into the "URL" text box.
    3. Select "Open in new window" for Target. This is standard for links to content on external websites though not used if the link opens in a popup. (See optional "Set the link to open in a popup window" section.)

      link main

    4. Click Insert.
    5. Save and Close.

     

    Set the link to open in a popup window [optional]

    1. While still in the Insert/Edit link window, click the "Popups" tab.
    2. Select JCE MediaBox Popups in the Popup Type field.
    3. Choose External Links/Iframe in Media Type.
    4. Click Update or Save to save changes, whichever appears. If establishing the link initially,  Save will appear.  If the link is being modified, Update will show as the button text.  Both will save settings.

      link jce popup




  • Link to Files on Box and Display in Popup (Joomla! 4)

    Get the public link to the Box file

    General:  Be sure there is at least one other co-owner in your unit with full access to the files.

    1. Click the Share button on the right side of the file.
    2. Below Share Link, click the slider button for "Create shared link". Text will change to "Shared link is created" and a URL will appear.
    3. Underneath the URL, change the access from "People in your company" or "Invited people only" to "People with the link". 
    4. If the URL provided will work as it is, click Copy and move on to "Create link to the Box file" section. If a shortened or custom link is preferred, continue with next step in this section.

      box share link setup

    5. [optional]  Click "Link Settings".
    6. [optional] Enter a custom path with no spaces (12-30 characters).
    7. Click Save.
    8. Click Copy to copy the URL to the clipboard for the next step.

    Link to the Box file

    1. In the Joomla article, select the text or image to be linked and click "Insert/edit link" tool.
    2. Paste into the "URL" text box.
    3. Select "Open in new window" for Target. This is standard for links to content on external websites though not used if the link opens in a popup. (See optional "Set the link to open in a popup window" section.)

      link main

    4. Click Insert.
    5. Save and Close.

     

    Set the link to open in a popup window [optional]

    1. While still in the Insert/Edit link window, click the "Popups" tab.
    2. Select JCE MediaBox Popups in the Popup Type field.
    3. Choose External Links/Iframe in Media Type.
    4. Click Update or Save to save changes, whichever appears. If establishing the link initially,  Save will appear.  If the link is being modified, Update will show as the button text.  Both will save settings.

      link jce popup