The popup related shortcodes can be divided into two groups. There are shortcodes that can be used in popup templates and display the components of the popup window (such as titlebar, close and fullscreen buttons, etc.) and there are other ones that help you to display a button or any other HTML element that opens a popup window. In the following sections the "popup opener" shortcodes will be described. For details about the popup template specific shortcode, please see the Popup Templates section.
There are two shortcodes that can be used to display a button or any HTML element opening a popup window, the popup_opener and the gallery_button shortcode. They are quite similar but while the gallery_button shortcode can only be used within overlays and designed to display a button, the popup_opener shortcode can be used anywhere on your site and makes it easier to create any HTML content that opens a popup window.
Furthermore, there is another difference between the popup_opener and gallery_button shortcodes.
You can create two types of popups in the Dottoro theme: "normal" popups and gallery popups.
Gallery popups have been designed to display galleries as popup slideshows while normal popups give you full control over the content of popup windows like pages and posts do (more on Popups and Popup Slideshows).
The popup_opener shortcode allows you to open a normal or gallery popup while the gallery_button shortcode can only be used to open a gallery popup.
Allows you to add any HTML content to a page or post that opens a popup window. Just put your content into the popup_opener shortcode and clicking on it will open a popup window.
By default, the popup_opener shortcode opens the default gallery of the current post or page in a popup slideshow, but it can be used to open not just popup slideshows but also "normal" popup windows.
| Attributes: | |
|---|---|
| General attributes | |
| preloader_anim | Specifies whether to show a preloader animation while the popup is loading (true | false). Default is true. |
| tag | If the nested_shortcode attribute is not specified, the popup_opener shortcode puts the content into a "div" element. The "tag" attribute allows you to change the tag name of this element. |
| nested_shortcode |
Specifies the tag name of the shortcode nested into the popup_opener shortcode that should open the popup window.
By default, the popup_opener shortcode puts its content into a wrapper element and listens the click event of the wrapper element to open the popup.
In most cases, this provides sufficient flexibility, but for instance, if you want to create a button with the [button] shortcode that opens a popup, then a wrapper around the button is totally unnecessary.
|
| title | Specifies a tooltip for the popup opener. The tooltip is displayed when the user moves the mouse pointer over the popup opener. |
| translate |
Specifies the domain to be used to translate the text of the title attribute (above).
The default is 'dottoro_theme' which is the text domain of the Dottoro theme.
An empty string means that no translation is required.
This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Dottoro theme, or if you want to prevent the translation of the visit site text. For further details, please read I18n for WordPress Developers. |
| Attributes for normal popups | |
| popup_id |
Specifies the identifier of the popup window that should be opened when the user clicks on the popup opener.
This attribute only needs to be specified if you want to open a "normal" popup window not a gallery popup (popup slideshow). If this attribute is set, the attributes for gallery popups (see below) will be ignored. To get the identifier of a popup, go to Popups » Popups, click on the popup and take a look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier. For further details about popup windows, see Popups. |
| load_type |
Specifies whether the popup window specified by the popup_id attribute above should be preloaded or not.
Possible values:
Default is 'ajax'. For further details, please see Preloading Popups. |
| Attributes for gallery popups (popup slideshows) | |
| galleries |
Comma separated list of galleries that should be displayed in the popup slideshow.
For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of the post, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of the post. Additionally, you can also use the post_id:gallery_name syntax to refer to a gallery of another post or a global gallery. For instance, "23:gallery1" refers to the "gallery1" gallery of the post with id of 23, "0:gallery1" refers to the "gallery1" global gallery. Finally, there is a special value: "_default", that refers to the default gallery of the post. The default value of the galleries attribute is "_default". |
| gallery_popup |
Specifies the identifier of the gallery popup (popup slideshow) that should be opened when the user clicks on the popup opener.
To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup. If the gallery_popup attribute is not set, the (first) gallery specified by the galleries attribute above determines the gallery popup (see Gallery Popup option of a gallery). For further details, please see Popup Slideshows. |
| start_idx | Specifies the index of the slide the popup slideshow should start with. Default is 0. |
Displays a button that opens a popup window. This shortcode can only be used in Overlays.
| Attributes: | |
|---|---|
| General attributes | |
| icon |
Selects an icon for the gallery button (magnifier | photo | player | vimeo | youtube | flash | readmore | external). Default is "magnifier".
An empty string means no icon will be used.
Please note that if the [gallery_button] shortcode has HTML content, no icon will be shown.
|
| title | Specifies a tooltip for the button. The tooltip is displayed when the user moves the mouse pointer over the button. |
| translate |
Specifies the domain to be used to translate the text of the title attribute (above).
The default is 'dottoro_theme' which is the text domain of the Dottoro theme.
An empty string means that no translation is required.
This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Dottoro theme, or if you want to prevent the translation of the visit site text. For further details, please read I18n for WordPress Developers. |
| Attributes for gallery popups (popup slideshows) | |
| galleries |
Comma separated list of galleries that should be displayed in the popup slideshow.
For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of the post, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of the post. Additionally, you can also use the post_id:gallery_name syntax to refer to a gallery of another post or a global gallery. For instance, "23:gallery1" refers to the "gallery1" gallery of the post with id of 23, "0:gallery1" refers to the "gallery1" global gallery. Finally, there is a special value: "_default", that refers to the default gallery of the post. The default value of the galleries attribute is "_default". |
| gallery_popup |
Specifies the identifier of the gallery popup (popup slideshow) that should be opened when the user clicks on the button.
To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup. If the gallery_popup attribute is not set, the (first) gallery specified by the galleries attribute above determines the gallery popup (see Gallery Popup option of a gallery). For further details, please see Popup Slideshows. |
| start_idx | Specifies the index of the slide the popup slideshow should start with. Default is 0. |
Click on the "Add Media" button above the WordPress content editor to insert an image to the content of your page/post.
When you have selected the image in the media dialog, you will find an Overlay option on the right hand side of the dialog.
Select an overlay for your image that contains a [gallery_button] shortcode. For instance, the "Gallery" overlay (more on Overlays).
Finally, click on the "Insert Into Post" button.
You are done. When the mouse hovers over the image an overlay will be shown and clicking on the gallery button opens a popup slideshow displaying the default gallery of the post.
Similar as in the previous example, select an overlay for your image on the media dialog. You will find a "Popup Galleries" option below the Overlay option. Here you can specify the name of the gallery you want to display in the popup slideshow.
Put the text into a [popup_opener] shortcode.
Something like this:
[popup_opener]Open Popup Slideshow[/popup_opener]
[popup_opener galleries="gallery1"]Open Popup Slideshow[/popup_opener]
Put the button into [popup_opener] shortcode and set the nested_shortcode attribute to "button" to avoid the creation of a wrapper element around the button.
Something like this:
[popup_opener nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]Specify the id of your popup from the popup_opener shortcode (23 in the example):
[popup_opener popup_id="23" nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]You have two options:
[popup_opener nested_shortcode="image_options"][image_options ...]<img .../>[/image_options][/popup_opener][popup_opener class="image_holder"]<img .../>[/popup_opener]
You should do the same as in Example 5, but the code to the post template used for you blog posts.
Something like this:
[popup_opener nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]