TurnJSを動作させるのに問題があります。すべての画像を動的に読み込んでいます。最初にすべての画像が表示されます。ページが読み込まれてから数秒後、最初と 2 番目の画像が表示され、残りは非表示になります。ホバーで移動しますが、フリップブック全体が機能せず、ページが変更されません（基本バージョンでこれを機能させようとしたときとは異なり、ページをめくるのに完璧ではありませんでした）、ロードしている可能性があると思いますjquery を間違った順序で (以下を参照):
$this->template->styles['/assets/css/magazine.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.html4.css'] = 'screen';
$this->template->jscripts[]='assets/libraries/modernizr.2.5.3.min.js';
$this->template->jscripts[]='assets/libraries/jgestures.min.js';
$this->template->jscripts[]='assets/libraries/jquery-ui-1.8.20.custom.min.js';
$this->template->jscripts[]='assets/libraries/jquery.mousewheel.min.js';
$this->template->jscripts[]='assets/scripts/turn.js';
$this->template->jscripts[]='assets/scripts/turn.min.js';
$this->template->jscripts[]='assets/scripts/turn.html4.js';
$this->template->jscripts[]='assets/scripts/turn.html4.min.js';
$this->template->jscripts[]='assets/scripts/hash.js';
$this->template->jscripts[]='assets/scripts/zoom.js';
$this->template->jscripts[]='assets/scripts/zoom.min.js';
$this->template->jscripts[]='assets/scripts/magazine.js';
Jquery は既に読み込まれているので、必要な追加のライブラリ/スクリプトだけをここで再度読み込む必要はありません。私がfirebugで得ている次のエラーは次のとおりです。
- TypeError: $(...).turn は関数ではありません
- TypeError: Node.insertBefore の引数 1 はインターフェース Node を実装していません。
- getPreventDefault() の使用は非推奨です。代わりに defaultPrevented を使用してください。
- TypeError: book.turn は関数ではありません
ここにコードを追加したので、私が行ったことを確認できます。ヘルプ/ガイダンスをいただければ幸いです。
これが私がここで目指しているものです
firebug のスクリプトの下を見ると、次の順序で表示されます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='/apps/assets/libraries/jquery-1.6.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="/apps/assets/libraries/jquery-ui-1.8.12.custom.min.js"></script>
...そして、すべてのスクリプトが続きます。最初にjqueryをロードしていることを示していますか?