If you have a large image that doesn't fit into the 500px width, you can add a popup image. The Popup image functions allows you to put a smaller, thumbnail image on the page. This image has a magnifying glass icon on it. When the users clicks the thumbnail, the larger image is displayed.

Important - This procedure requires that you have JCE Content Editor ( http://www.joomlacontenteditor.net/ ) and JCE Utilities installed.

  1. In an open article, add a new paragraph.
    To add a new paragraph, put your cursor at the end of an existing paragraph and click Enter. If the paragraph is a heading 1, 2, etc, on the Format menu, click Paragraph.

    Joomla JCE Content Editor Format Menu
  2. With your cursor in the new, blank paragraph, click Insert/Edit Image.
    Joomla displays the Insert/Edit Image screen.

    Important - If you want the image to float to the left or right of text, place your cursor in the text paragraph where you want the float to begin.

    JCE Joomla Content Editor Insert/Edit Image Screen
    Insert/Edit Image Screen
  3. Click the Popup tab.
  4. In the Popup Image section at the top of the screen, select the Enable.
  5. Click the image you want to use.

    Note - If you want to upload an new image, click Upload and then navigate to the file on your local machine.
  6. Click the Create Thumbnail button.
    Joomla creates a thumbnail image.
  7. Again, click the image you want to use.
    Joomla displays the following message: Use Associated Thumbnail?
  8. Click Yes.
  9. Click the Advanced tab.
  10. From the Class List, select one of the following styles:

    - If you can the thumbnail positioned below the proceeding paragraph, select img-border

    - If you want the thumbnail to positioned to the left of the paragraph text, select img-border-fl

    - If you want the thumbnail to positioned to the right of the paragraph text, select img-border-fr

    Note:     If you don't have the styles above, add the css styles in this img-styles.zip file to the top of your template.css file. Once you add these to the top of your template.css file, you will probably need to delete your browser cache so they will show up in the Joomla Editor Styles list.
  11. Click Insert and then click Apply.
  12. View the page in your browser to test the popup image.

Additional information