The Pro version of Modals also allows you to a create and open a full-blown images gallery with arrow navigation.
You can achieve this by simply using a single modal tag with a gallery attribute holding the folder that contains your images.
By default, *all* the images found in the specified folder will be displayed in the modal gallery in alphabetical order, and the first image found will be shown in the content as a thumbnail. But you have several options to control the displayed images and thumbnails.
Limit/Order Images
If you only want certain images from the folder to show in the modal gallery, you can define them by using the images attribute.
Range of images
You can show a range of images by specifying the number of the first and last image you want to show. For example, to show only the first three:
Specific images
To show a selection of specific images only, simply list them separated by a comma. The modal gallery will also keep the order in which you list the images:
Random order
You can decide to show all images from the folder with a random order instead of alphabetical. This will also make thumbnails show in random order:
Include Subfolders
You can decide to also include images from all the subfolders of the given parent folder, by adding include_subfolders="true":
{modal gallery="images/gallery" include_subfolders="true"}{/modal}Advanced Filtering
For a more advanced control over the images shown, you can use the filter attribute, which allows you to filter images by matching part of the filenames.
This example only shows images from folder images/gallery that contain "berries":
{modal gallery="images/gallery" filter="berries" thumbnails="all"}{/modal}
The Filter attribute supports Regular Expressions. For example, to only show images from folder images/staff that start with 'team-accountancy-' or 'team-finance-':
{modal gallery="images/staff" filter="^team-(accountancy|finance)-"}{/modal}For more info on Regular Expressions: http://www.regular-expressions.info/reference.html
Thumbnails
Modals, by default, will automatically create and display thumbnail images as clickable links to the gallery.
To control number of displayed thumbnails, you can add a thumbnails attribute. Note that if you limited the images output by the gallery with the images or filter attributes, you will of course only be able to display thumbnails from that selection of images.
All thumbnails
To have thumbnails for all images included in the gallery in alphabetical order:
{modal gallery="images/gallery" thumbnails="all"}{/modal} You can also make all thumbnails show by default in all your modal galleries by enabling the "Show All Gallery Thumbnails" setting.
Range of thumbnails
To show only a certain amount of thumbnails, simply specify the number. For example, to show the first 3 thumbnails:
You can also have a range of thumbnails not starting from the start, by specifying the number of the first and last image you want to show. For example, to show from the 2nd to the 5th thumbnail:
Specific thumbnails
To have a specific image as a thumbnail, you can simply specify the desired image name:
Or for multiple images, a comma separated list of image names or thumbnail numbers:
Random thumbnail
To have a random image as a thumbnail:
All thumbnails in random order
You can show all thumbnails in a random order by combining the thumbnails attribute with the images attribute.
{modal gallery="images/gallery" images="random" thumbnails="all"}{/modal} Thumbnail dimensions
By default, the dimensions of the automatically created thumbnails will be based on your default settings. However, you can individually customize the width and height of the thumbnails for each specific gallery modal, by using the thumbnail-width and thumbnail-height attributes.
You don't need to specify both width and height attributes - you can also just specify one, and all thumbnails will be created maintaining its aspect ratio.
When you specify both width and height attributes, all thumbnails will be created with the exact width and height, meaning that if proportions are different, the image will be cropped to fill the specified dimensions.
Custom link (no thumbnail)
If you place anything between the modal tags, that content will be used as a link to open the gallery instead of a thumbnail. This can be text, or a custom image, or basically anything you want.
{modal gallery="images/gallery"}Click here{/modal} Start on a different image
By default, when opening the gallery via a text link (no thumbnail), it will start on the first image found in the gallery in alphabetical order.
If you want the gallery to start on a different image instead of the first image, add a first attribute to specify the desired image:
{modal gallery="images/gallery" first="bananas.jpg"}Click here{/modal}
To start on a random image, set the first attribute to random:
{modal gallery="images/gallery" first="random"}Click here{/modal} Slideshow
To make the gallery act like a slideshow that cycles through the images automatically, simply add slideshow="true" to the modal tag.
The Slideshow Speed can be set in the Modals plugin settings or with the attribute slideshowSpeed.
Images from different folders
What if you want to create a gallery modal but your images are not all in the same folder? You can do this as well, thanks to the "Grouping" feature that allows you to group multiple modals.
To create a gallery with your own specific images, create a modal tag for every image and then group the modals together by adding a group attribute to all modal tags.
{modal image="images/fruit/b/bananas.jpg" group="my-fruit-group"}{/modal}
{modal image="images/fruit/l/limes.jpg" group="my-fruit-group"}{/modal}
{modal image="images/fruit/s/strawberries.jpg" group="my-fruit-group"}{/modal} To create a slideshow on these custom galleries, you need to add slideshow="true" to the first modal tag in the group.
{modal image="images/fruit/b/bananas.jpg" group="my-fruit-slideshow"}{/modal}
{modal image="images/fruit/l/limes.jpg" group="my-fruit-slideshow"}{/modal}
{modal image="images/fruit/s/strawberries.jpg" group="my-fruit-slideshow"}{/modal} Titles & Descriptions
By default, Modals will convert the image filenames to Titles, and show them on top of the modal popup for each image.
But you can override image titles and alt attributes with your custom ones, as well as additional descriptions that will be displayed in the modal, by placing a data.txt file in the same folder where images reside.
The alt tag will use the title if not defined.
Here is an example of a data.txt file showing you the different possibilities:
apples[title]=My special title for the Apples image (thumbnail) apples[alt]=My alternate text for the Apples image (thumbnail)
apples[modal-title]=My separate title for the modal showing the Apples image apples[modal-alt]=My separate alternate text for the modal showing the Apples image apples[modal-description]=My separate description for the modal showing the Apples image
*[modal-description]=Base description that will show for all other images in the gallery