グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグイン

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

個人的に好きなタイプのjQueryの使い方
だったのでメモ。イメージギャラリーは、こ
ういったエフェクトも大事な要因ですし、
参考にしておきたい所です。なかなかイン
パクトもあって素敵ですね。尚、グリッドは
Masonryを使っています。

基本的にはユーザーの利便性を高める目的でjsを使いたいですけど、視覚的にインパクトを与えられるのも利点の一つかなとは思います。

Animating with Modernizr

こんな感じでマウスオーバーした画像に十字ハイライトされます。

広げてもだいじょうぶ。hoverしている画像にナビがアニメーションで付いてきてくれます。アニメーションはcss3なのでIEではアニメーションしません。

デモを見たほうが早いですかね・・

デモ※別窓で開きます

ちょっと重いかな。手抜きですみません。

コード

<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/crossfire.js"></script>
<script>
  $(function(){
    
    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 10,
      isAnimated: !Modernizr.csstransitions
    });
    
  });
</script>

本体とプラグイン等を読み込んでカラム間の幅等を決めます。グリッドにはmasonryが使われていますので、設定に関してはmasonryのページをご参照下さい。

var boxWidth = 10 + 100;
var currentBox;
var currentRow;
var currentCol;
 
var gridWidth = $('#container').width();
var n = gridWidth / boxWidth;
var numColumn = Math.floor(n);
 
$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
 
$(window).resize(function() {
 
            $('div.box').removeClass('lastBox').removeClass('firstBox');
            var gridWidth = $('#container').width();
            var n = gridWidth / boxWidth;
            var numColumn = Math.floor(n);
 
            $('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
            $('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
 
});

十字のハイライトにはテーブルのセルのハイライトにも使ったcss3の:nth-child擬似クラスを使っています。

HTML

マークアップです。

	<div id="leftIndicator-wrapper">
		<div id="leftIndicator-rectangle">
			
		</div>
		<div id="leftIndicator-triangle">
			
		</div>
	</div>
<div id="container" class="transitions-enabled clearfix">
<div class="box">
	    <a href="http://instagr.am/p/FzhLC/"><img src="http://27.media.tumblr.com/tumblr_lmve9b34x71qzygr0o1_500.jpg" alt="Taken with instagram" /></a>
 </div>
<div class="box">
	    画像ファイル
 </div>
　・
　・
　・
<div class="box">
	    画像ファイル
 </div>
	  </div>

div class=”box”を加えていけばいいだけ。マークアップもシンプルでいいですね。

以下よりデモとプラグインをダウンロードできます。