Image Gallery for mobile and touch devices

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="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
					

The call

// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){

	var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );

}, false);
					

The call (if using jQuery)

//jQuery version
$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});
					

HTML

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>
					

Configuration

• allowUserZoom: Allow the user to zoom / pan around images. Default = true
• autoStartSlideshow: Automatically starts the slideshow mode when PhotoSwipe is activated. Default = false
• allowRotationOnUserZoom: iOS only - Allow the user to rotate images whilst zooming / panning. Default = false
• 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
• captionAndToolbarAutoHideDelay: How long to wait before the caption and toolbar automatically disappear. Default = 5000. Set to 0 to prevent auto disappearing
• captionAndToolbarFlipPosition: Place the caption at the bottom and the toolbar at the top. Default = false
• captionAndToolbarHide: Hide the caption and toolbar. Default = false
• 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 = true
• cacheMode: Code.PhotoSwipe.Cache.Mode.normal (default) or Code.PhotoSwipe.Cache.Mode.aggressive. Changes how PhotoSwipe manages it's cache. Aggressive will purposely set images that are not either the current, next or previous to be an empty "spacer" type image. This helps on older iOS versions if you have excessively large images. In the main, normal should suffice
• doubleTapSpeed: Double tap speed in milliseconds. Default = 300
• doubleTapZoomLevel: When the user double taps an image, the default "zoom-in" level. Default = 2.5
• enableDrag: Enables dragging the next / previous image into view. Default = true
• enableKeyboard: Enables keyboard support. Default = true
• enableMouseWheel: Enables mouse wheel support. Default = true
• fadeInSpeed: The speed of any fading-in elements in milliseconds. Default = 250
• fadeOutSpeed: The speed of any fading-out elements in milliseconds. Default = 250
• imageScaleMethod: How images will fit onto the screen. Either "fit", "fitNoUpscale" or "zoom". "fit" ensures the image always fits the screen. "fitNoUpscale" works like "fit" but will never upscale the image. "zoom" the image will always fill the full screen, this may cause the image to be "zoomed" in and cropped. Default = "fit"
• invertMouseWheel: By default, moving the mouse wheel down will move to the next image, up to the previous. Setting this to true reverses this. 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"
• loop: Whether the gallery auto-loops back to the beginning when you reach the end. Default = true
• margin: The margin between each image in pixels. Default = 20
• maxUserZoom: The maximum a user can zoom into an image. Default = 5.0 (set to zero for this to be ignored)
• minUserZoom: The minimum a user can zoom out of an image. Default = 0.5 (set to zero for this to be ignored)
• mouseWheelSpeed: How responsive the mouse wheel is. Default = 500
• nextPreviousSlideSpeed: How fast images are displayed when the next/previous buttons are clicked in milliseconds. Default = 0 (immediately)
• preventHide: Prevents the user closing PhotoSwipe. Also hides the "close" button from the toolbar. Useful for "exclusive mode" (see examples/08-exclusive-mode.html). Default = false
• preventSlideshow: Prevents the slideshow being activated. Also hides the "play" button from the toolbar. Default = false
• slideshowDelay: The delay between showing the next image when in slideshow mode in milliseconds. Default = 3000
• 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 milliseconds to be registered as a swipe gesture. Default = 250
• slideTimingFunction: Easing function used when sliding. Default = "ease-out"
• zIndex: The intial zIndex for PhotoSwipe. Default = 1000