Lightbox Popup
Lightbox is a popup having a background overlay and a content box to display contents.
To create a lightbox popup, please do the following steps.
To create a lightbox popup, please do the following steps.
Click on the create popup link. In this page, you can add a name to the popup.
Now select ‘Lightbox’ as display layout.
Now select ‘Lightbox’ as display layout.
You can enter the lightbox content in the content section. It contains a feature of showing referrer messages.
If you want to display the referrer message, select that option. Otherwise select ‘NO’.
This is used to display some predefined messages for referred users (users referred from other sites).
Consider if you want to display a particular message to users who came to your site from another referrer site say google.
You can display a special message like “Hey googler, welcome to our site”, to those users who came from google.
For yahoo users, you can set another message and so on.
So the referrer messages are special messages for the referred users.
If you have enabled this option Show referrer messages?, the referred users will get the referrer messages and others will get the content added here(given below).
Consider if you want to display a particular message to users who came to your site from another referrer site say google.
You can display a special message like “Hey googler, welcome to our site”, to those users who came from google.
For yahoo users, you can set another message and so on.
So the referrer messages are special messages for the referred users.
If you have enabled this option Show referrer messages?, the referred users will get the referrer messages and others will get the content added here(given below).
Content : This is the actual content of the lightbox. You can enter anything here like text, image, subscription form, video, audio etc.
We are using the FCKeditor in the XYZ Popup script and so you can see the visual as well as the HTML formats of the content.
We are using the FCKeditor in the XYZ Popup script and so you can see the visual as well as the HTML formats of the content.
Position Settings
Here we can set the position of the lightbox in your webpages.
There are 2 options for positioning the lightbox, predefined settings and manually edit settings.
In the predefined settings, you can select one position from the predefined 9 positions.
Here we can set the position of the lightbox in your webpages.
There are 2 options for positioning the lightbox, predefined settings and manually edit settings.
In the predefined settings, you can select one position from the predefined 9 positions.
You can place the lightbox in the top left corner of the webpage, on left center, on bottom left corner, on bottom center,on bottom right corner, on right center, on top right corner, on top center and the absolute center of the webpage.
Also you can set the height and width of the lightbox in percentage as well as in pixel values.
In the manually edit position setting, you can select the display position.
Also you can set the height and width of the lightbox in percentage as well as in pixel values.
In the manually edit position setting, you can select the display position.
The 4 display positions in the manually edit settings are top left, top right, bottom left and bottom right.
For the top left position, you can set the top coordinate and left coordinate.
Top coordinate is the distance of the lightbox from top of the webpage and left coordinate is the distance from left side of the webpage.
The width and height are same as that in the predefined position settings.
For the top left position, you can set the top coordinate and left coordinate.
Top coordinate is the distance of the lightbox from top of the webpage and left coordinate is the distance from left side of the webpage.
The width and height are same as that in the predefined position settings.
Display Logic Settings
This section allows us to select the lightbox display logic.
We can display the lightbox based on delay, number of pages browsed or both.
Lightbox display logic – This is the logic how to display the lightbox in our webpages.
There are 3 options.
1. Based on delay
2. Based on number of pages browsed
3. both
In the “Based on delay” logic, the lightbox will appear after a delay. You can set this delay.
In the section “Delay in seconds before rendering” you can enter the delay in seconds.
This section allows us to select the lightbox display logic.
We can display the lightbox based on delay, number of pages browsed or both.
Lightbox display logic – This is the logic how to display the lightbox in our webpages.
There are 3 options.
1. Based on delay
2. Based on number of pages browsed
3. both
In the “Based on delay” logic, the lightbox will appear after a delay. You can set this delay.
In the section “Delay in seconds before rendering” you can enter the delay in seconds.
If it is “0(zero)” the lightbox will appear without any delay.
In the “Based on number of pages browsed” logic, the lightbox will appear after the user browsing some pages entered in “Number of pages to browse before rendering“.
In the “Based on number of pages browsed” logic, the lightbox will appear after the user browsing some pages entered in “Number of pages to browse before rendering“.
In the “both” option, the lightbox will appear after a particular delay and after the user browsed some pages.
Also if the lightbox content is larger than the window, we can hide the extra content or allow a scrollbar.
You can select your option for “If content is larger than window?”
Target Device – You can target the lightbox in your website for users using different devices. The possible devices are desktop/laptop and mobile/tablet. You can select the target devices here.
If you have selected all devices, the lightbox will display in all these devices.
You can select your option for “If content is larger than window?”
Target Device – You can target the lightbox in your website for users using different devices. The possible devices are desktop/laptop and mobile/tablet. You can select the target devices here.
If you have selected all devices, the lightbox will display in all these devices.
Display trigger – We can display the lightbox on loading of the page or when clicking any space or a particular location in a page.
When we select “On Load”, the lightbox will appear when the loading of the page completed.
When we select “On Load”, the lightbox will appear when the loading of the page completed.
If the selected trigger is “On Click”, the lightbox will appear only when the user click on the page based on the trigger element.
There is an option “Display onclick trigger method“.
You can select any one of the options “on first click” or “on every click”.
If you selected the value “on first click”, the lightbox will appear only on the first click in the element/page content.
If the selected option is “on every click”, the lightbox will appear on every click on the element/page content.
Trigger Element- If you leave this empty, lightbox will trigger when anyone clicks on body.
Otherwise you can specify the element which when clicked must trigger lightbox. You can specify any of the formats below.
tagname => eg: img
classname => eg: .myclass
id => eg: #myid
If you are using a tag name, the lightbox will triggered when the user clicked on the element with the tagname.
The same is with the class and id.
For example, if you want to display the lightbox when clicking on an image, you can use this option.
Add a tagname or class or id to this image and use this with the trigger element. Now when anyone click on this image, a lightbox will pop up.
Repeat interval for a user – This is the lightbox repeat interval for a user. If you want to display the lightbox to your user after 30 minutes of first display, you can enter that value here. If this value is 0(zero), the lightbox will appear on every trigger.
You can select any one of the options “on first click” or “on every click”.
If you selected the value “on first click”, the lightbox will appear only on the first click in the element/page content.
If the selected option is “on every click”, the lightbox will appear on every click on the element/page content.
Trigger Element- If you leave this empty, lightbox will trigger when anyone clicks on body.
Otherwise you can specify the element which when clicked must trigger lightbox. You can specify any of the formats below.
tagname => eg: img
classname => eg: .myclass
id => eg: #myid
If you are using a tag name, the lightbox will triggered when the user clicked on the element with the tagname.
The same is with the class and id.
For example, if you want to display the lightbox when clicking on an image, you can use this option.
Add a tagname or class or id to this image and use this with the trigger element. Now when anyone click on this image, a lightbox will pop up.
Repeat interval for a user – This is the lightbox repeat interval for a user. If you want to display the lightbox to your user after 30 minutes of first display, you can enter that value here. If this value is 0(zero), the lightbox will appear on every trigger.
Lightbox close button option – You can display the close button in the lightbox if you are selecting the ‘yes’ option.
If you are selected the option ‘No’, we can close the lightbox by clicking on any position in overlay.
Close button Image – You can upload a close button image here.
Close button appearance position – There are 4 positions for displaying the close button.
Top right, top left, bottom right and bottom left. You can select any position from the dropdown menu.
Display as iframe – We can display the lightbox in iframe or in the same page.
If you are using the iframe, any link in the lightbox or buttons will open in the same lightbox.
To open a link in a window outside the lightbox or to use a social media button, please disable the iframe display.
If you are selected the option ‘No’, we can close the lightbox by clicking on any position in overlay.
Close button Image – You can upload a close button image here.
Close button appearance position – There are 4 positions for displaying the close button.
Top right, top left, bottom right and bottom left. You can select any position from the dropdown menu.
Display as iframe – We can display the lightbox in iframe or in the same page.
If you are using the iframe, any link in the lightbox or buttons will open in the same lightbox.
To open a link in a window outside the lightbox or to use a social media button, please disable the iframe display.
Style Settings
Here we can select the style of the lightbox.
Here we can select the style of the lightbox.
Z index – Z index determines whether the lightbox display under or above the web pages.
As the value of z index increases, the lightbox become on top(above) of all page contents.
Overlay image option – You can add an image for overlay.To use image as overlay, please select this option.
Overlay image – You can upload the overlay image here.
Overlay opacity(0-100) – This is the opacity level of the ovarlay. If the value of opacity is ’0′, the overlay should be a transparent one. If the value is ’100′, the overlay should be opaque.
Overlay color – We can set the overlay color here using a color picker.
Background color – We can select the lightbox background using a color picker.
Popup opacity(0-100) – This is the opacity level of the popup. If the value of opacity is ’0′, the popup should be a transparent one. If the value is ’100′, the popup should be opaque.
Border color – This is the color of the lightbox border.
Border width – We can set the width/thickness of the lightbox border here.
Border radius – If you want a rounded corner for the lightbox, use this option. As the radius increases, the corner roundness also increases. Use ’0′ for rectangular edges.
As the value of z index increases, the lightbox become on top(above) of all page contents.
Overlay image option – You can add an image for overlay.To use image as overlay, please select this option.
Overlay image – You can upload the overlay image here.
Overlay opacity(0-100) – This is the opacity level of the ovarlay. If the value of opacity is ’0′, the overlay should be a transparent one. If the value is ’100′, the overlay should be opaque.
Overlay color – We can set the overlay color here using a color picker.
Background color – We can select the lightbox background using a color picker.
Popup opacity(0-100) – This is the opacity level of the popup. If the value of opacity is ’0′, the popup should be a transparent one. If the value is ’100′, the popup should be opaque.
Border color – This is the color of the lightbox border.
Border width – We can set the width/thickness of the lightbox border here.
Border radius – If you want a rounded corner for the lightbox, use this option. As the radius increases, the corner roundness also increases. Use ’0′ for rectangular edges.
Now click on the Create button and it will create a javascript code.
Please copy this code and place in a page where you want to display the lightbox.
Please copy this code and place in a page where you want to display the lightbox.