点击图片浏览大图（sui框架）

项目中经常遇到点击图片或者点击相册浏览大图的情景，SUI框架自带swiper滚动的效果，详情见http://m.sui.taobao.org/中的拓展组件--图片浏览器的效果，在项目中需要做到点击图片出现图片浏览器而不是点击固定的按钮，这就需要在js里做一些改变了。

部分html代码如下：

<div class="storeLook">
	<div class="row">
             <#list merchantFcPicsList as p>
		<div class="col-33 albumImgs" data-src="${p.picUrl!''}"> 
			<a href="#" class="pb-popup">
			<img src="${p.picUrl!''}"/>
			</a> 
		</div>
	     </#list>                               
         </div>	                    						                	
</div>

这里是freemarker语法 <#list>循环出每一张图片，而data-src属性的值是图片的接口，img的src属性也是图片的接口。

部分js代码如下：

$(function(){				   
		  /*=== Popup ===*/
		$(document).on('click','.albumImgs',function () {	
			  var pic = $(this).parent().find(".albumImgs").map(function(){
				  return $(this).data("src");
			  }).get();
			  $.photoBrowser({
			      photos : pic,
			      type: 'popup'
			  }).open();
			  //myPhotoBrowserPopup.open();		  
		  });		 
		});				
});

var pic = $(this).parent().find(".albumImgs").map(function(){
 return $(this).data("src");
  }).get();
 $.photoBrowser({
 photos : pic,
type: 'popup'
 }).open();
});
return 的值就是class为albumImgs的div的data-src属性，具体的var pic = $(function(){}).get()和$.photoBrowser({}).open()的具体用法楼主也是在网上找的方法，还有待进一步理解，这里只是把这个方法列出来权当做个笔记。另外，这个图片浏览都是默认从第一张开始的，而不是从点击的那一张图片开始，这个问题还有待日后解决，估计得去理解并修改sui框架里面底层swiper的一些属性或者方法。