ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。

まずはデモページをご覧ください

様々なサイトでよく見かけていたんですが、最近はあまり見かけなくなりました。
※たまたまかもしれませんが。

理由はいろいろあるんでしょうが、jquery以外のライブラリフレームワークが台頭したこと、Shuffle.jsプラグインがjquery1.x系でしか動かないことあたりが大きいんじゃないでしょうか。

まあ、前者は時代の流れと言えるのでしょうがないにしても、後者は主にセキュリティに関する問題なので、これに関しては解決の手段があるので見栄えがいいShuffle.jsを改めて使ってみようと思った次第です。

まずは下記のようにheadタグ(bodyの閉じタグ前でも可)にShuffle.jsのコードを記述するんですが、
1行目にjquery3.x本体を、
2行目にjquery1.x系統のプラグインをjquery3.x系に対応させるプラグインを、
3・4行目に画像クリックでライトボックス表示にするためのプラグインを、(詳細は後述)
5行目以降がShuffle.jsプラグインに関する記述です。
※jquery1.x系を使って画像のソートだけできればいいという方は1行目にjquery1.x本体を指定し、2行目~4行目は必要ありません。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery.shuffle.min.js"></script>
<script>
$(function() {
$('#btn li').on('click', function() {
var $this = $(this),
$grid = $('#sortlist');
$grid.shuffle($this.data('group'));
});

$('#sortlist').shuffle({
group: 'boxes',
speed: 700,
easing: 'ease-in-out'
});
});
</script>

次に、画像のソートスクリプトを表示したい箇所に以下を記述します。
※data-group名やクラス名は任意に変更してご使用ください。
※liタグの中のaタグはライトボックス表示用のものなので、ライトボックス表示しない場合には不要です。
※画像の幅や画像間のmargin、padding等はご利用の環境に合わせてスタイルを適用してください。
デモページでは画像はspanのbackground-imageに設定し、span(画像)を囲っているliタグをPC表示でwidth:250pxに、モバイル表示でwidth:50%に設定しております。

<ul id="btn">
<li data-group="boxes" class="active box">ALL</li>
<li data-group="earth" class="box">EARTH</li>
<li data-group="moon" class="box">MOON</li>
<li data-group="stars" class="box">STARS</li>
<li data-group="others" class="box">OTHERS</li>
</ul>
<ul id="sortlist">
<li data-groups='["others","boxes"]'><a href="画像のURL" rel="lightbox"><span class="others img1" >OTHERS</span></a></li>
<li data-groups='["stars","boxes"]'><a href="画像のURL" rel="lightbox"><span class="stars img2">STARS</span></a></li>
<li data-groups='["moon","boxes"]'><a href="画像のURL" rel="lightbox"><span class="moon img3">MOON</span></a></li>
<li data-groups='["others","boxes"]'><a href="画像のURL" rel="lightbox"><span class="others img4">OTHERS</span></a></li>
<li data-groups='["moon","boxes"]'><a href="画像のURL" rel="lightbox"><span class="moon img5">MOON</span></a></li>
<li data-groups='["stars","boxes"]'><a href="画像のURL" rel="lightbox"><span class="stars img6">STARS</span></a></li>
<li data-groups='["moon","boxes"]'><a href="画像のURL" rel="lightbox"><span class="moon img7">MOON</span></a></li>
<li data-groups='["earth","boxes"]'><a href="画像のURL" rel="lightbox"><span class="earth img8">EARTH</span></a></li>
<li data-groups='["earth","boxes"]'><a href="画像のURL" rel="lightbox"><span class="earth img9">EARTH</span></a></li>
<li data-groups='["others","boxes"]'><a href="画像のURL" rel="lightbox"><span class="others img10">OTHERS</span></a></li>
<li data-groups='["stars","boxes"]'><a href="画像のURL" rel="lightbox"><span class="stars img11">STARS</span></a></li>
<li data-groups='["others","boxes"]'><a href="画像のURL" rel="lightbox"><span class="others img12">OTHERS</span></a></li>
</ul>

ここまで設定して動作確認ができたら、最後にライトボックス表示プラグインを適用します。

「Lightboxプラグイン」ページの「Download」からプラグイン一式をダウンロードし、「lightbox.js」「lightbox.css」「imgフォルダ内の画像4点」をご利用の環境に合わせてアップロードしておきます。
後は上記コードのようにaタグにrel=”lightbox”を指定すれば完了です。

デモページ

javascriptカテゴリの最新記事