WordPressでも利用可能な拡大画像スライダー－jquery-zoomSlider（プラグイン）

作成した背景

WordPressで複数の写真をギャラリー表示させた記事を作成したのですが、写真が小さく見切れて表示しまうため、クリックで拡大表示できるようにしたいと思い作成しました。

こだわった点としては画像が1～2枚であれば全然問題ないのですが拡大パネル内に表示する画像が1000枚を超えてくるとすべての画像をスライダーに設定する際に処理時間がかかってしまいます。パフォーマンスを向上させる目的で拡大したタイミングで対象画像をスライダーに追加するような仕組みにしています。

デモ

こちらにデモページを用意しているのでご利用ください。

使い方

用途に応じて以下のようなオプションが用意されています。必要に応じて使い分けてください。

オプション一覧

• targetClass(default:img) ・・・ 拡大する画像要素
• animateType(default:ANIMATE_TYPE.SLIDE) ・・・ アニメーションの種類
• slideSpeed(default:300) ・・・ スライド速度
• carousel(default:false) ・・・ ローテートさせるかどうか
• autoSlide(default:false) ・・・ 自動スライドさせるどうか
• autoSlideInterval(default:5000) ・・・ 自動スライドさせる間隔(ミリ秒)
• hoverPause(default:false) ・・・ 子要素にマウスオーバーすると自動スライドを一時停止する。
• slideCallBack(default:null) ・・・ スライド後に処理を行うコールバック(本プラグインで想定していない処理はここでカスタマイズする)
• openCallBack(default:null) ・・・ 拡大表示後のコールバック
• arrayCnt(default:20) ・・・ 初期表示でロードする拡大画像内要素の数

Javascript

 <script src="https://demo.isystk.com/jquery-isystkOverlay/js/jquery-isystkOverlay.js"></script>
<script src="https://demo.isystk.com/jquery-isystkSlider/js/jquery-isystkSlider.js"></script>
<script src="https://demo.isystk.com/jquery-zoomSlider/js/jquery-zoomSlider.js"></script>
<script type="text/javascript">
$(function() {
 $('.js-zoomSlider').zoomSlider({
 'animateType': $.fn.zoomSlider.ANIMATE_TYPE.SLIDE,
 'carousel': true,
 'isFullScreen': true,
 'slideCallBack': function(data) {
 }
 });
});
</script> 

Css

/* オーバーレイ */
#overlay-background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#0e0e0e;
opacity:0.5;
z-index:1000
}
.isystk-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1100;
visibility: hidden;
transition: .1s linear;
}
.isystk-overlay .wrap {
background: #fff;
max-width:100%;
}
.isystk-overlay.open {
visibility: visible;
animation: open-animation .5s ease 0s 1 forwards;
}
@keyframes open-animation {
0% {
  transform: scaleY(.1) scaleX(.1);
}
50% {
  transform: scaleY(1) scaleX(.1);
}
100% {
  transform: scaleY(1) scaleX(1);
}
}
.isystk-overlay .close {
position: absolute;
right: 0;
margin: 10px 15px;
zoom: 100%;
color: #333;
z-index:1;
}
.isystk-overlay .close {
background: url('./images/close.png') 0 0 no-repeat;
background-size:100% auto;
width: 30px;
height: 30px;
}
.isystk-overlay .next-btn {
background: url('./images/btn-next.png') 0 0 no-repeat;
background-size:100% auto;
width: 30px;
height: 30px;
}
.isystk-overlay .prev-btn {
background: url('./images/btn-prev.png') 0 0 no-repeat;
background-size:100% auto;
width: 30px;
height: 30px;
}
  
 
/* 画像スライダー */
.isystkSlider {
position: relative;
max-width: 100%;
overflow: hidden;
}
.isystkSlider .view-layer {
max-width: 100%;
overflow: hidden;
}
.isystkSlider ul.parent{
margin-bottom:10px;
}
.isystkSlider li.child{
float:left;
}
.isystkSlider .prev-btn,
.isystkSlider .next-btn{
position: absolute;
top: 50%;
margin-top: -1em;
width: 30px;
}
.isystkSlider .prev-btn img,
.isystkSlider .next-btn img{
width: 30px;
}
.isystkSlider .next-btn{
right: 0;
}
 
/*ギャラリー*/
.entry-content .wp-block-gallery ul{
border:none;
}
.entry-content .wp-block-gallery ul li:before {
content: none !important;
}
.entry-content .wp-block-gallery li{
float:left;
}
.entry-content .wp-block-gallery li p{
margin:0 5px 0 0;
border:solid 1px #dedede;
background:#fff;
padding:3px;
} 

ソースコード

https://github.com/isystk/jquery-zoomSlider