On this page
  1. Slideshow
  2. Auto-Converted Modals

Modals also makes it possible to group multiple modal popups, to allow navigation between different modals or display them in sequence.

To group different types of modals created with the modal tags, you can do so by giving a group attribute with the same value to all of them. This will give you arrow-navigation to the different links inside the modal popup.

  1. Internal url
  2. External url
  3. Inline content
  4. Image
  5. Video
{modal url="sample-articles/my-article" group="example1"}Internal url{/modal}
{modal url="https://www.openstreetmap.org/export/embed.html?bbox=-4.581298828125001%2C48.94415123418794%2C13.765869140625002%2C54.95238569063361&layer=mapnik" group="example1"}External url{/modal}
{modal html="This text is entered right inside the modal tag." group="example1"}Inline content{/modal}
{modal image="images/fruit/bananas.jpg" group="example1"}Image{/modal}
{modal youtube="OiYjoaHIWyc" width="560" height="315" group="example1"}Video{/modal}

Slideshow

If you would like the grouped modals to cycle automatically, you can do so by adding a slideshow="true" attribute to every modal tag in the group. You can also hide the navigation arrows with navigation="false", making the modals display in sequence without input from the visitor.

  1. Internal url
  2. External url
  3. Inline content
  4. Image
  5. Video
{modal url="sample-articles/my-article" group="example2" slideshow="true" navigation="false"}Internal url{/modal}
{modal url="https://www.openstreetmap.org/export/embed.html?bbox=-4.581298828125001%2C48.94415123418794%2C13.765869140625002%2C54.95238569063361&layer=mapnik" group="example2" slideshow="true" navigation="false"}External url{/modal}
{modal html="This text is entered right inside the modal tag." group="example2" slideshow="true" navigation="false"}Inline content{/modal}
{modal image="images/fruit/bananas.jpg" group="example2" slideshow="true" navigation="false"}Image{/modal}
{modal youtube="OiYjoaHIWyc" width="560" height="315" group="example2" slideshow="true" navigation="false"}Video{/modal}

The Slideshow Speed can be set in the Modals plugin settings, or with the attribute slideshowSpeed.

Auto-Converted Modals

You can also group multiple auto-converted links or images by adding to the html tag of all elements a data-modal-group attribute with the same value.

For example, the three elements below are automatically converted to modal popups, and grouped together via a data-modal-group="example" attribute.

  1. My Custom Modal Link 1
  2. My Custom Modal Link 2