Gallery

Full Responsive JavaScript image and video gallery

Image gallery and video galleries are unavoidable items in websites. As per the current web design trends we need more features in everything. Here is one fully responsive javascript image and video gallery that fullfil all features. Please check the following listed main features.

  • Fully responsive.
  • Modular architecture with built in plugins.
  • Touch support for mobile devices.
  • Mouse drag supports for desktops.
  • Animated thumbnails.
  • Social media sharing.
  • YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
  • Full screen support.
  • Supports zoom.
  • Browser history API.
  • Responsive images.
  • HTML iframe support.
  • Keyboard Navigation for desktop.

CDN

http://www.jsdelivr.com/projects/lightgallery.js

Implement in your projects by do the following steps

Include CSS and Javascript files

CSS goes in head section

<head>
    <link rel="stylesheet" href="css/lightgallery.css">
</head>

After that include the js library, here its lightgallery.min.css into your footer area
<body>
    ...

    <script src="js/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>

The markup for light gallery

You can use your own markup too , Here am showing a sample

<div id="lightgallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg">
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg">
    </a>
    ...
</div>

Initialize the plugin

<script>
    lightGallery(document.getElementById('lightgallery'));
</script>

Demo Read More Download