今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」
  3. ExcelのようにTableが編集できちゃう「Handsontable」
  4. マウスオーバーで画像を拡大「ZoomPic」
  5. 画像スライドショー「jCarousel」オプションたくさんアルヨ

Lightboxのアニメ効果がおもしろい!レスポンシブ画像ギャラリー「SuperBox」

スポンサーリンク

Lightboxのアニメ効果がおもしろい!レスポンシブ画像ギャラリーを実装するプラグイン「SuperBox」を紹介します。

jQueryプラグイン「SuperBox」

この画像ギャラリーは、サムネイル画像をクリックすると画像の間がアニメ効果で拡がり(モーゼが海を割ったように?)、でっかい画像を表示する! といったおもしろいアニメ効果でLightboxを表示します。

オプションでは、背景の色や線、画像の高さなどを設定することができます。

スポンサーリンク

それではデモページの画像ギャラリーをご覧ください。

「SuperBox」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)