Minimal jQuery Expanding Gallery Plugin - News Gallery
File Size: | 3.63 KB |
---|---|
Views Total: | 1971 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

News Gallery is a lightweight jQuery / CSS based gallery that expands the hovered image to the full width while shrinking the others, similar to the accordion slider.
How to use it:
1. Add images as backgrounds and descriptions to the gallery following the markup structure like this:
<div id="galleryWrapper"> <div class="gallery"> <div class= "article" id="leftArticle" style="background-image: url('1.jpg')"> <div class="articleTextWrapper"> <h1>Image 1 Title 1</h1> <h2>Image 1 Title 2</h2> </div> </div> <div class="article" id="centreArticle" style="background-image: url('2.jpg')"> <div class="articleTextWrapper"> <h1>Image 2 Title 1</h1> <h2>Image 2 Title 2</h2> </div> </div> <div class= "article" id="rightArticle" style="background-image: url('3.jpg')"> <div class="articleTextWrapper"> <h1>Image 3 Title 1</h1> <h2>Image 3 Title 2</h2> </div> </div> </div> </div>
2. Apply the CSS styles to the gallery.
#galleryWrapper { position: fixed; left: 50%; margin-left: -350px; width: 700px; height: 350px; padding: 0px 0px 0px 0px; background-color: #330000; } .gallery { position: absolute; width: 100%; height: 100%; background-color: #CC0000; overflow: hidden; } .article { width: 20%; height: 100%; position: relative; float: left; display: inline; background-position: center; background-size: cover; overflow: hidden; } .articleHide .articleTextWrapper { opacity: 0.0; } .articleShow .articleTextWrapper { opacity: 1.0; } .articleTextWrapper { bottom: 0px; left: 0px; height: auto; background-color: rgba(204,0,0,0.90); position: absolute; padding: 10px 10px 10px 10px; }
3. Include jQuery library and the jQuery gallery.js script at the bottom of the web page. That's it.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="gallery.js"></script>
4. You're allowed to change the default animation speed in the gallery.js
.
var animationTime = 500;
This awesome jQuery plugin is developed by scrobby. For more Advanced Usages, please check the demo page or visit the official website.