Fancy Image Gallery / Slider Plugin With jQuery - DreamSlider

DreamSlider is a jQuery plugin for generating a photo gallery that will merge into a navigatable image slideshow when you click on a thumbnail.

How it works:

When we click on a thumb, we want to merge them and show the full image that was clicked. we need to animate the thumbs positions in order to center the final image in the screen. The image itself is the background image that each thumb will have (different background positions). If we are currently seeing the single image, then we want to disperse the thumbs again, and with this, showing the thumbs images.

How to use it:

1. Include the latest version of jQuery library and the jQuery DreamSlider plugin's JavaScript & CSS files on your html page.

<link rel="stylesheet" href="dreamslider.min.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="dreamslider.min.js"></script>

2. Add a group of images into the page.

<div class="container">
  <div class="im_wrapper">
    <div><img src="1.jpg"></div>
    <div><img src="2.jpg"></div>
    <div><img src="3.jpg"></div>
    <div><img src="4.jpg"></div>
    <div><img src="5.jpg"></div>
    <div><img src="6.jpg"></div>
      ...
  </div>
</div>

3. Calling the dreamSlider() function on the top container will generate a default photo gallery on your page.

$('.container').dreamSlider();

4. Plugin settings available.

$('.container').dreamSlider({

  // the number of grid rows
  rowCount:6,

  // 'bounce' or 'standOut'
  easeEffect: 'bounce'

});

Change log:

2017-02-05

• Progressive loading of images implemented using lazy loading technique.
• Window & Thumb's container dimension is calculated only once.
• Sluggish animation effect during dispersing the images is fixed.

2016-05-09

• Added thumb filler for missing grids

 

---

This awesome jQuery plugin is developed by dreamweiver. For more Advanced Usages, please check the demo page or visit the official website.