HTML5 + CSS3
jQuery only
Auto sizing
Responsive design
Cross browser IE9+
Touch and swipe controls
Normalized images size
Keyboard and mouse controls
Preloading neighbour images
Easy setup
Lightweight
Mobile ready
4 build in skins
Beautiful effects
Well documented
Very quick images flipping
Old school polaroid experience
Short and readable images urls
Saint Petersburg views
Demo gallery
click any image to zoom
Yekaterinburg views
Demo gallery
click any image to zoom
Nice girls
Demo gallery
click any image to zoom
Controlling the gallery
Previous image:
, , Backspace, PgUp, W, A
Next image:
, , Space, PgDown, S, D
Close:
ESC
Add plugin to project
Add JS and CSS files to the page
<!DOCTYPE html>
<html>
<head>
...
<link href="ion.photo.zoom.min.css" rel="stylesheet" />
</head>
<body>
...
<script src="ion.photo.zoom.min.js"></script>
</body>
</html>
HTML plugin set up
Basic html-layout
<a href="url/to/large/image1.jpg" class="gallery-1">
<img src="url/to/thumb1.jpg" alt="Caption 1" />
</a>
<a href="url/to/large/image2.jpg" class="gallery-1">
<img src="url/to/thumb2.jpg" alt="Caption 2" />
</a>
<a href="url/to/large/image3.jpg" class="gallery-1">
<img src="url/to/thumb3.jpg" alt="Caption 3" />
</a>
Img only html-layout
<img src="url/to/thumb1.jpg" data-url="url/to/large/image1.jpg" alt="Caption 1" class="gallery-2" />
<img src="url/to/thumb2.jpg" data-url="url/to/large/image2.jpg" alt="Caption 2" class="gallery-2" />
<img src="url/to/thumb3.jpg" data-url="url/to/large/image3.jpg" alt="Caption 3" class="gallery-2" />
Links only html-layout
<div data-url="url/to/large/image1.jpg" data-caption="Caption 1" class="gallery-3"></div>
<div data-url="url/to/large/image2.jpg" data-caption="Caption 2" class="gallery-3"></div>
<div data-url="url/to/large/image3.jpg" data-caption="Caption 3" class="gallery-3"></div>
JavaScript plugin set up
Basic setup
$(document).ready(function () {
$.ionPhotoZoom('.gallery-1');
});
Multiple galleries
$(document).ready(function () {
$.ionPhotoZoom('.gallery-1, .gallery-2, .gallery-3');
});
Add new galleries later
$(document).ready(function () {
$.ionPhotoZoom('.gallery-1, .gallery-2');
// later
$.ionPhotoZoom('.gallery-3');
});
Plugin options
Images limit. Defines how many images could be on screen at the same time. Decrease this number if you experience any slow downs. Default: 25.
$.ionPhotoZoom('.gallery-1', {
limit: 10
});
Use old school polaroid background texture for your images. Default: true.
$.ionPhotoZoom('.gallery-1', {
use_polaroid: false
});
Will add url of every photo to web site url. Like this: www.site.com/#img-31. This will allow you to share direct photo links. Default: true.
$.ionPhotoZoom('.gallery-1', {
save_url: false
});
Set up controls skin (choose from several build in skins). Default: "metal".
$.ionPhotoZoom('.gallery-1', {
skin: "metal" // ["dark-blue", "dark-red", "dark-yellow", "metal"]
});
Set up image size in pixels. Will limit image minor side to this number. Also you may set 9999 here to force image be always maximum size. Default: 0.
$.ionPhotoZoom('.gallery-1', {
fixed_size: 300
});
Set up controls block position on the big screens. Default: "left".
$.ionPhotoZoom('.gallery-1', {
controls_position: "right" // ["left", "center", "right"]
});
Update plugin config in runtime
You may always set default, or override old plugin options with new ones, by just calling a function with config object.
$.ionPhotoZoom({
skin: "dark-blue", // set skin
fixed_size: 250, // limit image size
controls_position: "center" // move controls to center
});
$.ionPhotoZoom({
skin: "dark-red", // change skin
fixed_size: 450, // change image size limit
controls_position: "right", // move controls to right
limit: 5 // limit total images to 5
});
$.ionPhotoZoom({
skin: "dark-yellow", // change skin
fixed_size: 9999, // change image size limit to maximum
limit: 1 // limit total images to 1
});
$.ionPhotoZoom({
limit: 42, // revert limit
fixed_size: 0, // do not resize images
skin: "metal", // set skin to default
controls_position: "left" // set controls position to default
});