Lightboxのアニメ効果がおもしろい！レスポンシブ画像ギャラリー「SuperBox」
当ページのリンクには広告が含まれています。
スポンサーリンク
Lightboxのアニメ効果がおもしろい！レスポンシブ画像ギャラリーを実装するプラグイン「SuperBox」を紹介します。
jQueryプラグイン「SuperBox」
この画像ギャラリーは、サムネイル画像をクリックすると画像の間がアニメ効果で拡がり（モーゼが海を割ったように？）、でっかい画像を表示する！ といったおもしろいアニメ効果でLightboxを表示します。
オプションでは、背景の色や線、画像の高さなどを設定することができます。
スポンサーリンク
それではデモページの画像ギャラリーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="SuperBox のデモでーす。">
<title>SuperBox - jQueryプラグイン</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/superbox.css" rel="stylesheet">
</head>
<body>
<h1>SuperBox のデモです。</h1>
<div id="demo">
<div>
<img src="images/01-red_thumb.png" data-img="images/01-red.png" alt="">
</div>
<div>
<img src="images/02-orange_thumb.png" data-img="images/02-orange.png" alt="">
</div>
<div>
<img src="images/03-yellow_thumb.png" data-img="images/03-yellow.png" alt="">
</div>
<div>
<img src="images/04-green_thumb.png" data-img="images/04-green.png" alt="">
</div>
<div>
<img src="images/05-blue_thumb.png" data-img="images/05-blue.png" alt="">
</div>
<div>
<img src="images/06-indigo_thumb.png" data-img="images/06-indigo.png" alt="">
</div>
<div>
<img src="images/07-purple_thumb.png" data-img="images/07-purple.png" alt="">
</div>
<div>
<img src="images/01-red_thumb.png" data-img="images/01-red.png" alt="">
</div>
<div>
<img src="images/02-orange_thumb.png" data-img="images/02-orange.png" alt="">
</div>
<div>
<img src="images/03-yellow_thumb.png" data-img="images/03-yellow.png" alt="">
</div>
<div>
<img src="images/04-green_thumb.png" data-img="images/04-green.png" alt="">
</div>
<div>
<img src="images/05-blue_thumb.png" data-img="images/05-blue.png" alt="">
</div>
<div>
<img src="images/06-indigo_thumb.png" data-img="images/06-indigo.png" alt="">
</div>
<div>
<img src="images/07-purple_thumb.png" data-img="images/07-purple.png" alt="">
</div>
<div>
<img src="images/01-red_thumb.png" data-img="images/01-red.png" alt="">
</div>
<div>
<img src="images/02-orange_thumb.png" data-img="images/02-orange.png" alt="">
</div>
<div>
<img src="images/03-yellow_thumb.png" data-img="images/03-yellow.png" alt="">
</div>
<div>
<img src="images/04-green_thumb.png" data-img="images/04-green.png" alt="">
</div>
<div>
<img src="images/05-blue_thumb.png" data-img="images/05-blue.png" alt="">
</div>
<div>
<img src="images/06-indigo_thumb.png" data-img="images/06-indigo.png" alt="">
</div>
<div>
<img src="images/07-purple_thumb.png" data-img="images/07-purple.png" alt="">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.superbox.js"></script>
<script>
$(function() {
$('#demo').SuperBox();
});
</script>
</body>
</html>
スポンサーリンク