2020年11月22日
2023年10月01日
pixivっぽい(?)jQueryスライダー
新しいバージョンがあります:pixivっぽい(?)jQueryスライダー【改】
実績公開可能な仕事のイラストや漫画のポートフォリオを作りたいけれど、pixivで公開できないものもあるため自分のサイトへパスワードをかけて置いておこうと思ったのが動機です。
いちいちHTMLを編集するのも億劫な量なので、ディレクトリ内の画像データを自動で読み取って表示するものぐさ仕様。
pixivっぽさ(?)を目指したのは見る人も慣れているだろうと思ったためですが、リンクでの拡大表示を省いたため、1ページずつ表示する電子書籍の挙動に近いかもしれません。
機能
- [PHP] 指定したディレクトリ内のpngを取得してHTMLへ書き出す。
- [jQuery] ページを読み込んだ際に一番初めのimgへfirst activeクラスを、一番最後のimgへlastクラスを付与する。
- [jQuery] 画面の上下に配置したnext/prevがクリックされたら次/前のimgへactiveクラスを付与し、activeクラスのあるimgのトップへスクロールする。
- [jQuery] first/lastクラスとactiveクラスが同時に付与されている場合、next/prevを非表示にする。
コード
<body id="book">
<?php
$dir_name = dir("./");
while ( $file_name = $dir_name -> read()) {
$path = $dir_name -> path . "/" . $file_name;
if (@getimagesize($path)) {
echo '<div class="img"><img src="'.$file_name.'"></div>'."\n";
}
}
$dir_name -> close();
?>
<p class="nav prev"></p>
<p class="nav next"></p>
</body>
#book {
margin: 0;
padding: 0;
}
#book div.img {
height: 100vh;
}
#book img {
display: block;
margin: 0 auto;
padding: 0;
height: 100vh;
}
.prev {
margin: 0;
padding: 0;
position: fixed;
width: 100vw;
height: 25vh;
top: 0;
opacity: 0;
background: url(img/nav_prev.png) no-repeat top center;
}
.prev:hover {
opacity: 1;
}
.next {
margin: 0;
padding: 0;
position: fixed;
width: 100vw;
height: 25vh;
bottom: 0;
opacity: 0;
background: url(img/nav_next.png) no-repeat bottom center;
}
.next:hover {
opacity: 1;
}
@media only screen and (max-width: 480px) {
#book div.img {
background: #000;
}
#book img {
margin: 0;
width: 100vmin;
height: auto;
}
.prev {
height: 50vh;
background: none;
}
.next {
height: 50vh;
background: none;
}
}
$(function () {
$("div:first").addClass("first active");
$("div:last").addClass("last");
function toggleChangeBtn() {
var indexF = $(".first").index();
var indexA = $(".active").index();
var indexL = $(".last").index();
$(".nav").show();
if(indexF == indexA) {
$(".prev").hide();
} else if(indexL == indexA) {
$(".next").hide();
}
toggleChangeBtn();
$(".next").click(function() {
var targetY = $(".active").next().offset().top;
var $target = $(".active");
$target.removeClass("active");
$target.next("div").toggleClass("active");
$("html,body").animate({scrollTop:targetY});
toggleChangeBtn();
});
$(".prev").click(function() {
var targetY = $(".active").prev().offset().top;
var $target = $(".active");
$target.removeClass("active");
$target.prev("div").toggleClass("active");
$("html,body").animate({scrollTop:targetY});
toggleChangeBtn();
});
});
参考
- ディレクトリ内にある画像を一覧表示 | webデザイン受講生の日々の勉強の様子
- 超簡単!jQueryでスライダーを自作 | Qiita
- jQuery:スクロールするレイヤー内で指定位置までスクロールさせる | ハックノート
おすすめ書籍
リンク
リンク