Colorbox.jsでモーダルウィンドウにスライダーを入れる

2023 5/31

2023/05/23 2023/05/31

スポンサードリンク

Colorbox.jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。

ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。

Colorbox – a jQuery lightbox
Colorbox Examplesデモページ

//クラス要素を指定しないと読み込んだ直後にモーダル内でhtmlが開く
		$.colorbox({
			href: "../readme.html"
		});

		// htmlの記述をダイレクトに表示。読み込んだ直後にモーダルが開くのでアラート向け
		$.colorbox({
			html: "<h1>Welcome</h1>"
		});


		//モーダル表示させる場合はこれだけで良い
		$('a.gallery').colorbox({});

		//モーダル表示させてグループ化する場合はこれ
		$('a.gallery-group').colorbox({
			rel: 'gal',
			current: '全{total}枚の{current}枚目',
		});



		//jquery.touchSwipeを使うことで、colorbox内をスワイプで画像切替させる
		//モーダル表示させてグループ化する場合はこれ
		$('a.gallery-group-touch').colorbox({
			rel: 'gal-2nd',
		});
		//モーダルウィンドウの大外が#colorboxなので、#colorboxにSwipeをつける
		$("#colorbox").swipe({
			swipeLeft: function() {
				$.colorbox.next()
			},
			swipeRight: function() {
				$.colorbox.prev()
			},
			threshold: 0
		});

<div class="imgbox">
			<a class="gallery" href="images/sora1.jpg">
				<img src="images/sora1.jpg">
			</a>
			<a class="gallery" href="images/sora2.jpg"></a>
			<a class="gallery" href="images/sora3.jpg"></a>
		</div>


		<div class="imgbox">
			<a class="gallery-group" href="images/sora1.jpg">
				<img src="images/sora2.jpg">
			</a>
			<a class="gallery-group" href="images/sora2.jpg"></a>
			<a class="gallery-group" href="images/sora3.jpg"></a>
		</div>


		<div class="imgbox">
			<a class="gallery-group-touch" href="images/sora1.jpg">
				<img src="images/sora3.jpg">
			</a>
			<a class="gallery-group-touch" href="images/sora2.jpg"></a>
			<a class="gallery-group-touch" href="images/sora3.jpg"></a>
		</div>

TouchSwipe-Jquery-Plugin

TouchSwipe 1.6
TouchSwipe 1.6 Docs　

jQueryをつかってスワイプできるようにするためのプラグイン

タッチスワイプ 1.6

iPad、iPhone、Android などのタッチデバイスで使用する jQuery プラグイン。

デスクトップ上の 1 本および複数の指のスワイプ、ピンチを検出し、マウスの「ドラッグ」に戻ります。

時間と距離のしきい値を設定して、スワイプジェスチャとゆっくりとしたドラッグを区別できます。

子要素 (インタラクティブ要素) の除外を許可するだけでなく、構成に応じてページのスクロールやページのズームを許可します。

「上」「下」「左」「右」の4方向のスワイプを検出

ピンチイン、ピンチアウトを検知

1 本指または 2 本指のタッチイベントをサポート

touchSwipe オブジェクトとその子オブジェクトの両方でクリックイベントをサポートします

ジェスチャが実際にスワイプであるかどうかを判断するための定義可能なしきい値/maxTimeThreshold

スワイプ「開始」、「移動」、「終了」、「キャンセル」に対してトリガーされるイベント

終了イベントは、タッチリリース時、またはしきい値に達するとすぐにトリガーできます。

スワイプとページスクロールが可能

ユーザー入力要素 (ボタン、フォーム、テキストなど) によるスワイプのトリガーを無効にします

https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js

スワイプさせる要素の後に.swipe({})で処理を書いていく。

thresholdは動かすピクセル幅で、 threshold:200にした場合は最低200pxスワイプして動かさないと命令が実行されない

//モーダルウィンドウの大外が#colorboxなので、#colorboxにSwipeをつける
		$("#colorbox").swipe({
			swipeLeft: function() {
				$.colorbox.next()
			},
			swipeRight: function() {
				$.colorbox.prev()
			},
			threshold: 0
		});