SimpleGallery is an easy and quick solution for creating responsive fullscreen lightbox gallery. With a couple lines of code you can display your images in a wonderful gallery.
Image may be NSFW.
Clik here to view.
There are many lightbox galleries out there and they all do the job. Some of them are really complicated and for begginers in coding and web design it is a bit overwhelming to create a nice lightbox gallery. SimpleGallery is a really ease-to-implement jQuery plugin and you do not need to follow a long tutorial in order to get things done. There are 5 simple steps that you have to follow and you will have a nice-looking responsive gallery. It looks great on mobile devices as well and browsing through the images is very easy on small handheld devices.
Have a look at the demo and feel free to download the plugin and give it a try. The current implementation of simpleGallery is done under the Bootstrap framework but you can use it on whatever framework you prefer.
Image may be NSFW.
Clik here to view.
Demo Download
How to install:
- Download simpleGallery
- Included jQuery library (example):
<script src="http://code.jquery.com/jquery-latest.js"></script>
- Insert the following code before end of
</head>tag:<!-- simpleGallery CSS file --> <link rel="stylesheet" href="path/to/simpleGallery.css"> <!-- simpleGallery js file --> <script type="text/javascript" src="path/to/jquery.simpleGallery.js"></script>
- Insert the following code after the
<body>tag:<section class="gallery"> <img src="img/1.jpg" data-full="img/1.jpg" alt="img1"/> <img src="img/2.jpg" data-full="img/2.jpg" alt="img2"/> <img src="img/3.jpg" data-full="img/3.jpg" alt="img3"/> <img src="img/4.jpg" data-full="img/4.jpg" alt="img4"/> </section>
where data-full – path to original image
- Now you need to call the plugin with your gallery ID-attribute (#gallery).
$(document).ready(function(){ $('.gallery').gallery(); });
Check out jQuery lightGallery – A lightweight lightbox gallery for displaying images and videos for more advanced lightbox solution.
