Creating a Lightbox with NTB (With Screen Shots!)

So you want your visitors to have the option to enlarge a certain picture that you have on your website?  Creating a lightbox is super easy and can create a long lasting effect that will heighten user experience and can help generate sales.

Step 1- figure out which of your photos you would like to experiment and learn this process with.  This can be within an individual page or within the snippet zones.  You can also upload an image into the spot where you want it to go now.

Step 2-Highlight your image (This means just click on it so that those boxes appear around the edges) and then right click.   Here you will want to do a couple of things.

A-Set your Image Alignment so that the words are aligned to the left.

B- Set your image margins so there is a little space between the Right and Bottom of the picture.  (I prefer Right=5 and depending on the look of the page; Bottom=3)

C- Copy your Image Source.  Make sure you grab  all of the information from the box: Image Src.

Step 3- Double check that your image still has the sizing boxes around the edges.  Click on the Hyperlink Manager button and paste your Image Src information into the url box.

Step 4- Switch your WYSIWYG editor into html view and find the very first part of  your code.  It should look something like this:

<a href=”/Websites/6/674/Website/Files/capsign.jpg”XXXX ><img style=”float: left;

We want to put:    rel=”lightbox”       in place of the XXXX

So you will end up with code that looks like this:

<a href=”/Websites/6/674/Website/Files/capsign.jpg” rel=”lightbox”><img style=”float: left…

Now,  if you are new- try not to get frustrated!  There are several steps here and even though they can seem intimidating, everything is quite simple and you aren’t going to hurt anything!  With all of that being said, any issues that do arise can be handled exceptionally well from our wonderful support team!