Website Builder Photo Album

Add a photo album or slideshow to showcase your photography or events on your website using Visual Lightbox.
* These add-ons are from a 3rd party therefore we are not responsible for how they will work. We are also not able to provide technical support for them.

Step 1:

Download and install Visual Lightbox on your computer.
Add the images you want to use into the tool by following their instructions. Configure the settings you wish to have.
In Visual Lightbox, on the Publish screen, select Publish to folder so that the files and folders are generated onto your computer.
Select where the files are to be generated so you can remember where to find them because you will need to upload them to your web hosting server.
Click the Publish button in Visual Lightbox and a page should open with the photo album showing and working.

Step 2:

After you have seen it working on the previewed page the way you like then you will need to upload the Visual Lightbox generated files and folders up to your web hosting server.
Sign into your web hosting control panel and navigate to the File Manager where you can upload files. Another method to upload your files is by using an ftp program like FileZilla which you can download for free from FileZilla's website.
Upload the 2 folders that Visual Lightbox generated called data and engine to your web hosting server's website folder.

Step 3:

On your previewed page from Visual Lightbox, select in your browser to View Source so that you can copy the codes for the head section.
In Ewisoft, right click (left windowpane) the page you want to put the photo album and select Properties > Script.
Paste the code before </head> tag and change where it is marked in red for where you uploaded your files to.


<link rel="stylesheet" href="http://www.yoursite.com/engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="http://www.yoursite.com/engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="http://www.yoursite.com/engine/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/engine/js/vlbdata.js" type="text/javascript"></script>


Step 4:

On your previewed page from Visual Lightbox, select in your browser to View Source so that you can copy the codes for the body section.
In Ewisoft, click to edit your page where you want the photo album to appear.
Select the HTML tab and paste the code and change where it is marked in red for where you uploaded your files to.


<div id="vlightbox1">
<a class="vlightbox1" href="http://www.yoursite.com/data/images1/pic1.jpg" title="pic1"><img src="http://www.yoursite.com/data/thumbnails1/pic1.jpg" alt="pic1"/></a>
<a class="vlightbox1" href="http://www.yoursite.com/data/images1/pic2.jpg" title="pic2"><img src="http://www.yoursite.com/data/thumbnails1/pic2.jpg" alt="pic2"/></a>
<a class="vlightbox1" href="http://www.yoursite.com/data/images1/pic3.jpg" title="pic3"><img src="http://www.yoursite.com/data/thumbnails1/pic3.jpg" alt="pic3"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com"> Template Photo Gallery by VisualLightBox.com v4.9</a>
</div>


In Ewisoft, click Preview to view your pages.