moomemo

アフィリエイト広告を掲載しています。
HOMEWebサイト制作pixivっぽい（？）jQueryスライダー
2020年11月22日 2023年10月01日

pixivっぽい（？）jQueryスライダー

新しいバージョンがあります：pixivっぽい（？）jQueryスライダー【改】

pixivっぽい（？）jQueryスライダー【改】 pixivっぽい（？）jQueryスライダー【改】 以前作った「pixivっぽい（？）jQueryスライダー」はパソコンから見ると概ねいい感じの動きなのですが、スマホから見ると二回タップしないとスクロールしなかったり、画像が真ん中に表示されないのが嫌だったので少し改造しま […]

実績公開可能な仕事のイラストや漫画のポートフォリオを作りたいけれど、pixivで公開できないものもあるため自分のサイトへパスワードをかけて置いておこうと思ったのが動機です。
いちいちHTMLを編集するのも億劫な量なので、ディレクトリ内の画像データを自動で読み取って表示するものぐさ仕様。
pixivっぽさ（？）を目指したのは見る人も慣れているだろうと思ったためですが、リンクでの拡大表示を省いたため、1ページずつ表示する電子書籍の挙動に近いかもしれません。

機能

  1. [PHP] 指定したディレクトリ内のpngを取得してHTMLへ書き出す。
  2. [jQuery] ページを読み込んだ際に一番初めのimgへfirst activeクラスを、一番最後のimgへlastクラスを付与する。
  3. [jQuery] 画面の上下に配置したnext/prevがクリックされたら次/前のimgへactiveクラスを付与し、activeクラスのあるimgのトップへスクロールする。
  4. [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();
  });
});

参考

おすすめ書籍

関連記事