JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

複数画像をマウスカーソル位置によってフルスクリーン縦スライドする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>

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

※マウスカーソルの位置を上下に移動させてみて下さい。
jquery.galleryslider:複数画像をフルスクリーンで縦スライドできるデモページ

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

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

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