How to implement a basic lightbox plugin, follow the below steps.
1. Import the 3 files by clicking on the links and save them in a forlder and make a note of the path.
jquery-1.10.2.min.js
lightbox.js
lightbox.css
2. Save the below images
image-1.jpg
image-2.jpg
overlay.png (download the image shown below)
3. Now implement all the above resources into your HTML source as shown below.
<!DOCTYPE html>
<html>
<head>
<title>Lightbox</title>
<script type="text/javascript" src="c:/js/lightbox/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="c:/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="c:/js/lightbox/css/lightbox.css" media="screen" />
</head>
<body>
<a href="c:/js/lightbox/img/demopage/image-1.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 1 </a> <br>
<a href="c:/js/lightbox/img/demopage/image-2.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 2 </a>
</body>
</html>
4. section highlighted in red should be replaced by the path you have saved the files and images.
5. Also note that section highlighted in yellow is mandatory you have to add it.
6. View the page on the browser and click on the image links.
If you come across with any error message or unable to implement you can leave a comment below and we will get back to you shortly.
1. Import the 3 files by clicking on the links and save them in a forlder and make a note of the path.
jquery-1.10.2.min.js
lightbox.js
lightbox.css
2. Save the below images
image-1.jpg
image-2.jpg
overlay.png (download the image shown below)
3. Now implement all the above resources into your HTML source as shown below.
<!DOCTYPE html>
<html>
<head>
<title>Lightbox</title>
<script type="text/javascript" src="c:/js/lightbox/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="c:/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="c:/js/lightbox/css/lightbox.css" media="screen" />
</head>
<body>
<a href="c:/js/lightbox/img/demopage/image-1.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 1 </a> <br>
<a href="c:/js/lightbox/img/demopage/image-2.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 2 </a>
</body>
</html>
4. section highlighted in red should be replaced by the path you have saved the files and images.
5. Also note that section highlighted in yellow is mandatory you have to add it.
6. View the page on the browser and click on the image links.
If you come across with any error message or unable to implement you can leave a comment below and we will get back to you shortly.