How can I install jquery lightbox for html on page?

Q: Hello. Can I use visual light box with my wordpress site? Have you any instructions how I can to do it?

A: 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.

Related