Link - Lightbox / modal / popup, event triggering, smooth scrolling

Where are the link options?

Layers

You can find the link option at your layers by going to their Content tab.

Slide

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.

⚠️ Warning: There are no customization options for the lightbox! It can only look and work as it does. If you want more specific behavior or display, use a lightbox plugin or extension!

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.

Autoplay duration

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.

Action - Pro

You can find the Actions option at the link field by clicking on the + icon next to it.

Then go to the Action 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:

1

Scroll to

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: #header
Example: if the slider ID is 5, the slider's HTML id is: n2-ss-5 so the jQuery selector is #n2-ss-5.

💡 Tips

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: #n2-ss-25 .

3.4.1.5 The Scroll To action uses the Focus offset - Top at Global settings to scroll below the top menu if it's a fixed menu.

2

Scroll to alias

Scrolls to a slider alias within the current page.

3

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 2.

If you want to switch another slider's slide, check out this article.

4

Previous slide

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.

5

Next slide

Same as the Previous slide, just it will go to the next slide.

6

Slide event

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.

7

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=23 which 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.

Possible issue - HTML validator error message

The element [a] must not appear as a descendant of an element with the attribute [role=button].

This message appears, because you are using a link at both on the slide or row or col, and also on a layer inside it.

By default, in website development you cannot have a link inside another link, because if you click on the inner element's link, browsers couldn't define which link should open. But we made our code in a way, that this would be optional too, that when you click on a layer, its link will be used, while if you click anywhere else on the slide, the slide's link will be triggered. When the slide has a link, it has to contain "role=button" attribute because of accessibility reasons, that people who need screen readers, can only identify JavaScript created links with this attribute.

So if you wouldn't want to receive that message in the HTML validator, only use links within layers or on its container element, but not in both.

Lightbox video options

Use original

Our codes try to identify any youtube|vimeo|dailymotion|kickstarter video, and then use its "embed" version, to display it within the lightbox. For example from this url:

https://www.youtube.com/watch?v=3PPtkRU7D74

this will be generated:

https://www.youtube.com/embed/3PPtkRU7D74?fs=1&wmode=opaque&autoplay=1&rel=0&enablejsapi=1

The problem you could have is, that if you want to customize your video by adding some sort of parameter to it, by default you cannot. But you could add "original:" before your video url:

original:https://www.youtube.com/embed/3PPtkRU7D74?mute=1&autoplay=0

and then that exact url will be used! So you should enter the "embed" url in this case.

Mute Youtube video

Videos have a ton of autoplay limitations, like you cannot autoplay a video, unless if it is muted. Because of this, we added an option for Youtube videos, that you can pass mute=1 parameter with them:

https://www.youtube.com/watch?v=3PPtkRU7D74&mute=1

Our code automatically adds "autoplay=1" parameter to embed videos, but this "mute" parameter is required, if you want the video to autoplay on browsers, where it is possible.