How can I add lightbox modal on my page?

Q: Dear support,

Thanks for the great products!

I need help understanding how to ADD THE HTML CODE TO MY PAGES.
I'm not a tech-person but if you explain it I'll probably get it.

A: Please see how should you install VisualLightBox gallery on your own page:

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 (you'll find 'engine' and 'data' folders in this saved folder also).
3) Copy code for the HEAD section and paste it inside the HEAD section of you own webpage, for example:

<head>
...
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.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 web page in the place where you want to have a gallery, for example:

<body>
...
<div align="center">
<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox">
<a class="vlightbox" href="data/images/1.jpg" title="1"><img src="data/thumbnails/1.jpg" alt="1"/></a>
<a class="vlightbox" href="data/images/10.jpg" title="10"><img src="data/thumbnails/10.jpg" alt="10"/></a>
<a id="vlb" href="http://visuallightbox.com">Photo Gallery Creator by VisualLightBox.com v3.1</a>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
</div>
<!-- End VisualLightBox.com BODY section -->
</div>
...
</body>



5) Notice. you should copy 'data' folder with images and thumbnails and 'engine' folder with .css and .js files into the same folder with your own webpage.

That's all.

Recent Questions »

Related