スライダーといえばbxsliderを使用していることも多いと思いますが今回は、サムネイル付きのbxsliderとlightbox風（サムネイル）を組み合わせたサンプルになります。
サムネイル付きのスライダーはよく見ると思いますがメインの画像をクリックしたらlightboxが表示されるパターンになります。
スライダーとlightboxの挙動
まずスライダーの下のサムネイルをクリックすることでメイン画像をスライドで入れ替えることができます。
そしてメイン画像をクリックしたらlightboxを表示させることができます。
そして表示されたlightboxには、さらにメイン画像とサムネイルがあり画像を切り替えることができるパターンになります。
表示されたlightboxはスライダーさせずにクリックしたら画像が切り替わるシンプルな形なのでプラグインは使用していないです。
それではソースを見ていきましょう。
サムネイル付きbxslider+lightbox風サムネイル
html
クラス名「slider」で囲まれているところがbxsliderを使ったスライダー部分になります。
「lightbox」で囲まれたところがメイン画像をクリックしたときに表示されるlightbox部分になります。
<div class="slider">
<div class="slider-frame">
<div class="index01"><img src="img/img01.jpg" alt=""></div>
<div class="index02"><img src="img/img02.jpg" alt=""></div>
<div class="index03"><img src="img/img03.jpg" alt=""></div>
<div class="index04"><img src="img/img04.jpg" alt=""></div>
</div>
<div class="thumb">
<a data-slide-index="0" href="#"><img src="img/img01.jpg" alt=""></a>
<a data-slide-index="1" href="#"><img src="img/img02.jpg" alt=""></a>
<a data-slide-index="2" href="#"><img src="img/img03.jpg" alt=""></a>
<a data-slide-index="3" href="#"><img src="img/img04.jpg" alt=""></a>
</div>
</div>
<div class="overlay"></div>
<div class="lightbox">
<span class="close">閉じる</span>
<div class="lightbox-inner">
<div class="lightbox-cont index01">
<h2>lightboxの1番目</h2>
<div class="lightbox-main">
<img src="" alt="">
</div>
<div class="lightbox-thumb">
<span><img src="img/img01.jpg" alt=""></span>
<span><img src="img/img06.jpg" alt=""></span>
<span><img src="img/img07.jpg" alt=""></span>
</div>
</div>
<div class="lightbox-cont index02">
<h2>lightboxの2番目</h2>
<div class="lightbox-main">
<img src="" alt="">
</div>
<div class="lightbox-thumb">
<span><img src="img/img02.jpg" alt=""></span>
<span><img src="img/img08.jpg" alt=""></span>
<span><img src="img/img09.jpg" alt=""></span>
</div>
</div>
<div class="lightbox-cont index03">
<h2>lightboxの3番目</h2>
<div class="lightbox-main">
<img src="" alt="">
</div>
<div class="lightbox-thumb">
<span><img src="img/img03.jpg" alt=""></span>
<span><img src="img/img10.jpg" alt=""></span>
<span><img src="img/img11.jpg" alt=""></span>
</div>
</div>
<div class="lightbox-cont index04">
<h2>lightboxの4番目</h2>
<div class="lightbox-main">
<img src="" alt="">
</div>
<div class="lightbox-thumb">
<span><img src="img/img04.jpg" alt=""></span>
<span><img src="img/img12.jpg" alt=""></span>
<span><img src="img/img13.jpg" alt=""></span>
</div>
</div>
</div>
</div>css
img{width: 100%;max-width: 100%;}
.thumb a img{width: 22%;}
/* lightbox */
.lightbox{
opacity: 0;
position: fixed;
top: 10px;
width: 90%;
overflow-y: auto;
max-height: 50vw;
left: 50%;
margin: 0 0 0 -45%;
background: #fff;
padding: 20px;
box-sizing: border-box;
transform: scale(0,0);
transition: all .2s ease-in;
z-index: 2;
}
body.on .lightbox{
opacity: 1;
transform: scale(1,1);
}
.lightbox-cont{display: none;}
.lightbox-thumb{display: flex;}
.lightbox-thumb span{
padding: 0 2px;
display: inline-block;
}
/* 背景 */
.overlay{
display: none;
cursor: pointer;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
z-index: 1;
}
body.on .overlay{display: block;}jQuery
jQuery(function() {
jQuery('.slider-frame').bxSlider({
auto: false,
controls: false,
slideMargin: 5,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideWidth: 960,
pagerCustom: '.thumb'
});
//クリック
jQuery('.slider-frame > div').on('click', function() {
jQuery('body').addClass('on');
var class_name = jQuery(this).attr('class');
var img = jQuery(this).find('img').attr('src');
jQuery('.lightbox-cont.' + class_name).find('.lightbox-main img').attr('src', img);
jQuery('.lightbox-cont').hide();
jQuery('.lightbox-cont.' + class_name).show();
});
//閉じる
jQuery('.lightbox .close').on('click', function() {
jQuery('body').removeClass('on');
});
//背景
jQuery('.overlay').on('click', function() {
jQuery('body').removeClass('on');
});
//サムネイルクリック
jQuery('.lightbox-thumb img').on('click', function() {
var thumb_img = jQuery(this).attr('src'); //クリックした画像のパスを取得
jQuery(this).parents('.lightbox-cont').find('.lightbox-main img').attr('src', thumb_img);
});
});サンプル
それではサンプルの画面をみていきましょう。
コメント