There are various settings you can use to determine how and when the Lightbox Template will appear on your page.
Trigger Lightbox on click
In order to trigger the lightbox to popup when the user clicks a button or image, use the following code above your Lightbox code. Be sure to include the URL of an image in between the img src tag, and be sure to include your Lightbox code from your ViralSweep dashboard below this code snippet:
<script>
var vs_lightbox_start_off=true;
</script>
<div id="vsscript_256_696934"></div>
<script async type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_696934"></script>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();">Click Me!</a>
Let's break down the code above.
<script>
var vs_lightbox_start_off=true;
</script>
This is the default setting which keeps the lightbox from displaying on page load when a trigger is being used. If you want to have the lightbox display on page load, just change true to false.
<div id="vsscript_256_696934"></div>
<script async type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_696934"></script>
This is your lightbox code that you will obtain from your ViralSweep dashboard. Take note of the number 256 before the .js portion of the code. This is the campaign ID, and you will need this to invoke the trigger.
<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();">Click Me!</a>
This is the trigger portion of the code. Where it says "viralsweep_lightbox_256", you will need to change 256 with your specific campaign ID which is found in your Lightbox code as shown above.
This will create a link people can click to trigger your Lightbox. You can of course add an image URL instead, or add a class if you are including a styled button.
Here is our working example: Lightbox Button Click Example
Trigger multiple Lightboxes on click
Now if you want to trigger multiple Lightboxes on the same page, you simply need to use the code above but add all of your Lightbox scripts and triggers. Here is what that code would look like:
<script>
var vs_lightbox_start_off=true;
</script>
<div id="vsscript_161_570270"></div><script async type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-e032c8-161.js?sid=161_570270"></script>
<div id="vsscript_256_387550"></div><script async type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_387550"></script>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();"><img src="https://www.viralsweep.com/custom/lbtriggers/images/clickme1.jpg"></a>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_161.lightbox_on();"><img src="https://www.viralsweep.com/custom/lbtriggers/images/clickme2.jpg"></a>
Hide Lightbox on mobile
If you want to hide the Lightbox on mobile so that it only appears for desktop users, use the following code right before your Lightbox code:
<script> if ( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var vs_lightbox_start_off = true; } </script>We're here to help
If you have any further questions, please start a Chat. Just "Click" on the chat icon in the lower right corner to talk with our support team.