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

JS Plugin: PhotoSwipe


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



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 
    var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });


<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>


- 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.


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

Leave a Comment

No Comment

© Creative3x Ltd.