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
[sourcecode language="plain"]
<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>
