• かちびと.net

    グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグインのご紹介です。グリッド表示された画像を視覚的にアピールできますね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせる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”を加えていけばいいだけ。マークアップもシンプルでいいですね。

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

Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services