ページの角にマウスを乗せると、ページがめくれるよ
レスポンシブにする方法がわからないので、スマホではうまく表示できませんでした
スマホ用に小さいものも作りました
ページの角にマウスを乗せると、ページがめくれるよ
ファイルをダウンロードして、解凍します
サーバーにFTPでturn.jsファイルをアップロードします
ルートにjsフォルダを作成してその中に入れました
ヘッダーに追加
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/turn.js"></script>
フッターのbodyの直前に追加
<script>
$('#magazine').turn();
</script>
これでもいいのですが、いろんなサイズを作成する場合はCSSで設定できないので
<script type="text/javascript">
$("#magazine").turn({
width: 600,
height: 300,
autoCenter: true
});
</script>
HTML
<div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
<div style="background-image:url(pages/05.jpg);"></div>
<div style="background-image:url(pages/06.jpg);"></div>
</div>
CSS
#magazine{
width:600px;
height:300px;
}
#magazine .turn-page{
width:300px;
height:300px;
background-color:#ccc;
}
もし、同一サイトでバージョンの違うｊQueryを複数使いたい場合は
<!--jQuery1呼び出し-->
<script type='text/javascript' src='./js/jquery_jcarousel/jquery-1.4.3.pack.js'></script>
<!--jQuery2呼び出し-->
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
<!--jQuery2を使いたい-->
<script type='text/javascript'>
var $171= jQuery.noConflict(true);
$171(document).ready(function(){
$171('#hoge').jcarousel();
});
</script>
<!--jQuery1を使いたい-->
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#abc').jcarousel();
});
</script>
このようにすると良いようです⇒同一サイトでバージョンの違うｊQueryを複数呼び出した場合に回避する方法
通常は右開きになるようになっています
この開き方を左右変えたい場合は、optionのdirectionを変更すれば良いです
$(“#flipbook”).turn({direction: “rtl”});
rtl はleft to rightです
デフォルト値はltrです
