turn.js 圖書翻頁效果

標籤：

今天用turn.js 做圖書的翻頁效果遇到問題：

圖片路徑總是出錯

調了一天，總算調出來了

我用的thinkphp，其他的不知道是不是一樣

兩個地方要改動：

1.後台查出地址

注意的地方：1.地址要完全的

　　　　　　2.js要用json格式的資料

 

$more = M(‘File‘)->where(array(‘id‘=>$id))->find();$more1 = json_decode($more[‘more‘],true);  foreach($more1 as $k => $v){  /*weburl 是網站網域名稱  savepath 是圖片存放地址*/ $v[‘path‘] = C(‘WEBURL‘).‘/‘.$v[‘savepath‘]; $type = end(explode(‘.‘,$v[‘name‘])); if(‘jpg‘ == $type){      $more2[] = $v;    } }$more[‘more2‘] = $more2;$more[‘more3‘] = json_encode($more2);$this->assign(‘more‘,$more);

2.前台js形成需要的json資料往方法傳

var more = <{$more.more3}>;    var savepath = new Array();    var i=1;    $.each(more, function(e,v){        savepath[i] = v.path;        i++;    });

missing: function (event, pages) {    // Add pages that aren‘t in the magazine    for (var i = 0; i < pages.length; i++){    addPage(pages[i], $(this),savepath);    }}

 

3.magazine.js要改動

 

function addPage(page, book,data) function loadPage(page, pageElement,data)有好幾個地方要改圖片路徑img.attr(‘src‘, data[page]);//img.attr(‘src‘, ‘pages/‘ +  page + ‘.jpg‘);

 

turn.js 圖書翻頁效果