Watch the video

Image Gallery for mobile and touch devices

iPhone, iPad, Android, Blackberry 6 and Desktop all supported.

Announcement: the new version of PhotoSwipe is under development and will be released in near future. To get notified about release - join the email newsletter or follow PhotoSwipe on Twitter. (posted on March 2014)

Platform & framework compatibility

Compatible with lots of mobile devices and all popular JavaScript libraries and development frameworks.

How do I use it?

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.

What to include

<script type="text/javascript" src="simple-inheritance.min.js">
<script type="text/javascript" src="code-photoswipe-1.0.9.min.js">
					

The call

// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
	Code.photoSwipe('a', '#Gallery');
}, false);
					

The call (if using jQuery)

//jQuery version
$(document).ready(function(){
	$("#Gallery a").photoSwipe();
});
					

HTML

<div id="Gallery">
	<div class="gallery-row">
		<div class="gallery-item"><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></div>
		<div class="gallery-item"><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></div>
		<div class="gallery-item"><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></div>
	</div>
	<div class="gallery-row">
		<div class="gallery-item"><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></div>
		<div class="gallery-item"><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></div>
		<div class="gallery-item"><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></div>
	</div>
</div>
					

Configuration

  • fadeInSpeed: The speed of any fading-in elements in milliseconds. Default "250"
  • fadeOutSpeed: The speed of any fading-out elements in milliseconds. Default "500"
  • slideSpeed: How fast images slide into view in milliseconds. Default "250"
  • swipeThreshold: How many pixels your finger has to move across the screen to register a swipe gesture. Default "50"
  • swipeTimeThreshold: A swipe must take no longer than this value in milli-seconds to be registered as a swipe gesture. Default "250"
  • loop: Whether the gallery auto-loops back to the beginning when you reach the end. Default "true"
  • slideshowDelay: The delay between showing the next image when in slideshow mode. Default "3000"
  • imageScaleMethod: How images will fit onto the screen. Either "fit" or "zoom". "fit" ensures the image always fits the screen. "zoom" the image will always fill the full screen, this may cause the image to be "zoomed" in and cropped. Default "fit"
  • preventHide: Once PhotoSwipe is active, prevents the user closing it. Useful for "exclusive mode" (see examples/exclusive-mode.html). Default "false"
  • zIndex: The intial zIndex for PhotoSwipe. Default "1000"
  • backButtonHideEnabled: This will hide the gallery when the user hits the back button. Useful for Android and Blackberry. Works in BB6, Android v2.1 and above and iOS 4 and above. Default "true"
  • allowUserZoom: iOS only - Allow the user to zoom / pan around images. Default "true"
  • allowRotationOnUserZoom: iOS only - Allow the user to rotate images whilst zooming / panning. Default "true"
  • maxUserZoom: iOS only - The maximum a user can zoom into an image. Default 5.0 (set to zero for this to be ignored)
  • minUserZoom: iOS only - The minimum a user can zoom out of an image. Default 0.5 (set to zero for this to be ignored)
  • adjustUserPanToZoom: iOS only - Adjusts the speed of panning to match the current zoom value. Default "true"
  • captionAndToolbarHide: Hide the caption and toolbar. Default "false"
  • captionAndToolbarHideOnSwipe: Hide the caption and toolbar when you swipe to the next image. Default "true"
  • captionAndToolbarFlipPosition: Place the caption at the bottom and the toolbar at the top. Default "false"
  • captionAndToolbarAutoHideDelay: How long to wait before the caption and toolbar automatically disappear. Default "5000". Set to "0" to prevent auto disappearing
  • captionAndToolbarOpacity: The opacity of the caption and toolbar. Default "0.8"
  • captionAndToolbarShowEmptyCaptions: Shows a blank caption area even if a caption cannot be found for the current image. Default "false"
  • jQueryMobile: Whether PhotoSwipe is integrated into a jQuery Mobile project or not. By default, PhotoSwipe will try and work this out for you
  • jQueryMobileDialogHash: The window hash tag used by jQuery Mobile and dialog pages. Default "&ui-state=dialog"