X3 comes with a beautiful popup feature available for you to use within your content.
X3 uses the popup internally for galleries, but it is made available for you to use in your page content also. The X3 popup is perfect for image links, but cant also be used for custom links- and content.
To use the popup with your links, simply add the
data-popup attribute to your link.
Popup links use the zoom-in cursor on mouse-hover to emphasize that the link opens a popup.
To add a title for the image, just use
data-popup-title="title". When using this attribute, you don't need to set the data-popup attribute, because it is implicit.
The link feature is practical for loading embeddable content, like Youtube Videos.
The popup is optimized for images and embeddable content, but can also be used to open links.
Warning! Be cautious about using the popup for full websites. Some websites refuse to load inside an iframe because of restrictions, and you will have huge issues with scroll- and interface on touch-mobile devices. We recommend using the
data-popup-ignore-mobile attribute if you are loading full website links that require scroll (see details in advanced section).
You can use the popup to display inline content with the
Nothing wrong with using images inside your links ...
You can also group links so that you can navigate between them in the same popup.
... Optionally, if you can't or don't want to add all grouped links in the same container, use the
rel attribute to assign a group name.
A few more attributes for the ambitious.
Native X3 Gallery
Below, you can see the native X3 gallery displaying images from within this folder. The X3 gallery also uses a the popup feature, but with a slightly more advanced integration.