Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (90 sloc) 3.33 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>jScrollPane image demo 2</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
width: 100%;
height: 400px;
overflow: auto;
margin: 1em 0;
width: 480px;
height: 640px;
width: 640px;
height: 480px;
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src=""></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
<script type="text/javascript" id="sourcecode">
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#examples">Examples</a></li>
<li><a href="index.html#themes">Themes</a></li>
<li><a href="index.html#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="index.html#support">Support</a></li>
<li><a href="index.html#download">Download</a></li>
<div id="container">
<h1>jScrollPane - image demo page part 2</h1>
This demonstration shows how you can avoid the autoReinitialise overhead (as seen in the
<a href="image.html">first image demo</a>) by fixing the width and height of the images inside your
scroll pane.
As you can see from the sourcecode for this page, you can set the width and height either through CSS or
using width and height attributes on the image itself.
<div class="scroll-pane">
<img src="" class="portrait" alt="Touring" />
<img src="" class="landscape" alt="Avalauncher" />
<img src="" class="landscape" alt="Rockies" />
<img src="" width="640" height="480" alt="Paper cranes" />
<img src="" width="480" height="640" alt="Icecream">
<h2>Page javascript</h2>
<div id="sourcecode-display">
<p>The contents of this div will be replaced by the javascript added to this page</p>
<h2>Page CSS</h2>
<div id="css-display">
<p>The contents of this div will be replaced by the CSS added to this page</p>
Jump to Line
Something went wrong with that request. Please try again.