On this page
System plugin
Styling
| Theme | Select the default theme. Options: Dark, Light, Custom, ---, (Only available in PRO version), Automatic (Default Dark), Automatic (Default Light), Classic |
| Open | Select the effect to use when opening the modal. Options: None, Fade, Zoom |
| Close | Select the effect to use when closing the modal. Options: None, Fade, Zoom |
| Next | Select the effect to use when navigating to the next item in a group or gallery. Options: None, Fade, Zoom, Slide |
| Previous | Select the effect to use when navigating to the previous item in a group or gallery. Options: None, Fade, Zoom, Slide |
| Width | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). Leave empty to use automatic sizing. |
| Height | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). Leave empty to use automatic sizing. |
| Dimensions include title | Select to have the width / height be set on the container that includes the title and the description of the modal. Options: No, Yes |
| Position | Select the position of the modal. Options: Top Left, Top, Top Right, Left, Center, Right, Bottom Left, Bottom, Bottom Right |
| Load Stylesheet | Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet. Options: No, Yes |
Media
| Resize Images | If selected, resized images will be automatically created for images if they do not exist yet. The resized images will be created using below settings. Options: No, Yes |
| Resize Method | Set the type of resizing. Scale The resized image will be resized to the maximum width or height maintaining its aspect ratio. Crop The resized image will always have the set width and height. Options: Scale, Crop |
| Scale using fixed... | Select whether to resize images using the maximum width or height. The other dimension will be calculated based on the aspect ratio of the original image. Options: Width, Height |
| Width | Set the width of the resized image in pixels (ie 320). |
| Height | Set the height of the resized image in pixels (ie 180). |
| Create Thumbnails | If selected, thumbnails will be automatically created for images if they do not exist yet. The thumbnails will be created using below settings. Options: No, Yes |
| Add Itemprop | If selected, an itemprop="image" attribute will be added to the thumbnail image tag. Options: No, Yes |
| Folder | The folder containing the resized images. This will be a subfolder of the folder containing your original images. |
| JPG Quality | The quality of the resized images. Choose from Low, Medium or High. The higher the quality, the larger the resulting files. This only affects jpeg images. Options: Low, Medium, High |
| Max Age | The maximum age of the resized image in days. If the resized image is older than this, it will be recreated. Set to 0 to never recreate the resized image if they already exist. |
| Use Retina Images | If selected, double size images will be created and used for retina displays. Options: No, Yes |
| Retina Pixel Density | The pixel density of retina displays. This is the density at which the double sized retina image is used. |
| Auto Titles | If selected, the title will automatically be set based on the file name. This only applies to media files. Options: No, Yes |
| Case Auto Titles | Select the way the auto title should be cased. Options: None, lowercase, UPPERCASE, Uppercase first letter, Titlecase (Uppercase All Words), Smart Titlecase (No Uppercasing of Certain Words) |
| Lowercase Words | A comma separated list of words of which the first word should be lowercase in the auto titles. |
| Show All Gallery Thumbnails | If selected, all thumbnails in the given gallery folder will be automatically shown. Options: No, Yes |
| Thumbnail Separator | Set the separator html placed between the thumbnails shown for galleries. By default this is a space. Enter {none} to have no spacing between images. |
| File Filter | The filter (Regular Expression) used to find the image files in the given gallery folder. |
| Auto Group | Select to automatically group certain filetypes to create series / galleries. Options: No, Yes |
| URL/File Filter | The filter (Regular Expression) used to define which URLs/file types to group automatically. |
| Auto Slideshow | If selected, adds an automatic slideshow to a content group / gallery. Options: No, Yes |
| Slideshow Interval | The time each modal should show before going to the next (in milliseconds). |
| Resume | Select to make the slideshow resume after a certain time after it has stopped. The slideshow stops when interacting with the modals. Options: No, Yes |
| Resume Timeout | The time to wait before resuming the slideshow (in milliseconds). |
| Lazy Loading | If selected, the images generated by Modals will get a loading="lazy" attribute. Options: No, Yes |
| Image Zoom | If selected, enables the ability to zoom in on images in ctrl+scroll or cmd+scroll. Options: No, Yes |
| Media File Types | A comma separated list of file types to interpret as media files. |
Auto-Convert
| Auto-Convert | If selected, all links to external sites will be converted to modal popup links. Options: No, Yes |
| Class names | A comma separated list of class names. Images that have any of the defined class names will be converted to a modal popup gallery. |
| Internal Links | If selected, all links to internal sites will be converted to modal popup links. Options: No, Yes |
| External Links | If selected, all links to external sites will be converted to modal popup links. Options: No, Yes |
| Filetypes | A comma separated list of filetypes. Links that point to any of the defined filetypes will be converted to modal popup links. |
| URL matches | Enter (part of) the URLs to match. Use a new line for each different match. |
| Use Regular Expressions | Select to treat the value as regular expressions. Options: No, Yes |
| Exclude URLs | A comma separated list of (part of) URLs to exclude. |
| Use Title Attribute | Select to use the title attribute in the image tag as the title or description of the modal popup. Options: No, As Title, As Description |
| Use Alt Attribute | Select to use the alt attribute in the image tag as the title or description of the modal popup. Options: No, As Title, As Description |
Behaviour
| Enable Keyboard Navigation | Enable keyboard navigation for the modal popups. Use the left and right arrow keys to navigate through the modal popups. Use the escape key to close the modal popup. Options: No, Yes |
| Enable Scroll Navigation | If selected, enables the ability to scroll through the items in a group or gallery using the mouse wheel. Options: No, Yes |
| Show Close Button | Show a close button to close the modal. Options: No, Yes |
| Close on Outside Click | Close the modal when clicking outside of it. Options: No, Yes |
| Show Countdown | Select to show a countdown timer before the modal closes (when using the autoclose option) or when the next modal popup opens (when using slideshows). Options: No, Yes |
| Pagination | Select to show the pagination as buttons or text when using groups or galleries. Options: None, Buttons, Text |
| Divider | The divider between the slide number and the total number of slides. |
| Pagination as Images | Select to show the pagination as small images when using galleries. Options: No, Yes |
| Open count based on | Select whether to base the open count on the visits on entire website or on specific page (URL). The open count is used when using the open="..." attribute. Options: Website (Cookies), Page (Cookies), Website (Session) |
| Cookie Lifetime | The lifetime of the cookie (in minutes) used to determine the open count. Set to 0 to have no expiration time, the browser cookie will then be kept till the user removes it manually. |
| Cookie ID | Option to set a unique cookie ID for the open count |
| Disable on Narrow Screens | If selected, the modal popup will be disabled on narrow screens. Options: No, Yes |
| Base on Width of | Select the element to base the width on. Options: Window, Screen |
| Break Point | The width in pixels the screen is considered as wide. |
Editor Button Options
| Button Text | Set the text to show in the button. You can use a language string. |
| Enable in frontend | If enabled, it will also be available in the frontend. Options: No, Yes |
Tag Syntax
| Modal Tag | The word used for the modal tags. You can change the word if you are using another plugin that uses this tag syntax. |
| Modal Content Tag | The word used for the modal content tags used to define content for modal links that open by id. You can change the word if you are using another plugin that uses this tag syntax. |
| Tag Characters | The surrounding characters of the tag syntax. Note: If you change this, all existing tags will not work anymore. Options: {...}, [...], «...», {{...}}, [[...]], [:...:], [%...%] |
Advanced
| Sub Template | This is the sub template used for the internal pages in the modal popup windows. There will have to be a php file with this name in your templates folder or otherwise in the system templates folder. |
| Disable on Components | Select in which frontend components NOT to enable the use of this extension. |
| Remove in Disabled Components | If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact. Options: No, Yes |
| Enable in administrator | If enabled, the plugin will also work in the administrator side of the website. Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it. Options: No, Yes |
| Disable in Sourcerer | Select to disable the plugin inside Sourcerer tags. Options: No, Yes |
| Place HTML comments | By default HTML comments are placed around the output of this extension. These comments can help you troubleshoot when you don't get the output you expect. If you prefer to not have these comments in your HTML output, turn this option off. Options: No, Yes |
| Add Redirect Script | If selected, a redirect script will be added to the modal pages that will make the page reload as a normal page when not opened in a modal window. Options: No, Yes |
All Tag Attributes
Attributes override the corresponding global setting for one {modal} tag. Canonical hyphenated names are shown first; accepted compact aliases are listed in the descriptions.
url="..." | URL to open. Aliases: href, link, src. |
title="..." | Modal title. |
description="..." | Description shown with the modal title. |
class="..." | Class added to the trigger link. |
classname="..." | Class added to the modal. Alias: class-name. |
fullpage="..." | Set to true to load an internal URL as a complete page. |
iframe="..." | Force iframe handling. |
auto-titles="..." | Enable automatic titles. |
keyboard-navigation="..." | Override keyboard navigation for this link. Alias: keyboardnavigation. |
text="..." | Inline text to open. |
html="..." | Inline HTML to open. |
content="..." | A {modalcontent} reference or an element ID. |
article="..." | Joomla article ID, alias, or title. |
image="..." | Image to open. Alias: img. |
vimeo="..." | Vimeo video ID. |
youtube="..." | YouTube video ID. |
autoplay="..." | Enable video autoplay. |
open="..." | Set to true to open on page load or once to open once per visitor. |
open-delay="..." | Delay automatic opening in milliseconds. Alias: delay. |
auto-close="..." | Close automatically after the specified milliseconds. Alias: autoclose. |
show-close-button="..." | Show or hide the close button. Aliases: close-button, closebutton, showclosebutton. |
close-on-outside-click="..." | Allow closing by clicking outside. Aliases: overlay-close, overlayclose, closeonoutsideclick. |
id="..." | Modal ID. For example, id="my_example" can be opened with ?modal=my_example. |
group="..." | Group links under one name. |
gallery="..." | Gallery folder. Alias: galery. |
images="..." | Gallery image selection. |
thumbnails="..." | Thumbnail selection. Aliases: thumbnail, thumb, thumbs. |
first="..." | First gallery image. |
gallery-showall="..." | Show all gallery thumbnails. Aliases: showall, show-all. |
gallery-separator="..." | Separator between gallery thumbnails. Alias: separator. |
gallery-filter="..." | Regular-expression gallery file filter. Alias: filter. |
gallery-include-subfolders="..." | Include gallery subfolders. Alias: include-subfolders. |
thumbnail-width="..." | Generated thumbnail width. Aliases: thumbwidth, thumbnailwidth. |
thumbnail-height="..." | Generated thumbnail height. Aliases: thumbheight, thumbnailheight. |
thumbnail-add-itemprop="..." | Add image itemprop metadata. Aliases: itemprop, add-itemprop. |
slideshow="..." | Use true or a millisecond interval to enable the slideshow. |
show-countdown="..." | Show the close countdown. Aliases: countdown, showcountdown. |
pagination="..." | Group or gallery pagination. |
width="..." | Modal width. |
height="..." | Modal height. |
theme="..." | Theme override. |
position="..." | Modal position. |
navigation="..." | Show group navigation. |
scroll-navigation="..." | Use scroll navigation. Alias: scrollnavigation. |
zoom-navigation="..." | Use zoom navigation. |
image-zoom="..." | Enable image zoom. Alias: imagezoom. |
image-lazy-loading="..." | Enable lazy image loading. Aliases: lazy-loading, lazyloading. |
enable-page-scrolling="..." | Allow page scrolling while open. |
open-effect="..." | Opening effect. Alias: effect-open. |
close-effect="..." | Closing effect. Alias: effect-close. |
next-effect="..." | Next-item effect. Alias: effect-next. |
prev-effect="..." | Previous-item effect. Alias: effect-prev. |
on-open="..." | Callback before opening. Alias: onopen. |
on-load="..." | Callback before loading content. Alias: onload. |
on-loaded="..." | Callback after content loads. Aliases: onloaded, on-complete, oncomplete. |
on-opened="..." | Callback after opening. Alias: onopened. |
on-close="..." | Callback when closing starts. Aliases: onclose, on-cleanup, oncleanup. |
on-closed="..." | Callback after closing. Alias: onclosed. |
Iframe Attributes
| Attribute | Description |
|---|---|
iframe-class="..." | Add a CSS class to the iframe element. This does not style the page inside the iframe. |
iframe-title="..." | Set the iframe's accessible title. If omitted, the modal title is used. |
See URLs for an example.
Title and Description Positions
Use title-position and description-position to place the title and description around the modal content. The defaults are top for the title and bottom for the description.
Use top / bottom for a vertical layout, or left / right for a horizontal layout. When showing both a title and description, keep both positions in the same orientation.
See Title & Description for an example.