Link - Lightbox / modal / popup, event triggering, smooth scrolling
In this article
There are more options at the link than you would first think. You can create framework specific linking option, lightbox and actions, for example to switch slides or to trigger animation events.
Where are the link options?
You can find the link option at your layers by going to their Content tab.
The link options are also available at the Slide, on its Content tab.
Framework specific links
You can search for links within your site by clicking on the
+ button next to the link field.
WordPress: In WordPress you can search and select your posts or pages to link to them.
Joomla: In Joomla you can search and select your articles to link to them.
Any URL you write there will be saved as-is. If you'd change your site URL later, you'll need to manually update the link.
You can find the Lightbox option at the link field by clicking on the
+ icon next to it.
Then go to the Lightbox tab in the popup.
Content list - One per line
You can insert either images, YouTube videos, Vimeo videos, MP4 videos or iframes in here to make them popup in a lightbox. If you want to show more contents, put one link into one line, and you will be able to switch between them with arrows.
If you're using WordPress then you can load a slider to the lightbox by entering the slider ID.
Lightbox doesn't load website address
- If your site uses SSL (so it's https not http) you can only use https links. Browsers don't load http content into https pages for security reasons.
- Some websites have custom HTTP headers which prevent their content from being loaded on other websites. So if you're loading another website into yours but it doesn't display, this can be the reason.
Titles - One per line
You can add a title to your lightbox in the second input area.
If you have chosen to show more contents, you can add autoplay to them, and they will automatically switch from one to the other after the given time.
💡 Slide backgrounds in Lightbox
Create a lightbox automatically from your slider's background images at the Slider settings → Slides tab.
Lightbox doesn't load website address
We are using iframes for the lightbox to show the url you entered. If your website uses https, then browsers will only load websites in iframes which are also on https.
Lightbox doesn't work on mobile phones
A lot of mobile phones have limitations about showing iframe content. Some of them won't show them at all, so you would see just an empty lightbox, while others are simply opening up the links.
This can result in having the links opened on a new tab. If you are using videos, like Vimeo or Youtube, then mobile phones are trying to open them up using Vimeo/Youtube applications, just if you don't have them installed on the phone, you can see as nothing happening and this will be the problem at you.
You can disable the Lightbox Videos In New Tab On Mobile option at the Global settings → General which would make your phone open up the lightboxes in the original way, but then you will have the problem described before. Sadly we don't have control over phones trying to use applications, so currently these are the options you have.
Private Vimeo video won't load
Private Vimeo videos should use this format: https://vimeo.com/12345678/1abc2d3e4f
so the url, where they can be reached.
You can find the Actions option at the link field by clicking on the
+ icon next to it.
Then go to the Actions tab in the popup.
Check out our tutorial video if you want to learn more about how to add actions.
There are 7 actions available:
Smooth scrolling to either one of these options:
- top - to the top of the page
- bottom - to the bottom of the page
- beforeSlider - right before the slider
- afterSlider - right after the slider
- previousSlider - to the previous slider
- nextSlider - to the next slider
- jQuery selector - to any element in your website, just give the jQuery selector of that element for example:
Example: if the slider ID is 5, the slider's HTML id is:
n2-ss-5so the jQuery selector is
You can use a slider's unique ID to scroll to it (when both sliders are on the same page). The id has the following syntax:
#n2-ss-[sliderid], and you can get the slider id like this. If your slider ID is 25 then you can use the following selector:
Scroll To action uses the
Focus offset - Top at Global settings to scroll below the top menu if it's a fixed menu.
Scroll to alias
Scrolls to a slider alias within the current page.
Go to slide
You can switch to another slide of the current slider, just write its number here. E.g. if you want to go to the second slide use
If you want to switch another slider's slide, check out this article.
The same as the Go to slide option, but this will switch to the previous slide, and you don't need to give an index number.
Same as the Previous slide, just it will go to the next slide.
At your layers' animations you can choose not to automatically show them, but to trigger them with events. If you put some event's name in here, the clicking of this layer will trigger the animation. Check out this article for more information about events.
Go to slide ID
You can switch to another slide, just give it's ID here. You can find out the slide id from the url of the page, when you are in your slide's editor. For example in this URL here the slide ID is 23:
https://example.com/wp-admin/admin.php?page=smart-slider3&nextendcontroller=slides&nextendaction=edit&groupID=0&sliderid=3&<span style="font-weight: 700;color:#1d81f9;">slideid=23</span>
You should check this part of the URL:
&slideid=23which contains the ID of the slide.
You can use this action to switch to a slide in a different slider which is on the same page as the slider with the Go to Slide ID action. But that slider cannot have Loading type - After page loaded.
HTML validator error message
The element [a] must not appear as a descendant of an element with the attribute [role=button].
So if you wouldn't want to receive that message in the HTML validator, only use links within the slide or within its layers, but not in both.