masonly

home > lab. > jqueryThumbnailScroller

jqueryThumbnailScrollerの概要

サムネイルがスクロール。

jqueryThumbnailScrollerの使い方

【1】ココからふむふむと中身を拾う。

【2】<head>〜</head>の間でjquery.min.js を読込、必要なら jquery.easing.1.3.js も読込。

【3】<head>〜</head>の間でcss を書く。#thumbScrollerに高さ設定してoverflow:hiddenするところがキモ。

#outer_container{margin:60px; width:240px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}
#thumbScroller{position:relative; height:600px; overflow:hidden;}
#thumbScroller .container{position:relative; top:0;}
#thumbScroller .content{clear:both;}
#thumbScroller .content div{padding:10px 5px;height:100%;font-family:Verdana, Geneva, sans-serif;font-size:13px;}
#thumbScroller img{border:5px solid #000;}
      

【4】<body>〜</body>に書くのはこんな感じ。

<div id="outer_container">
  <div id="thumbScroller">
    <div class="container">
      <div class="content">
        <div><a href="#"><img src="XXX.jpg" class="thumb" /></a></div>
      </div>
    </div>
  </div>
</div>
      

【5】<body>〜</body>の最後でjavascriptを書く。

<script>
	$outer_container=$("#outer_container");
	$thumbScroller=$("#thumbScroller");
	$thumbScroller_container=$("#thumbScroller .container");
	$thumbScroller_content=$("#thumbScroller .content");
	$thumbScroller_thumb=$("#thumbScroller .thumb");
	
	$(window).load(function() {
		var sliderHeight=$thumbScroller.height();
		var itemHeight=$thumbScroller_content.height();

		$thumbScroller_content.each(function (i) {
			totalContent=i*itemHeight;	
		});

		$thumbScroller.mousemove(function(e){
	  		var mouseCoords=(e.pageY - this.offsetTop);
	  		var mousePercentY=mouseCoords/sliderHeight;
	  		var destY=-(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
	  		var thePosA=mouseCoords-destY;
	  		var thePosB=destY-mouseCoords;
	  		if(mouseCoords>destY){
		  		$thumbScroller_container.css("top",-thePosA);
	  		}
	  		if(mouseCoords<destY){
		  		$thumbScroller_container.css("top",thePosB);
	  		}
		});

		var fadeSpeed=250;

		$thumbScroller_thumb.each(function () {
			var $this=$(this);
			$this.fadeTo(fadeSpeed, 0.4);
		});

		$thumbScroller_thumb.hover(
			function(){ //mouse over
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, 1);
			},
			function(){ //mouse out
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, 0.4);
			}
		);
	});
</script>
      

jqueryThumbnailScrollerのソース

http://manos.malihu.gr/jquery-thumbnail-scroller

jqueryThumbnailScrollerのサンプル

The path
A flower
Dusk
A waterfall
The canyon
The road
A forest
A house
Paradise
Trees
Plant leaves