jQueryプラグイン「漫画ビューア」が公開されました


漫画ビューア

以前、自分が作った「mangaviewer」@作者さんがさらに改良を加えて使いやすくなりました!

特長

jQueryで動く漫画ビューアーです。通常のギャラリー用とは違い、総ページ数と現在閲覧してるページを一目で把握することができます。次(前)のページに行きたい場合、画像をクリックするか、下部のnext(prev)ボタンをクリックすることでページ移管します。今回、オプションもいくつか増えて、プラグイン化したことで設定が分かりやすくなりました!さらに別プラグインと連携してモーダルウィンドウで表示することができるようになりました!

使い方

ダウンロード

以下のページからファイルをダウンロードします。
http://conpallo.com/app/free_contents/mangaviewer.html

ページ画像の用意

ダウンロードしたファイルにmanga1というフォルダがあります。ここに表示させたいページ画像を格納します。画像の命名規則は1から連番で、拡張子は揃えてください。フォルダ名、拡張子は任意に変更することが可能で後述します。

プラグインの設置

jQuery

HTMLファイルの<head>内に以下のコードを記述します。

<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: 9,   //ページ数
            path: 'manga1', //ディレクトリパス
            ext: 'jpg', //拡張子
            page_ejection: 'right' //ページ送り
        });
    });
</script>

page: 画像の枚数と同じに数字にして下さい。
path: 初期ではmanga1となっていますが、フォルダ名や階層を変えたい場合はここで設定します。
ext: 拡張子がPNG画像の場合はpngにしてください。
page_ejection: ページ送りをどちらにするか設定します。
HTML

HTMLファイルのページビューアを出力したい場所に対応した要素を記述します。先ほどのjQeuryの設定では#viewerとなっているので、以下のように記述します。

<div id="viewer"></div>

CSS

ビューアの装飾CSSをHTMLの<head>内か、外部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;
    }

さいごに

作者さんのサイトでは他のプラグインと連携してモーダルウィンドウに対応したものも紹介されています。そのまま設置してもよし、CSSをいじって自分なりに装飾してもよしとなっていますね。自分のものよりもかなり改良されているので、ぜひお使いください。ありがとうございました!