.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}

.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}
.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}

.dialog figure{overflow:hidden;}
.dialog figure ul{height:100%;overflow:hidden;}
.dialog figure li{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;max-height:100%;margin:10px;}

var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
 ...
});

startSlide  : 0, //起始位置
auto    : 3000, //自動播放時間
continuous  : true, //無限循環(huán); 個人建議所有項個數(shù)不確定時賦值false, 不然為2的時候很2
disableScroll : false, //觸摸時禁止?jié)L屏
callback   : function(index, element){}, //滑動時回調(diào)函數(shù), 參數(shù)為滑動元素排序與對象
transitionEnd : function(index, element){} //滑動完成后回調(diào)函數(shù), 參數(shù)同上

prev(); //上一頁
next(); //下一頁
getPos(); //當(dāng)前頁索引
getNumSlides(); //所有項個數(shù)
slide(index, duration); //滑動效果

<figure id="swipe">
 <ul>
  <li></li>
 </ul>
</figure>

figure{overflow:hidden;position:relative;}
figure ul{overflow:hidden;}
figure li{width:100%;float:left;position:relative;}

$('.download a').click(function(){
 var obj = $(this);
 var url = obj.attr('url');
 if(url && url.length > 0){
  var set = $('.download a[url]');
  base_module.dialog(obj, set);
  return false;
 };

 ...
});

var base_module = (function(){
 var base = {};
 base.options = {
  LOCK : false
 };

 base.fn = function(){
  ...
 };

 return base;
})();

/**
 * 圖片查看器
 * @param object obj 操作對象
 * @param object set 對象集
 */
base.dialog = function(obj, set){
 var i = set.index(obj); //當(dāng)前頁索引
 var rel = set.length; //所有項個數(shù)
 var html = '<section class="dialog"><section></section><figure id="swipe"><ul>'; //開始繪制圖片查看器
 set.each(function(){
  var url = $(this).attr('url'); //圖片路徑
  html += '<li><img src="loading.gif" width="40" height="40" url="' + url + '" /></li>'; //循環(huán)繪制圖片列表
 });
 html += '</ul></figure><footer><span id="po">' + (i + 1) + '/' + rel + '</span></footer></section>'; //繪制結(jié)束

 $('body').append(html); //渲染圖片查看器
 //js文件加載狀態(tài)
 base.loadJs('swipe.min.js', function(){
  base.swiper(i); //回調(diào)函數(shù), swipe參數(shù)配置
 });

 var url = obj.attr('url');
 //圖片加載狀態(tài)
 base.loadImg(url, function(){
  base.imager(i); //回調(diào)函數(shù), 圖片展示
 });
};

/**
 * 按需加載js
 * @param string url 文件路徑
 * @param object fn 回調(diào)函數(shù)
 */
base.loadJs = function(url, fn){
 if(typeof Swipe != 'undefined'){
  if(fn) fn();
  return false;
 };

 var js = document.createElement('script');
 js.src = url;
 document.getElementsByTagName('head')[0].appendChild(js);

 js.onload = function(){
  if(fn) fn();
 };
};

/**
 * 幻燈片配置
 * @param int i 當(dāng)前頁索引
 */
base.swiper = function(i){
 var obj = document.getElementById('swipe');
 window.mySwipe = Swipe(obj, {
  startSlide : i,
  continuous : false,
  disableScroll : true,
  callback  : function(index, element){
   var i = index + 1;
   var s = $('#swipe li').length;
   $('#po').text(i + '/' + s);

   var url = $(element).find('img').attr('url');
   base.loadImg(url, function(){
    base.imager(index);
   });
  }
 });
};

/**
 * 按需加載img
 * @param string url 文件路徑
 * @param object fn 回調(diào)函數(shù)
 */
base.loadImg = function(url, fn){
 var img = new Image();
 img.src = url;
 if(img.complete){
  if(fn) fn();
  return false;
 };

 img.onload = function(){
  if(fn) fn();
 };
};

/**
 * 展示加載完圖片
 * @param int i 當(dāng)前頁索引
 */
base.imager = function(i){
 var obj = $('#swipe li').eq(i).find('img');
 var url = obj.attr('url');
 obj.replaceWith('<img src="' + url + '" />');
};