概要
このプラグインは yukiji さんの作成された「mangaviewer」を元にカスタマイズしたプラグインです。
カスタマイズ、再配布許可は頂いています。
ファイルダウンロード
変更点
  • ビューア生成先のセレクタを自由に設置可能
  • 画像形式を拡張子で指定可能
  • デザインの自由度を上げるため、bootstrap等のCSSを撤廃
  • ページ送りの方向を指定可能
オプション
page読み込む画像数を指定してください
path画像データの格納先ディレクトリを指定してください
ext画像の形式を指定してください
page_ejectionページ送り方向を指定してください。
「右送り:right、左送り:left」※デフォルト(指定なし)は右送りになります
設置例

表示する漫画データは一つのフォルダにまとめ、フォルダ名は半角英数にしてください
また、漫画データは全て1から連番で名前をつけてください。

〇デフォルト(ページ左送り)

デモ

jQuery
jquery.jsとmangaviewer.jsを読み込み、
漫画ビューア出力先要素のセレクタ(idやclass)を指定してプロパティを設定します。
				<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
				<script src="js/jquery.mangaviewer.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(document).ready(function() {
						// 漫画ビュアープロパティ
						$('#viewer').mangaviewer({
							page: 23,	//ページ数
							path: 'manga1',	//ディレクトリパス
							ext: 'jpg',	//拡張子
							page_ejection: 'right' //ページ送り
						});
					});
				</script>
			

html
漫画ビューアを出力したい位置にプロパティで設定したセレクタに
対応した要素を設置します。
				<div id="viewer"></div>
			

CSS
必要に応じてデザインを設定してください。
				<style>
					/* mangaviewer css */
					#viewer .sheet{
						width:100%;
						text-align:center;
					}
					#viewer img{
						width:300px;
						cursor:pointer;
					}

					#viewer #page-link{
						clear:both;
						text-align:center;
					}
					#viewer #page-link .btn.active{
						border: inset 2px #086A87;
						background-color:#2E9AFE;
					}
					/* mangaviewer css */
				</style>
			

〇モーダルウィンドウ連携(おまけ)

このデモは「leanModal」のjQueryプラグインと連携しています。
実装する際は「leanModal」より leanModal.js をダウンロードしてください。
また leanModal.js の使用方法は各自でお調べください。

デモ

jQuery
				<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
				<script src="js/jquery.mangaviewer.js" type="text/javascript"></script>
				<script src="js/jquery.leanModal.min.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(document).ready(function() {
						// 漫画ビュアープロパティ
						$('#viewer').mangaviewer({
							page: 23,	//ページ数
							path: 'manga1',	//ディレクトリパス
							ext: 'jpg',	//拡張子
							page_ejection: 'right' //ページ送り
						});
	
						// モーダルウィンドウプロパティ
						$('a[rel*=leanModal]').leanModal({
							top: 50,	// モーダルウィンドウの縦位置を指定
							overlay : 0.5,	// 背面の透明度 
							closeButton: ".modal_close"	// 閉じるボタンのCSS classを指定
						});
					});
				</script>
			

html
				<a id="test" rel="leanModal" href="#div787">Edit</a>
				<div id="div787">
					<div id="viewer"></div>
					<div class="modal_close"><b>×</b></div>
				</div>
			

CSS
				<style>
				/* modal css */
				#lean_overlay{
					position: fixed; z-index:100; 
					top: 0px;
					left: 0px;
					height: 100%;
					width: 100%;
					background: #000;
					display: none;
				}
				#div787{
					background: none repeat scroll 0 0 #FFFFFF;
					box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
					display: none;
					padding: 30px;
					width: 75%;
				 }
				.modal_close{ 
					position: absolute;
					top: 12px;
					right: 12px;
					display: block; 
					width: 14px;
					height: 14px; 
					background: url(../img/modal_close.png);
					z-index: 2;
					color:red;
					cursor:pointer;
				}
				/* modal css */

				/* mangaviewer css */
				#viewer img{
					width:50%;
					cursor:pointer;
				}

				#viewer img.left_page{
					float:left;
				}
				#viewer img.right_page{
					float:right;
				}

				#viewer #page-link{
					clear:both;
					text-align:center;
				}
				#viewer #page-link .btn.active{
					border: inset 2px #086A87;
					background-color:#2E9AFE;
				}
				/* mangaviewer css */
				</style>