jQuery-Tiles - Image Tiling and Zooming
jQuery-Tiles is an image tiling and zooming library for really big images. It is a much simpler version of the tiling used in many mapping applications (such as Google Maps). As indicative in the name, this is a jQuery plugin.
Some features include:
- Lazy Loading - Tiled images are only loaded when they are viewable in the viewport, thereby reducing the time and bandwidth required when loading large images.
- Zoom and Drag - Support different levels of zooming for your tiled images, from thumbnail previews to high-resolution originals.
- Simple tiled image generation with the bash script
generate.sh
.
Suggestions and contributions are encouraged.
The bash script, generate.sh
simplifies the tile generation process. The script handles the tiling and directory structure of the generated tiles.
- Install ImageMagick
- Move the source image,
source.jpg
to the same directory ofgenerate.sh
- Run
generate.sh
with the desired zooms and tile size. For example, to generate 300x300 tiles at zooms 3 and 4, run./generate.sh -z '3 4' -t 300 source.jpg
- Tiled images will be generated under the
tiles/
directory
To run jQuery-Tiles on a page, you need to include the jQuery and jQuery-UI dependencies:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery.tiles.min.js"></script>
Simply select the viewport and initialize with options:
$('.viewport').tiles({
original: {
width: 3264, // Required - width of original image
height: 2448, // Required - height of original image
},
basePath: "images/pier/", // Required - path containing the tiles/ directory
loading: "images/loading.gif", // Optional - placeholder image for loading images
zoom: 2 // Optional - initial zoom level
});
Check out the source of the demo at docs/
(see index.html
) for an example.
The project is built with Grunt.
- Go to the project directory (containing grunt.js)
npm install
grunt
When you run grunt, the source code under src/
will be linted, minified, and copied to jquery.tiles.js
, and jquery.tiles.min.js
, and the site/
directory. You may want to run grunt watch
before you edit the source so changes will be automatically copied and packaged.
Contributions are welcomed. There are no guidelines for contributions at this moment, but some guidelines may be set up in the future. If you want to contribute and need help understanding the code, don't hesitate to contact me.
The source is freely available under the terms of the MIT License.
Feel free to download, modify, and use for personal or commercial projects. I would appreciate a pingback if you find the project useful, but it's certainly not required.