漫画公開用ページに適した『mangaviewer』作ってみた。


mangaviewer

今回はjQueryで漫画ビューアを作ってみました。更新もできるだけ簡単にできるように設計しました!

デモページはこちらから

実装は以下の手順で行ってみてください。

ファイルのダウンロード

http://yukiji.net/download/mangaviewer-1.0.zip

画像を用意する

・漫画中身のページを用意し、一つのフォルダにまとめます。(半角英数字)
・フォルダ内の画像の名前はすべて1から数える連番にしてください。
・保存形式はすべて[jpeg]で保存してください。

設定項目を変更する

設定項目は5つだけです。
index.htmlをテキストエディターで開くと以下の項目がありますので、適宜変更してくださいませ。

var page = 23;
↑画像の数を指定します。

var dividePerPage = 20;//ページボタンの幅調整
↑ページ数が大量にある場合はページボタンが長く画面外にいってしまいます。
これを防ぐために途中で改行させる必要があります。

var name = ‘manga1’;//フォルダ名
↑ページ画像が入ったフォルダ名を指定してください。

var width = ‘400’;//画像幅(px)
↑1ページ分のページ画像の横幅を指定しください。

var backToPage = ‘http://yukiji.net’//戻るリンク先のパス
↑最後に戻る先のパスを指定してください。

設定は以上です!

新しいタイトルを追加したい場合の手順

1.新しいフォルダ、画像を用意する。
2.index.htmlをコピーして名前を変えて保存する。
3.index.html内のnameに新しいフォルダ名に変更させる。

以上!