diamonds.js

JavaScript

ダイヤモンドみたいな形のイメージギャラリーを実装できるjQueryプラグイン「diamonds.js」

diamonds.jsというjQueryプラグインを使えば、ダイヤモンド(菱形)みたいな形をしたイメージギャラリーを実装することができます。普通のイメージギャラリーじゃつまらない!という方にはよさそうですね。ちょっと変わったイメージギャラリーなので印象に残りそうな感じです。

[ads_center]

diamonds.jsの使い方

diamonds.jsの使い方

diamonds.js

jQueryを読み込んでいる状態で、diamonds.cssとjquery.diamonds.jsをhead内に読み込みます。

<link rel="stylesheet" type="text/css" href="diamonds.css" />
<script type="text/javascript" src="jquery.diamonds.js"></script>

マークアップはこんな感じです。

<div class="diamondswrap">
    <a href="#" class="item">sample</a>
    <a href="#" class="item">sample</a>
    <!-- 中略 -->
</div>

プラグインを呼び出します。

$(".diamondswrap").diamonds({
    size: 250,
    gap: 1
});

関連記事

  1. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  2. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  3. jQuery Elastic Grid
  4. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  5. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  6. Letter Effects and Interaction Ideas

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. M360bt

アーカイブ

PAGE TOP