PopCircle

JavaScript

クリック時に周りに画像が表示されるイメージギャラリーを実装できるjQueryプラグイン「PopCircle」

PopCircleというjQueryプラグインを使えば、要素をクリックした時に周りに画像を表示させることができます。見た感じとっても面白いイメージギャラリーですね。ちょっと変わった見せ方をしたい時なんかによさそうです。

[ads_center]

PopCircleの使い方

実際のデモでは、このように、クリックすると周りに画像が「ポンッ」と表示されます。

PopCircle

PopCircle

$('.trigger').click(function(e){
    e.preventDefault();
    $.popcircle('#pops',
      {
        spacing:'10px',
        type:'full', // full, half, quad
        offset:1.95, // 0, 1, 2, 3, 4, 5, 6, 7 or 5.1
        ease:'easeOutElastic',
        time:'slow' // slow, fast, 1000
      }
    );
});

オプションでtypeをhalfにすると半円側だけに画像を表示したりするといったこともできます。

WordPressのログイン時のツールバーWordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方前のページ

Photoshopで写真画像のExif情報を削除するやり方次のページ

関連記事

  1. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  3. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  4. 3D Cube CountDown script
  5. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  6. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP