Skip to content
A jQuery plugin for panning website visuals and screenshots by mouse movement in a fixed height <div>
JavaScript CSS
Branch: master
Clone or download
Latest commit a5a022b Nov 24, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 1.0.1 release Nov 22, 2015
src Minor fixes Nov 22, 2015
.npmignore NPM and Bower packages Nov 22, 2015
LICENSE Added license Mar 18, 2015
README.md Added demo Nov 24, 2015
bower.json
gulpfile.js NPM and Bower packages Nov 22, 2015
package.json 1.0.1 release Nov 22, 2015

README.md

VisPan - Visual Pan

A jQuery plugin for panning website visuals and screenshots by mouse movement in a fixed height <div>

Demo

Install

Packages are available via Bower and NPM

npm install --save vispan
bower install --save vispan

Use

Include dist/css/vispan.css and dist/js/vispan.js in your page, ensuring jQuery is loaded first.

<!-- css -->
<link rel="stylesheet" href="bower_components/vispan/dist/css/vispan.css">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- VisPan -->
<script src="bower_components/vispan/dist/js/vispan.js"></script>

Format your website visuals/slides in the following format

<div id="visuals">
  <div><img src="assets/img/web/home.jpg"></div>
  <div><img src="assets/img/web/about.jpg"></div>
  <div><img src="assets/img/web/contact-us.jpg"></div>
</div>

Give #visuals a fixed height

#visuals {
  height: 420px;
}

Finally, call the vispan method in your javascript

$(document).ready(function() {
  $('#visuals').vispan()
})
You can’t perform that action at this time.