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. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  2. PopCircle
  3. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  4. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  5. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  6. Jquery modal box plugin

コメント

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

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

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP