完成コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-min.js"></script>
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.js"></script>
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery.ui.touch-punch.min.js"></script>
<style>
:root {
--pxw:500px;/*投稿する画像のPXの幅*/
--pxh:400px;/*投稿する画像のPXの高さ*/
}
.img-frame{
border:solid 1px;
width:var(--pxw);
height:var(--pxh);
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
position:relative;
}
.dslider{
color:blue;
width:var(--pxw);
display: block;
margin-left: auto;
margin-right: auto;
}
.bu{
width:var(--pxw);
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width:480px){
.img-frame{
width: 100%;
height: 100%;
}
.dslider{
width: 100%;
}
.bu{
width:100%;
}
}
#moveOn{
margin-right:0.4em;
width:3em;
height: 2.8em;
}
#Return{
margin-right:0.4em;
width:3em;
height: 2.8em;
}
#autoPlay{
margin-right:0.4em;
width:4em;
height: 2.8em;
}
#zoom{
margin-right:0.4em;
width:3em;
height: 2.8em;
}
#zoomout{
margin-right:0.4em;
width:3em;
height: 2.8em;
}
</style>
</head>
<body>
<div class="img-frame">
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/04/test1.png"/>
</div>
<p ></p>
<div class="dslider">
<div id="slider"></div>
</div>
<p></p>
<div class="bu">
<button id="moveOn">▶</button>
<button id="Return">◀</button>
<button id="autoPlay">再生</button>
<button id="zoom">＋</button>
<button id="zoomout">－</button>
</div>
<p></p>
<script type="text/javascript">
var index = 1;
const image = "https://lifeinfo-navi.com/wp-content/uploads/2022/04/test";
let img = document.getElementById("imagePlace");
var maximg = 5;//画像の枚数
// moveOnの設定
document.getElementById("moveOn").onclick = function(){
index++;
$( "#slider" ).slider( "value", index );
if(index>maximg){
index=1
$( "#slider" ).slider( "value", index );
}
img.src = image + index + ".png";
}
// Returnの設定
document.getElementById("Return").onclick = function(){
index--;
$( "#slider" ).slider( "value", index );
if(index<1){
index=maximg;
$( "#slider" ).slider( "value", index );
}
img.src = image + index + ".png";
}
document.getElementById("autoPlay").onclick = function(){
switch(document.getElementById("autoPlay").innerHTML){
case "再生" :
document.getElementById("autoPlay").innerHTML = "停止";
intervalID = setInterval(function(){
index++;
$( "#slider" ).slider( "value", index );
if(index>maximg){
index=1
$( "#slider" ).slider( "value", index );
};
img.src = image + index + ".png";
},1000)
break;
case "停止":
clearInterval(intervalID);
document.getElementById("autoPlay").innerHTML = "再生";
break;
};
}
//マウスのホイールによるパラパラ
document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});
function wheelpa(event){
event.preventDefault();
if (event.wheelDelta == -120){
console.log("手前")
index++;
$( "#slider" ).slider( "value", index );
if(index>maximg){
index=1
$( "#slider" ).slider( "value", index );
}
img.src = image + index + ".png";
}
if (event.wheelDelta == 120){
console.log("おく")
index--;
$( "#slider" ).slider( "value", index );
if(index<1){
index=maximg
$( "#slider" ).slider( "value", index );
}
img.src = image + index + ".png";
}
}
//スライダー #jquery UI
$(function() {
let img = document.getElementById("imagePlace");
$('#slider').slider({
min: 1,
max: maximg,
step: 1,
value: 1,
slide: function(event, ui) {
index = ui.value;
img.src = image + index + ".png";
}
});
});
//画像移動#jquery UI
$( function() {
let img = document.getElementById("imagePlace");
$( "#imagePlace" ).draggable();
} );
//画像拡大と縮小
var x = 1 ;
document.getElementById("zoom").onclick = function(){
console.log('afdaf')
x = x + 0.2;
if(x<1){
x = 1.2;
}
document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";
}
document.getElementById("zoomout").onclick = function(){
x = x - 0.2;
if(x<1){
x = 1;
console.log("111")
}
document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";
}
</script>
</body>
</html>解説
5～8行目
〇jQuery (JSファイル）
〇jQuery-ui（JSファイルとCSSファイル）
〇jquery-ui-touch-punch（JSファイル）
上記のファイルをダウンロードしてください。
ご自身のサーバーにアップロードして、URLでパスを指定ください。
パラパラ漫画を試したい場合は、私の「https://lifeinfo-navi.com・・・」のようにURLで指定したパスをそのままお使いください。
ご自身のローカル環境でパラパラ漫画を試したい場合は以下の記事を参照してください。
〇【JQuery入門】環境構築の方法。
11～12行目
「–pxw」は画像の幅のPXサイズを指定してください。
「–pxh」は画像の高さのPXサイズを指定してください。
82行目
パラパラ漫画で初めに表示されている画像（表紙）のURLを指定してください。
101行目
サンプルのパラパラ漫画の画像URLは以下になります。
https://lifeinfo-navi.com/wp-content/uploads/2022/04/test1.png
https://lifeinfo-navi.com/wp-content/uploads/2022/04/test2.png
https://lifeinfo-navi.com/wp-content/uploads/2022/04/test3.png
https://lifeinfo-navi.com/wp-content/uploads/2022/04/test4.png
https://lifeinfo-navi.com/wp-content/uploads/2022/04/test5.pngご使用になるパラパラ漫画のURLは「.png」や「.jpeg」の前に数字が1から連番になっている必要あります。
連番になる前の固定のURLの部分を101行目に記事してください。
103行目
パラパラ漫画で使用する画像枚数を入力してください。
139行目
再生ボタンを押すと1000ミリ秒（１秒）ごと画像がコマ送りされていきます。
例えば、「心臓カテーテル検査」で秒30コマ（30フレームレート）で撮影したとします。
1000÷30≒33.3となり、デォルトで設定されている「1000」を「33.3」にすれば、臨床の現場で見る映像にすることができます。
その他
もし、スライダーの大きさを変更したい場合は「jQuery-ui」のCSSの以下の部分の「font-size」を変更してください。
.ui-widget {
font-family: Arial,Helvetica,sans-serif;
font-size: 1.7em;
}
パラパラ漫画のコードを短くしたい方へ
パラパラ漫画のコードは多少は短くすることができます。
5～8行目はワードプレスの「高度な設定」を済ませた方は毎回記述する必要がありません。
〇「高度な設定」でJSとCSSを読み込む方法。
14～76行目はCSSファイルに記述すれば、5～8行目のように外部ファイルを読み込むコードを書いてください。（うまくいくはずです。）
不具合の報告
不具合があったり、改善して欲しいことがあれば、ツイッターでDMを送るか、当サイトにコメントをください。
ちなみに、1つの記事に2つ以上のパラパラを貼り付けもうまく動作しません。
1つの記事に1つのパラパラ漫画をご使用ください。
もし、1つの記事に複数のパラパラ漫画を使用したい場合は、「JavaScript」の「Web Workers」を使用して、並列処理を試みてください。
DMで並列処理のリクエストがあれば、私もチャレンジするかもしれません。気軽にご連絡してください。!(^^)!
さいごに
パラパラ漫画作成当初は、ロゴを入れようと考えていました。
〇パラパラ漫画にロゴを入れてみた。
しかし、パラパラ漫画を作成された方にとっては邪魔でしかないので、削除しました。
その代わりにどのような形でも構いませんので、パラパラ漫画の使用の際には私のサイトのリンクをブログに貼り付けて頂ければ幸いです。
＜例＞
パラパラ漫画は以下のサイトで作成しました。
〇パラパラ漫画【完成コードの解説】
どうぞよろしくお願い致します。('ω')