IOS手游模拟器(ipadian)电脑版

PhotoSwipe - The web image gallery for your mobile device ========================================================= web: [www.photoswipe.com](http://www.photoswipe.com) twitter: [@photoswipe](http://twitter.com/#!/photoswipe) Inspired by the iOS photo viewer and Google images for mobile, PhotoSwipe is a HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. The current version supports mobile handsets running WebKit based browsers, i.e. iOS, Android and Blackberry 6. PhotoSwipe also runs on the desktop and has been tested on Chrome, Firefox, Safari and Internet Explorer 8 and above and in a limited capacity on Windows Phone 7 (Mango). Have you used PhotoSwipe? It'd be great to hear from you! --------------------------------------------------------- It'd be fantastic to see how you have implemented PhotoSwipe on your site! We're looking at showcasing some of the best on [photoswipe.com](http://www.photoswipe.com). Feel free to drop us a tweet at [@photoswipe](http://twitter.com/#!/photoswipe) and tell us all about it! Latest Release v3.0.2 --------------------- [Download](http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.2.zip) - Fixed issue on iOS 5, first time an image is zoomed in, the zoomed image is hidden from view immediately. **Changes for v3** - You can now specify a target for PhotoSwipe. It doesn't have to run in full screen anymore! To do this, you specify a "target" as part of PhotoSwipe settings. The target MUST be a valid DOM element for it to work. See examples "12-custom-target.html", "13-custom-target-with-indicators.html" for more details. - Multi-line captions when caption bar placed at the bottom should now be fixed. - Fixed issue where toolbar and caption remained visible when zooming in and captionAndToolbarAutoHideDelay = 0. - Upgraded to jQuery Mobile 1.0 RC2 - Upgraded Code.Util to 1.0.6 - Work around for issue #141 now officially added - when rotating an app with PhotoSwipe displayed in a UIWebView, PhotoSwipe does not rotate. This seems to be an issue with UIWebView not PhotoSwipe. To enable this work around, set "enableUIWebViewRepositionTimeout = true" when creating your PhotoSwipe instance. You can also specify the frequency of this timeout by setting "uiWebViewResetPositionDelay" (default 500ms) - **Please Note** This is not needed for PhoneGap apps, nor web apps added to your homescreen. **Important notes about the examples and Internet Explorer** The majority of the bundled examples supplied with PhotoSwipe are running the optimised non-jQuery version. These examples will error on Internet Explorer. This is by design. They will work if you use the jQuery version of PhotoSwipe. Please read the "Getting Started" section below for more information regarding the different implementations of PhotoSwipe. 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. - Comprehensive customisation options: - Presentation controlled via CSS - Set whether the gallery loops or not i.e. when you reach the end, is the next image the first image, or does the gallery show a bounce effect to indicate that you have reached the end. - Hide or show captions and toolbar - Change caption and toolbar positions - Provide your own toolbar HTML - Set the speeds of all animations used, from sliding in to fading. Getting Started --------------- PhotoSwipe comes with an example site to help you get started. There are two distributions of the library: - The default distribution optimised for WebKit and Mozilla based browsers. This distribution uses standard DOM querying and manipulation. It also uses CSS3 transformations for animations. - The jQuery distribution that uses jQuery as it's engine. It is recommended for WebKit based mobile devices to use the default distribution. This negates a lot of the overhead from using jQuery. It does not require jQuery (so one less library to download to your mobile device!). The default distribution will also work on desktop WebKit browsers (such as Chrome and Safari) as well as Firefox 4 and above. Use the jQuery distibution if you need to support a wider range of browsers such as Internet Explorer etc. Getting Started - Default Distribution -------------------------------------- See "examples/01-default.html". This example assumes no jQuery at all and is heavily optimised for WebKit and Mozilla browsers. PhotoSwipe.attach takes three parameters, an array of HTML elements, optional options and optional instance ID string. // 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); PhotoSwipe can be initiated without being attached to HTML elements. See "examples/09-exclusive-mode-no-thumbnails.html" for more information. Getting Started - Default Distribution (with jQuery engine) ----------------------------------------------------------- See "examples/02-jquery.html". The plugin takes two parameters both of which optional; an options objectand an instance ID string. // Set up PhotoSwipe with all anchor tags in the Gallery container $(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false }); }); Options ------- - **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