電子書籍なんかでは普通にありますが、
ブラウザ上でペラペラと画像をめくれるものを作ってみた。
基本的にはカルーセルとかの応用を元に作っていたのですが
スワイプなんかで挫折して以下のものであっさりと作ってみた
jQuery
説明の必要はないかな。JavaScriptとかいろいろと捗るヤツ
bootstrap(http://twitter.github.com/bootstrap/)
Twitter社が出してるCSSのフレームワーク
carouFredSel[http://caroufredsel.dev7studios.com/]
jQueryのプラグインでカルーセル機能でいろんな機能がある。
これを使うとすんなり画像をペラペラめくるものがブラウザー上で作成できる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Book Reader</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.carouFredSel-6.2.0-packed.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
</head>
<body style="padding-top: 10px;">
<style>
a, a:link, a:active, a:visited
{
color: black;
text-decoration: underline;
}
.listcarousel
{
background-color: #ccc;
margin: 0 10 0px 10px;
}
.listcarousel ul
{
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.listcarousel li
{
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 896px;
height: 896px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.listcarousel.responsive
{
width: auto;
margin-left: 0;
}
.pager
{
float: left;
height: 32px;
text-align: center;
word-break: break-all;
}
.pager a
{
margin: 0 5px;
text-decoration: none;
}
.pager a.selected
{
text-decoration: underline;
}
</style>
<noscript><p>JavaScriptの設定を有効にしてください。</p></noscript>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="listcarousel responsive">
<ul id="carouselobject">
<?php
//ディレクトリオープン
$resdir = opendir( './samplebook/' );
// ファイル名取得
while( false !== ( $filename[] = readdir( $resdir ) ) );
closedir( $resdir );
// 並べ替え
sort($filename);
$page = "1";
$filecount = count($filename);
//ディレクトリ内のファイル名を１つずつを取得
for( $i = 0; $i < $filecount; $i++ )
{
// 画像のみ表示
if( pregmatch("/.jpg$|.gif$|.png$|.bmp$|.jpeg$/i", $filename["$i"]) )
{
echo " <li><img src=\"./samplebook/" . $filename["$i"] . "\" alt=\"" . $page . " page\" style=\"height: 896px;\"></li>\n";
$page++;
}
}
//echo " <li><a href=\"#\" style=\"height: 960px;\">Next Book</a></li>\n";
?>
</ul>
<div class="clearfix"></div>
<input type="button" id="prev" class="prev left carousel-control" style='width: 64px' value="<"></a>
<input type="button" id="next" class="next right carousel-control" value=">"></a>
<div id="pager" class="pager"></div>
</div>
</div>
</div>
</div><!-- End span -->
</div><!-- End row -->
</div><!-- End container -->
<script>
<!--
$(function() {
// Scrolled by user interaction
$('#carouselobject').carouFredSel({
auto: false,
width: '100%',
responsive: true,
prev: '#prev',
next: '#next',
pagination: "#pager",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
});
//-->
</script>
</body>
</html>ルートディレクトリ(index.phpとか)
├/css/
├/helper-plugin/
├/img/
├/js/
└/samplebook/関連記事
