前军教程网

最近做一个移动端图片页面，母页是一系列预览小图，点击某张小图后，需要满屏显示大图，并可以左右滑动来浏览其他大图；网上找了一下，找到了一个fotorama组件，感觉用起来效果不错，适合在手机端进行大图浏览，现记录一下使用心得。

先从//www.fotorama.io/set-up/下载fotorama包，在页面上导入CSS和JS，另外，fotorama依赖jquery框架，需要把jquery也引入进来；

在head中引入css：

<script src="js/fotorama.js"></script>

页面放入预览小图：

//原始图片数据

var images=[{url:'images/1_b.jpg',thumb:'images/1_s.jpg',title:'1.jpg'},{url:'images/2_b.jpg',thumb:'images/2_s.jpg',title:'2.jpg'},{url:'images/3_b.jpg',thumb:'images/3_s.jpg',title:'3.jpg'},

{url:'images/4_b.jpg',thumb:'images/4_s.jpg',title:'4.jpg'},{url:'images/5_b.jpg',thumb:'images/5_s.jpg',title:'5.jpg'},{url:'images/6_b.jpg',thumb:'images/6_b.jpg',title:'6.jpg'}];

$(function(){

$(".pic").children("img").each(function(){

var img = $(this);

$(this).on("click",function(){

var thisImg = img.attr("src");

fotoramaImages(thisImg);

});

});

});

function fotoramaImages(thisImg){

var data = [];

var startindex = 0;

//组装数据

if(images){

for(var i=0;i<images.length;i++){

var thumb = images[i].thumb;

var curImg = images[i].url;

var item = { img:curImg, thumb:thumb,full:curImg, id:i,caption:''};

data[i] = item;

if(thumb == thisImg){

startindex = i;

}

}

}

//当前大图浏览到第几张（图片序号）

var fotoramastartindex = parseInt(startindex);

var fotorama = $('.fotorama').on('fotorama:show', function (e, fotorama) {

//使用show回调函数显示图片总张数和当前第几张

var showIndex = (parseInt(fotorama.activeIndex)+1) +"/"+fotorama.size;

var posDiv = $('#posDiv');

if(posDiv.length>0){

posDiv.empty().append(showIndex);

}else{

$('.fotorama').append('<div id="posDiv">'+showIndex+'</div>')

}

})

.fotorama({startindex:fotoramastartindex,activeIndex:fotoramastartindex,data: data,allowfullscreen : true,nav:false})

.data('fotorama');

//初始化的activeIndex无用，不知道怎么回事，只能通过下面这个函数设置初始图片

fotorama.show({index:fotoramastartindex,time:20});

//点击即使用全屏浏览

fotorama.requestFullScreen();

//取消全屏即关闭大图

$('.fotorama').on('fotorama:fullscreenexit',function(e){

e.stopPropagation();//去掉事件冒泡

fotorama.destroy();//销毁组件

$('.fotorama').empty();//置空显示容器

});

}