How to install the lightbox for jquery into existing .html page?

Q: Hello,

I am interested in using your software. It's really suitable for me.
But how to paste the Visual LightBox into my website?

A: Please, see how you should 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 index_files 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="index_files/vlb_files1/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="index_files/vlb_files1/visuallightbox.css" type="text/css" media="screen" />
<script src="index_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
		<script src="index_files/vlb_engine/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 web page in the
place where you want to have a gallery, for example:

<body>
...
		<!-- Start VisualLightBox.com BODY section id=1 -->
	<div id="vlightbox1">
	<a class="vlightbox1" href="index_files/vlb_images1/1.jpg" title="1"><img src="index_files/vlb_thumbnails1/1.jpg" alt="1"/></a>
<a class="vlightbox1" href="index_files/vlb_images1/2.jpg" title="2"><img src="index_files/vlb_thumbnails1/2.jpg" alt="2"/></a>
<a class="vlightbox1" href="index_files/vlb_images1/3.jpg" title="3"><img src="index_files/vlb_thumbnails1/3.jpg" alt="3"/></a>
<a class="vlightbox1" href="index_files/vlb_images1/4.jpg" title="4"><img src="index_files/vlb_thumbnails1/4.jpg" alt="4"/></a>
<a class="vlb" href="http://visuallightbox.com">jquery lightbox example code by VisualLightBox.com v5.6</a>
	</div>
	<script src="index_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>
	<!-- End VisualLightBox.com BODY section -->

	</body>



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

Recent Questions »

Related