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

jquery.galleryslider.jsを使って複数画像をマウスカーソル位置によってフルスクリーン縦スライドする方法をご紹介します。
複数画像を縦列に表示しマウスカーソルを上下するとマウスカーソル位置によって画像が上下に縦スライドします。

Contents

複数画像をマウスカーソル位置によってフルスクリーン縦スライドするCSSの記述例
jquery.galleryslider.jsを使って、複数画像をマウスカーソル位置によってフルスクリーン縦スライドするJavaScriptの記述
複数画像をマウスカーソル位置によってフルスクリーン縦スライドするHTMLの記述例
jquery.galleryslider：複数画像をフルスクリーンで縦スライドできるデモページ
ソース元：jQuery Gallery Slider Plugin | Kollermedia.at

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

※複数画像エリア（#gallery）の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>

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

※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>

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

<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>