How can I add simple lightbox gallery on my page?

Q: Dear support,

I tried using your product and don't know how... Can you help me, please?

A: To install VisualLightBox gallery on your page you should:

1. Create your gallery in VisualLightBox and publish it on a local drive in any test folder.
2. Open index.html file from the saved folder in any text editor.
3. Copy code for the HEAD section and paste it inside the HEAD/BODY section of you own
webpage, for example :

<head>
...
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css">
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen">
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
...
</head>



4. Copy code for the BODY section and paste it inside the Body section of you own webpage in the place where you want to have a gallery, for example:

<body>
...
<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/image1.jpg" title="Image1"><img src="data/thumbnails1/image1.png" alt="Image1"></a>
<a class="vlightbox1" href="data/images1/image2.jpg" title="Image2"><img src="data/thumbnails1/image2.png" alt="Image2"></a>
<a class="vlightbox1" href="data/images1/image3.jpg" title="Image3"><img src="data/thumbnails1/image3.png" alt="Image3"></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.1</a>
</div>
<script src="engine/js/vlbdata1.js" type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section -->
...
</body>



5. Copy 'data' folder with images and thumbnails and 'engine' folder with .css and .js files into the same folder with your own webpage.

Recent Questions »

Related