自サイト用・次の画像プラグイン

新都社×まんがおきば連携作品

作：きつねこ

新都社・まんがおきばでは、画像クリックで次の画像にスクロールするようになってます

自サイトだとそういう機能がなくて、スマホでスワイプしたりマウスでスクロールするのがすごく面倒臭い

なので、自サイト用のプラグインをつくりました

もしよければ使ってください

◆自サイト用・次の画像プラグイン

（１）jsファイルをダウンロード

https://manga.okiba.jp/js/k2_page_controller.zip

（２）ダウンロードしたファイルを解凍

k2_page_controller.js ができます

（３）ファイルをサーバに設置

（４）HTML編集

以下のコードを　htmlの <head></head> 内に埋め込む
※最初の行は、jquery導入済のページには不要です
※k2_page_controller.js のパスは設置ディレクトリに応じて適宜調整してください
↓のサンプルだと、htmlと同じディレクトリにjsが配置されている想定です

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="k2_page_controller.js"></script>
<script>
  $(function(){
    $('img').click(function(){
      k2pc.nextElement('img');
    });
  });
</script>

（５）解説

$('img').click により、<img>タグがクリックされたときに機能が発動します

k2pc.nextElement('img'); により、次の<img>に進みます

サンプルだと、画面上の全部の<img>タグに対して有効なので
必要に応じて適宜class指定などすると幸せになれるかもしれません

たとえば、漫画画像にだけ <img class="page"> のようにしたとき

$('img.page').click(function(){
  k2pc.nextElement('img.page');
});

とすることで、漫画画像をクリックしたときだけ、次の漫画画像に移動する　とできます

「次の画像に移動」と書いてますが、厳密には、画面の上端部ぴったりより下にある要素に移動します
クリックした画像の次の画像に移動するわけではないです
（そういう機能も過去作ったけど、イマイチ使い勝手が悪かった）

わかんなかったら相談ください　できる範囲でサポートします

（６）APIマニュアル

・k2pc.nextElement
　・次の要素に移動できます

・k2pc.prevElement
　・前の要素に移動できます

・k2pc.toTop
　・ページの先頭に移動できます

・k2pc.toBottom
　・ページの最後に移動できます

きつねこ先生に励ましのお便りを送ろう！！

〒みんなの感想を読む

TOP ▲ ▼