异步加载数据——turn.js
var tostore = GetQueryString("tostore");
var photo_id = GetQueryString("photo_id");
var photo_name = decodeURI(decodeURI(GetQueryString("photo_name")));
var picArr = [];
var loadType = 2;
var total = 0;
$(function () {
ToolBar.pagesize = 20;
ToolBar.callback = picture.load;
ToolBar.show = false;
picture.loadData();
$("#albumName").html("《" + photo_name.replace(/(^\s*)|(\s*$)/g, "") + "》");
$('.scaleBtn').viewer({
url: 'data-original'
});
$("#goStore, .head").click(function () {
goUrl('/index.aspx');
});
});
var picture = {
load: function () {
ToolBar.isLoading = true;
var data = {
act: "GetEphotoDetailsList",
photo_id: photo_id,
page: ToolBar.currentPage,
pagesize: ToolBar.pagesize
};
var successFun = function (json) {
ToolBar.isLoading = false;
total = json.Info.length;
ToolBar.build(total);
if (ToolBar.currentPage == 1) {
if (total > 0) {
picture.getArr(json.Info);
picture.initTurn();
$(".albumCount").html(1 + "/" + total);
ToolBar.currentPage++;
} else {
$(".flipbook").html('<img class="emptyTip" src="/images/empty.png" />');
$(".btnLst").addClass("hideBtnLst");
$(".albumCount").html("店铺没有上传图册~");
}
} else {
picture.addTo(json.Info);
}
};
JsAjax("/Handle/nc_store_ephotoHandle.ashx", data, successFun);
},
loadData: function () {
ToolBar.currentPage = 1;
picture.load();
},
getArr: function (data) {
var html = "";
$(data).each(function (index, item) {
html += '<div><img class="imgCover" src="' + item.ephoto_url + '" /></div>';
});
$(".flipbook").append(html);
},
addTo: function (data) {
var imgArr = [];
$(data).each(function (index, item) {
imgArr.push(item.ephoto_url);
});
for (var i = 0; i < imgArr.length; i++) {
var element = $('<div><img class="imgCover" src="' + imgArr[i] + '" /></div>');
var page = $(".flipbook").turn("pages");
$(".flipbook").turn("addPage", element);
}
},
initTurn: function () {
var w = 7.18 + 'rem';
var h = 5.71 + 'rem';
$('.flipbook').turn({
width: w,
height: h,
acceleration: true,
elevation: 50,
display: 'single',
duration: 500,
gradients: true,
autoCenter: true,
when: {
turned: function (e, page, view) {
picture.zoomIn(page);
$(".albumCount").html(page + "/" + total);
if (page == 1 || page == total) {
$(this).turn('peel', 'br');
}
if (page % ToolBar.pagesize == 0) {
ToolBar.next();
}
}
}
})
},
zoomIn: function (page) {
var bg = $(".p" + page).find("img").attr("src");
$(".scaleBtn img").attr("src", bg);
}
}