JavaScript

【簡単設置】複数画像をマウスカーソル位置でフルスクリーン縦スライドする方法【jquery.galleryslider.js】

  /

ウェブ開発の世界では、ユーザーに対して魅力的でインタラクティブなコンテンツを提供することがますます重要になっています。
この記事では、jquery.galleryslider.jsというプラグインを使って、複数の画像をマウスカーソルの位置に応じて縦にフルスクリーンでスライドさせる方法をご紹介します。この手法は、特にポートフォリオやギャラリーサイトで活用でき、ユーザーに視覚的なインパクトを与えることができます。簡単に実装できるように、基本的なステップから詳細に解説しますので、ぜひチャレンジしてみてください。

Contents

jquery.galleryslider.jsとは

jquery.galleryslider.jsは、jQueryライブラリを使用して画像スライダーを実現するためのプラグインです。このプラグインを利用することで、複雑なJavaScriptコーディングなしに簡単に画像スライダーを設定することができます。画像をフルスクリーンで表示し、ユーザーのマウスカーソルの位置に応じて画像を縦にスライドさせることで、直感的なナビゲーションを実現します。このプラグインの特長は、シンプルで軽量、かつカスタマイズ性が高い点です。ユーザーの興味を引くギャラリーを作成するための強力なツールとなるでしょう。

複数画像をマウスカーソル位置によってフルスクリーン縦スライドするCSSの記述例

まず、HTMLで画像を配置するエリアに対するCSSを記述します。ここでは、画像を縦に並べてフルスクリーンで表示するための基本的なスタイル設定を行います。CSSは、画像のサイズやレイアウトをコントロールするために不可欠です。以下に、必要なスタイルを示します。

<style type="text/css">
<!--
*{
	margin:0;
	padding:0;
}
body{
	background:#ffffff;
	height:100%;
	width:100%;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
}
#gallery{
	position:relative;
	margin:0 auto;
	cursor:n-resize;
}
#gallery img {
	width:100%;
	display:block;
}	
#gallery span{
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
	overflow:hidden;
	display:block;
	background:url(img/bg.png) repeat;
}
*html #gallery span {
	display:none;
} /*hide png ie6*/
-->
</style>

　
上記のCSSコードでは、#galleryというIDが付いた要素を中心に配置し、マウスカーソルを上下に動かすことで画像がスライドするように設定しています。また、古いブラウザ対応のため、*html #gallery span部分での表示制御も行っています。

jquery.galleryslider.jsを使って、複数画像をマウスカーソル位置によってフルスクリーン縦スライドするJavaScriptの記述

次に、jquery.galleryslider.jsを用いて画像をスライドさせるためのJavaScriptを記述します。jQueryのライブラリを使用することで、複雑な動きを簡単に実装することができます。以下のコードを参考にしてください。

jquery.min.js、jquery.galleryslider.jsファイルを読み込みます。$(複数画像エリア).galleryslider({オプション})で複数画像エリアにオプション（幅サイズや複数画像に対する効果）を設定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleryslider.js"></script>
<script type="text/javascript">  
$().ready(function() {  
$('#gallery').galleryslider({width:"100%", raster:true});  //width in px % or em | raster: true or false
});  
</script>

　
このスクリプトは、ページが読み込まれたときに実行され、#galleryというIDが付けられた要素に対してスライダー機能を適用します。オプションで幅を100%とし、ラスタ効果を有効にする設定を行っています。この設定により、画像が画面いっぱいに広がり、ユーザーのマウスの動きに応じてスムーズにスライドします。

複数画像をマウスカーソル位置によってフルスクリーン縦スライドするHTMLの記述例

以下に示すHTMLコードは、実際に画像を表示する部分の例です。10枚の画像をフルスクリーンで表示し、縦にスライドさせるように設定されています。

<h1>10枚画像をフルスクリーン表示し、縦スライドさせます。</h1>
<div id="gallery">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<img src="img/05.jpg" alt="" />
<img src="img/06.jpg" alt="" />
<img src="img/07.jpg" alt="" />
<img src="img/08.jpg" alt="" />
<img src="img/09.jpg" alt="" />
<img src="img/10.jpg" alt="" />
</div>

　
このHTML構造では、divタグの中に複数のimgタグを配置しています。各画像は、ページのロード時に縦に並べられ、jquery.galleryslider.jsによってマウスカーソルに応じてスライドします。必要に応じて、画像の数やファイル名を変更し、あなたのプロジェクトに合わせてカスタマイズしてください。

jquery.galleryslider：複数画像をフルスクリーンで縦スライドできるデモページ

実際にこのスライダーを体験してみましょう。以下のリンクからデモページにアクセスして、マウスカーソルを上下に移動させることで画像がどのようにスライドするかを確認できます。

jquery.galleryslider：複数画像をフルスクリーンで縦スライドできるデモページ

このデモページを参考にしつつ、自分自身のサイトに応用してみてください。簡単に実装できるだけでなく、ユーザーエクスペリエンスを向上させる素晴らしい機能です。

ソース元：jQuery Gallery Slider Plugin | Kollermedia.at

このプラグインの開発元に関する情報はこちらで確認できます。より詳しい情報や追加のカスタマイズ方法については、以下のリンクを参考にしてください。

ソース元：jQuery Gallery Slider Plugin | Kollermedia.at

まとめ

今回は、jquery.galleryslider.jsを使って、マウスカーソルの位置に応じて複数画像をフルスクリーンで縦スライドする方法を詳しくご紹介しました。この手法は、インタラクティブなユーザー体験を提供し、ビジュアルコンテンツの訴求力を高めるのに非常に効果的です。簡単な実装でありながら、その効果は絶大ですので、ぜひあなたのウェブサイトに取り入れてみてください。

この記事を通じて、実装できるようになることを願っています。ぜひ、さまざまなプロジェクトにこの技術を活用し、あなたのクリエイティビティを発揮してください。今後も新しいテクノロジーやトレンドを取り入れながら、より魅力的なウェブサイトを構築していきましょう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像スライダー ギャラリー jquery.galleryslider
関連記事