このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.galleryFocus.min.js"></script>
<script>
	$(window).load(function(){
		$('.gallery-focus img').galleryFocus();
	});
</script>
<div class="gallery-focus">
	<img src="<PATH>/img18.jpg" alt="img01">
	<img src="<PATH>/img17.jpg" alt="img02">
	<img src="<PATH>/img16.jpg" alt="img03">
	<img src="<PATH>/img15.jpg" alt="img04">
	<img src="<PATH>/img14.jpg" alt="img05">
	<img src="<PATH>/img13.jpg" alt="img06">
	<img src="<PATH>/img12.jpg" alt="img07">
	<img src="<PATH>/img11.jpg" alt="img08">
	<img src="<PATH>/img10.jpg" alt="img09">
	<img src="<PATH>/img09.jpg" alt="img10">
	<img src="<PATH>/img08.jpg" alt="img11">
	<img src="<PATH>/img07.jpg" alt="img12">
	<img src="<PATH>/img06.jpg" alt="img13">
	<img src="<PATH>/img05.jpg" alt="img14">
	<img src="<PATH>/img04.jpg" alt="img15">
	<img src="<PATH>/img03.jpg" alt="img16">
	<img src="<PATH>/img02.jpg" alt="img17">
	<img src="<PATH>/img01.jpg" alt="img18">
	<img src="<PATH>/img18.jpg" alt="img01">
	<img src="<PATH>/img17.jpg" alt="img02">
	<img src="<PATH>/img16.jpg" alt="img03">
	<img src="<PATH>/img15.jpg" alt="img04">
	<img src="<PATH>/img14.jpg" alt="img05">
	<img src="<PATH>/img13.jpg" alt="img06">
	<img src="<PATH>/img12.jpg" alt="img07">
	<img src="<PATH>/img11.jpg" alt="img08">
	<img src="<PATH>/img10.jpg" alt="img09">
	<img src="<PATH>/img09.jpg" alt="img10">
	<img src="<PATH>/img08.jpg" alt="img11">
	<img src="<PATH>/img07.jpg" alt="img12">
	<img src="<PATH>/img06.jpg" alt="img13">
	<img src="<PATH>/img05.jpg" alt="img14">
	<img src="<PATH>/img04.jpg" alt="img15">
	<img src="<PATH>/img03.jpg" alt="img16">
	<img src="<PATH>/img02.jpg" alt="img17">
	<img src="<PATH>/img01.jpg" alt="img18">
</div>

galleryFocusについて

galleryFocusは、マウスオーバーした部分の画像周辺のみをはっきりと表示させるプラグインです。
アイデア次第で色々と面白い事ができそうですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • lake

    lake

    canvasタグを利用して景色を反射した湖面を再現

  • tiltShift

    tiltShift

    画像にミニチュア風に見えるエフェクトをかけられる

  • DualSlidingDoor

    DualSlidingDoor

    画像にマウスオーバーすると、自動ドアが開くようなアクションを設定できる

  • jPolaroid

    jPolaroid

    普通の画像にポラロイド風の装飾をしてくれる

  • SPOILERALERT

    SPOILERALERT

    、画像や文字をぼかしたりマウスオーバーやクリックでそのぼかしを解除したりできる