Minimal jQuery Expanding Gallery Plugin - News Gallery

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.