基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

<link rel="stylesheet" href="src/css/swipebox.css">

<a class="swipebox" title="My Caption" href="big/image.jpg">
<img src="small/image.jpg" alt="image" />
</a>

<script type="text/javascript">// <![CDATA[
;( function( $ ) {

    $( '.swipebox' ).swipebox();

} )( jQuery );
// ]]></script>

<!-- Gallery 1 -->
<a class="swipebox" href="big/image1.jpg" rel="gallery-1">
    <img src="small/image1.jpg" alt="image" />
</a>
<a class="swipebox" href="big/image2.jpg" rel="gallery-1">
    <img src="small/image2.jpg" alt="image" />
</a>
<!-- Gallery 2 -->
<a class="swipebox" href="big/image3.jpg" rel="gallery-2">
    <img src="small/image3.jpg" alt="image" />
</a>
<a class="swipebox" href="big/image4.jpg" rel="gallery-2">
    <img src="small/image4.jpg" alt="image" />
</a>

<a class="swipebox-video" href="http://vimeo.com/29193046" rel="vimeo">My Videos</a>

$( '#gallery' ).click( function( e ) {
    e.preventDefault();
    $.swipebox( [
        { href:'big/image1.jpg', title:'My Caption' }, 
        { href:'big/image2.jpg', title:'My Second Caption' }
    ] );
} );

if ( $.swipebox.isOpen ) {
    // do stuff
}

<script type="text/javascript">// <![CDATA[
    ;( function( $ ) {
 
        $( '.swipebox' ).swipebox( {
            useCSS : true, // false will force the use of jQuery for animations
            useSVG : true, // false to force the use of png for buttons
            initialIndexOnArray : 0, // which image index to init when a array is passed
            hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
            hideBarsDelay : 3000, // delay before hiding bars on desktop
            videoMaxWidth : 1140, // videos max width
            beforeOpen: function() {}, // called before opening
            afterOpen: null, // called after opening
            afterClose: function() {} // called after closing
            loopAtEnd: false // true will return to the first image after the last image is reached
        } );
 
    } )( jQuery );
// ]]></script>