ページ内リンク（#）でアクセスしたときに、特定のモーダルを開いたり、スライダーで特定スライドに移動する方法

2月 21, 2017 by ひさっち in javascript

そろそろ春だね。
みんなコード書いてる？

最近は勉強会のレポートばっかでtipsから随分遠ざかってた感じですが、久しぶりに投稿してみます。

モーダルとかスライダーの設置する案件があると、どうしても他のページからのリンクが出てきますよね。
それが、単にページへのリンクだといいんだけど、

モーダルの場合

index.html#sample01

こんなリンクが貼られていて、ハッシュつきでアクセスがあった場合、「#sample01」のモーダルが開かれるようにしたい。

スライダーの場合

index.html#sample01

こちらもこんなリンクが貼られていて、「#sample01」のIDが指定してあるスライドからスタートしたい。

こんなことがよくあるんじゃないかと思います。
今さらこんなん誰でも知ってるでしょとも思うんですが、困ってる人もいるかもしれないのでメモしておきますね。

モーダルを開きたい場合

html

<p>本文本文本文本文本文本文本文</p>

<div class="panel" id="sample01" style="display:none;">
<div class="txt">
<h2>sample01のコンテンツ</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, praesentium, nesciunt, vel aspernatur a minus corporis magnam magni possimus culpa quo eum tempore neque omnis dolorem expedita quod? Vero, officiis.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, praesentium, nesciunt, vel aspernatur a minus corporis magnam magni possimus culpa quo eum tempore neque omnis dolorem expedita quod? Vero, officiis.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, praesentium, nesciunt, vel aspernatur a minus corporis magnam magni possimus culpa quo eum tempore neque omnis dolorem expedita quod? Vero, officiis.</p>
</div><!-- / .txt -->
</div><!-- / .panel -->

javascript

$(function() {
	if (location.hash){
		var target = location.hash;
		console.log(target);  // targetの値は「#sample01」
		$.fancybox.open(target);
	}
});

if (location.hash){ }

この条件を入れてあげれば、http://www.○○○○.com/modal/index.html#sample01というリンクURL文字列のうちハッシュ（#）以降が「location.hash」で取得できます。

どちらも同じhtmlにジャンプしますが、ハッシュがあると該当のモーダルが表示されると思います。
意外に簡単に設置できるので、ご自身のよく使うjsにモジュールとして入れておくといいかもしれませんね。

指定スライドに移動したいとき

html

<ul class="bxslider">
	<li id="sample01">画像</li>
	<li id="sample02">画像</li>
	<li id="sample03">画像</li>
</ul>

javascript

$(function() {
	
if (location.hash){
	var targetSlide = location.hash.replace("#sample0",""); // 各スライダーの連番を取得
	$('.bxslider').bxSlider({
		mode: 'horizontal',
		captions: false,
		onSliderLoad:function(currentIndex){
			goToSlide(targetSlide);
    }
	});
	}  else {
	$('.bxslider').bxSlider({
		mode: 'horizontal',
		captions: false
	});
} // end else

});

今回はbxsliderをサンプルとしています。
それぞれスライダーのライブラリには、

ロードした時のタイミング
スライドを移動させる前後のタイミング

など、それぞれアクションを設定できるようなオプションがあります。

そこに今回のようにハッシュから取得した番号を元に、指定スライドへ移動する処理をくわえてあげればOKですね。

Tagged with: bxslider, fancybox