jQuery simpleGallery – Fullscreen and responsive lightbox

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.

jQuery-simpleGallery-Plugin-featured
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.
jQuery-simpleGallery-Plugin


Demo Download

How to install:

  1. Download simpleGallery
  2. Included jQuery library (example):
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  3. 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>
  4. 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-fullpath to original image

  5. 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.


You may also like...