A click on an item can open a link, the post, a lightbox over the page, or the item’s content in a box on the page itself. Which of these a click does is decided by the item’s skin: each layer of a skin (the image, an icon, the title) has its own action. The Click page of the grid editor shows what the skin does and sets up the lightbox and the box in the page.
Presets
The Click page starts with its presets:
| Preset menu | Choices |
|---|---|
| Lightbox pages through | This item only, All items, Filtered items on this page |
| Lightbox shows | Image, Video first, then image, Post content beside the image |
| Lightbox captions | No captions, Title, Title and description |
| Open in the page | Open above the grid |
What a click does
Below the presets, What a click does sums up the grid’s skin: its name and every layer that does something on click, such as “Icon → opens the lightbox” or “Title → opens the post”. Edit skin opens the skin in the skin editor, where you change a layer’s action (Items).
The lightbox
The row Lightbox holds:
| Setting | What it does |
|---|---|
| What the lightbox shows › Sources | An ordered list of what the lightbox can show: the featured image, a YouTube, Vimeo, Wistia or HTML5 video, an alternate image, the first image of the content, the post content, a Slider Revolution module, another grid, SoundCloud, an iframe. The lightbox shows the first ticked source the item has; drag the sources into your order. |
| Gallery › Pages through | Which items the lightbox’s arrows page through: This item only, All items, Filtered items (all pages), Filtered items (this page), The item’s content or a Content gallery. |
| Skip own media | Leaves out the item’s own media and shows only the other sources. |
| Gallery in address | A name (“group” on a new grid) under which the open item shows in the page’s address, so a link opens the lightbox at it. |
| Captions and space | The captions, Plain-text captions (without their HTML) and Space around the media. |
| Colours | Lightbox defaults or Own colours. |
| Slideshow autoplay | Autoplay and Time per slide. |
| Buttons › Order | The lightbox’s buttons, in this order. |
When the lightbox shows the post content, Image position and Image width set the post’s image beside the text. A setting that only works after another change is greyed, says why and offers Edit anyway (and a fix where there is one); when the skin opens nothing in the lightbox, the section says so and offers Edit skin and Edit anyway.
If another lightbox plugin should open the links instead, choose Another plugin under Lightbox in Global Settings › Images & video.
Open in the page
Instead of a lightbox, the item’s content can open in a box on the page: above the grid, below it, or wherever you put the box’s shortcode.
| Setting | What it does |
|---|---|
| What opens in the page › Sources | Like the lightbox’s: the post content, a video, an image or a Slider Revolution module, in your order. |
| Where the content opens | Above the grid, Below the grid or Shortcode; with Shortcode, put the Shortcode of the box on the page where the content should open. |
| Target element id | The id of the box on the page. |
| Scroll on load / Scroll Offset | The window scrolls to the box when it opens, leaving the offset free. |
| Buttons | Show Close Button, the buttons’ style and where they sit. |
The skin decides which layer opens the content in the page. While no layer does, the section is greyed with “Your skin opens nothing in the page.” and offers Edit skin and Edit anyway.
On the page
In new 4.0 grids:
- the lightbox opens as a dialog over the page. Visitors page through with the arrow keys or by swiping, and with the mouse wheel when Mouse Wheel is on (it is off on a new grid); Esc closes it, and the focus goes back to the link that opened it;
- its toolbar shows the buttons in the order set under Buttons;
- with a name in Gallery in address, the address of the page names the open item, so a link opens the lightbox at it;
- Slider Revolution 7 modules play in the lightbox and in the box in the page;
- the box in the page has real buttons and grows with its content.
Good to know
- Videos in the lightbox and in the grid itself: Video in grids.
- How the lightbox works with a keyboard and a screen reader: Accessibility and reduced motion.