Mouse-aware jQuery Responsive Image Gallery Plugin - skimThrough

File Size: 4.63 KB
Views Total: 1240
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Mouse-aware jQuery Responsive Image Gallery Plugin - skimThrough

skimThrough is a simplest jQuery gallery plugin which allows you to navigate through a set of image via mouse move. Images will be shown with the width of its parent. Size is recalculated on window resize. So you can use it in your responsive designs.

How to use it:

1. Load jQuery library and the jQuery skimThrough plugin at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="skimThrough.js"></script> 

2. Insert a set of images into a container.

<div id="container">

  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">

</div>

3. Create a container to place the image preloader.

<div id="current_page">loading...</div>

4. The required CSS styles for the image gallery.

.bg {
  position: fixed;
  top: 0;
  left: 0;
}

.bgwidth { width: 100%; }

.bgheight { height: 100%; }

#current_page {
  position: fixed;
  right: 0;
  bottom: 10%;
  font-size: 11px;
  color: #FFF;
  background: #000;
  padding: 2px 5px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

5. Initialize the gallery plugin with options.

$('#container').skimThrough({
  'duration': 500,
  'counter_element': '#current_page'
});

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