article:
UI: Sky UI Kit
article:
Responsive Plugin: The Heads-Up Grid

JS Plugin: PhotoSwipe

Advertisement

Image Gallery for mobile and touch devices


- PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices;
- Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app;
- PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Plugin: PhotoSwipe




Usage

<scripttype="text/javascript"src="klass.min.js"></script><scripttype="text/javascript"src="code.photoswipe-3.0.4.min.js"></script>

Demo 1

// Set up PhotoSwipe with all anchor tags in the Gallery container 
document.addEventListener('DOMContentLoaded', function(){
    var myPhotoSwipe = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);


Demo 2

// Set up PhotoSwipe with all anchor tags in the Gallery container 
$(document).ready(function(){
    var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});

HTML

<ulid="Gallery"><li><ahref="images/full/01.jpg"><imgsrc="images/thumb/01.jpg"alt="Image 01"/></a></li><li><ahref="images/full/02.jpg"><imgsrc="images/thumb/02.jpg"alt="Image 02"/></a></li><li><ahref="images/full/03.jpg"><imgsrc="images/thumb/03.jpg"alt="Image 03"/></a></li><li><ahref="images/full/04.jpg"><imgsrc="images/thumb/04.jpg"alt="Image 04"/></a></li><li><ahref="images/full/05.jpg"><imgsrc="images/thumb/05.jpg"alt="Image 05"/></a></li><li><ahref="images/full/06.jpg"><imgsrc="images/thumb/06.jpg"alt="Image 06"/></a></li></ul>



Features

- Optimised for mobile devices running a WebKit browser.
- Runs on modern desktop browsers, including Internet Explorer 8 and above.
- From v3 can be run within a div on your page as well as "full screen".
- Multiple input options including swipe gestures (both mouse and screen touches), keyboard control and an interactive on screen toolbar.
- Responsive to device orientation changes.
- Automatically scales images to maximise screen size and orientation.
- Zoom and pan around images
- Rotate image (iOS only)
- Works with your markup and semantic structure. Does not enforce any specific markup.
- Supports image captions.
- Slideshow feature to automatically play through images in the gallery.
- Uses hardware acceleration where possible for smoother transitions and effects.
- Can be integrated into jQuery Mobile.








source
demo
github
download

Advertisement
Tags: mobile, photo, responsive, slider, iphone, ipad, android, blackberry 6, desktop, layout, design, develop

Leave a Comment

No Comment

© Creative3x Ltd.