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

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();
	//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

1.

2.

Single Combined Image Gallery (Forced)

1.

2.