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.

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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"/>

    where data-fullpath to original image

  5. Now you need to call the plugin with your gallery ID-attribute (#gallery).

Check out jQuery lightGallery – A lightweight lightbox gallery for displaying images and videos for more advanced lightbox solution.

Related post:  Iconmelon - SVG icons lib for the web
Divi WordPress Theme

You may also like...

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.