今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. ソフトウェアキーボードで暗証番号を入力「Keypad」
  3. なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」
  4. フォームの内容をJSON形式で取得「JSON Form」
  5. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

くるくる回る画像ギャラリー「Rondell」

スポンサーリンク

くるくる回る画像ギャラリーを実装するプラグイン「Rondell」を紹介します。

jQueryプラグイン「Rondell」

このプラグインを使えば、奥行きをもったくるくる回る画像ギャラリーを簡単に作成することができます。

しかも、オプションで通常の画像スライダーやサムネイルを並べた画像ギャラリーなどなど……。ひとつのプラグインで多彩な画像ギャラリーを作成することができます。

スポンサーリンク

デモでは、くるくる回る画像ギャラリーを紹介しています。一定時間が経過すると画像がくるくる回ります。また、画像(あるいは「next」「prev」)をクリックすると手動で画像を回すことができます。実際の動きを体感してみてください。

「Rondell」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Rondell のデモでーす。">
<title>Rondell - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/jquery.rondell.css" type="text/css" media="all" title="Screen">
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/rondell/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Rondellのデモでーす。</h1>

<div id="rondellCarousel" class="hidden">
  <a href="images/red.png" target="_blank">
    <img src="images/red_thumb.png">
    <h5>赤</h5>
    <p>赤だよ〜。</p>
  </a>
  <a href="images/orange.png" target="_blank">
    <img src="images/orange_thumb.png">
    <h5>橙</h5>
    <p>橙だよ〜。</p>
  </a>
  <a href="images/yellow.png" target="_blank">
    <img src="images/yellow_thumb.png">
    <h5>黄</h5>
    <p>黄だよ〜。</p>
  </a>
  <a href="images/green.png" target="_blank">
    <img src="images/green_thumb.png">
    <h5>緑</h5>
    <p>緑だよ〜。</p>
  </a>
  <a href="images/blue.png" target="_blank">
    <img src="images/blue_thumb.png">
    <h5>青</h5>
    <p>青だよ〜。</p>
  </a>
  <a href="images/indigo.png" target="_blank">
    <img src="images/indigo_thumb.png">
    <h5>藍</h5>
    <p>藍だよ〜。</p>
  </a>
  <a href="images/purple.png" target="_blank">
    <img src="images/purple_thumb.png">
    <h5>紫</h5>
    <p>紫だよ〜。</p>
  </a>
</div>

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.rondell.js"></script>
<script type="text/javascript">
 $(function() {
    // Create a rondell with the 'carousel' preset and set an option
    // to disable the rondell while the lightbox is displayed
    $("#rondellCarousel").rondell({
      preset: "carousel",
    });
  });
</script>

</body>
</html>
スポンサーリンク

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