jQuery Wrapper for PhotoSwipe

This plugin will allow you to easily transition from your existing fancybox plugin to PhotoSwipe without altering you HTML layout or finding a way define image dimensions. Plugin gets your existing html layout and creates all structure needed for PhotoSwipe.

Key Features

• Works without image dimensions, you don't have to find a way to get image dimensions, plugin finds them for you.
• Ultra light, 70 lines of code, 3KB uncompressed, 2KB compressed.
• Low bandwidth usage, loads original images when needed, not before. Saves bandwidth on limited connections.
• Supports fancybox, you can easily switch from fancybox to PhotoSwipe

Usage

Here I used fancybox class but it's up to you to change it.

Includes

<!-- jQuery -->
<script src="path/to/jquery.min.js"></script> 

<!-- PhotoSwipe Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- PhotoSwipe Skin CSS file (styling of UI - buttons, caption, etc.) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- PhotoSwipe Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- PhotoSwipe UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

<!-- jqPhotoSwipe JS file -->
<script src="path/to/jqPhotoSwipe.min.js"></script>

HTML

Single Image

<a class="fancybox" href="images/01-large.jpg" title="Photo Caption #1" alt="Photo Caption #1"><img src="images/01-thumb.jpg" border="0"></a>

FancyBox Style Image Gallery

1.
<p>
	<a class="fancybox" href="images/01-large.jpg" data-fancybox-group="gallery1" title="Photo Caption #1" alt="Photo Caption #1"><img src="images/01-thumb.jpg" border="0" class="thumb"></a>
	<a class="fancybox" href="images/02-large.jpg" data-fancybox-group="gallery1" title="Photo Caption #2" alt="Photo Caption #1"><img src="images/02-thumb.jpg" border="0" class="thumb"></a>
</p>
2.
<p>
	<a class="fancybox" href="images/03-large.jpg" data-fancybox-group="gallery2" title="Photo Caption #3" alt="Photo Caption #1"><img src="images/03-thumb.jpg" border="0" class="thumb"></a>
	<a class="fancybox" href="images/04-large.jpg" data-fancybox-group="gallery2" title="Photo Caption #4" alt="Photo Caption #1"><img src="images/04-thumb.jpg" border="0" class="thumb"></a>
</p>

Forced Image Gallery

<div class="forcedgallery">
	1.
	<p>
		<a href="images/01-large.jpg" title="Photo Caption #1" alt="Photo Caption #1"><img src="images/01-thumb.jpg" border="0" class="thumb"></a>
		<a href="images/02-large.jpg" title="Photo Caption #2" alt="Photo Caption #1"><img src="images/02-thumb.jpg" border="0" class="thumb"></a>
	</p>
	2.
	<p>
		<a href="images/03-large.jpg" title="Photo Caption #3" alt="Photo Caption #1"><img src="images/03-thumb.jpg" border="0" class="thumb"></a>
		<a href="images/04-large.jpg" title="Photo Caption #4" alt="Photo Caption #1"><img src="images/04-thumb.jpg" border="0" class="thumb"></a>
	</p>
</div>

JavaScript

$(document).ready(function () {
	//By default, plugin uses `data-fancybox-group` attribute to create galleries.
	$(".fancybox").jqPhotoSwipe({
		galleryOpen: function (gallery) {
			//with `gallery` object you can access all methods and properties described here http://photoswipe.com/documentation/api.html
			//console.log(gallery);
			//console.log(gallery.currItem);
			//console.log(gallery.getCurrentIndex());
			//gallery.zoomTo(1, {x:gallery.viewportSize.x/2,y:gallery.viewportSize.y/2}, 500);
			gallery.toggleDesktopZoom();
		}
	});
	//This option forces plugin to create a single gallery and ignores `data-fancybox-group` attribute.
	$(".forcedgallery > a").jqPhotoSwipe({
		forceSingleGallery: true
	});
});

Demo

Single Image

Fancybox Style Image Galleries

Single Combined Image Gallery (Forced)