Visual LightBox
Jquery gallery zoom with different website builders
Q: Hello Support,
My cms is OCPortal and I would like to purchase your product but I cannot seem to get it working on my cms. Do you know how it should be coded for OCPortal so I can get it working?
A: VisualLightBox is compatible with all website builders, that allows to add html code and
execute javascript. You can try to use free version of our application:
http://visuallightbox.com/licenses.html
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.