Albumize

JavaScript

アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumize」

Webページにある画像コレクションをアルバムのようなギャラリーに管理・実装することができるjQueryプラグイン「Albumize」がカッコイイですね。実際のデモでは画像をクリックするとそのアルバムグループのギャラリーページが上から降りてきます。お気に入りの画像だけをこれで管理していくのも面白いかもしれませんね。

[ads_center]

使い方

Albumizeの使い方

各アルバムの見たい画像をクリックすると。

Albumizeの使い方
このようにギャラリーページが上から降りてきます。この状態では左側にサムネイル画像があるのでここから目的の画像を選択することもできますし、下側にある矢印で前後の画像に移動することもできます。

ちなみに左側のサムネイル画像のそばにある矢印をクリックするとサムネイル画像が非表示になります。色々と便利な機能が盛り込まれていますね。

使い方は、head内にjQueryとプラグインを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/albumize.js"></script>
<link href="css/albumize.css" rel="stylesheet" /> 

続いて、HTMLマークアップを記述していきます。

<div class="albumize" title="アルバムタイトル">
    <a href = "large-image-1.jpg" title="画像タイトル">
        <img src="thumbnail-1.jpg"> </img>
    </a>
    <a href = "large-image-2.jpg" title="画像タイトル">
        <img src="thumbnail-2.jpg" class="albumize-cover"> </img>
    </a>
</div>

あとはプラグインをセットしておくだけです。セレクターに指定するid名(ここではsample)は任意で変更して下さい。

$('#sample').click(function(){
    $.albumize();
});

アルバムごとに画像やギャラリーを管理・実装したい人は是非チェックしてみて下さい。

Panasonic ES-RS10-Sパナソニックの超小型メンズシェーバー「ES-RS10-S」を購入前のページ

ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」次のページ

関連記事

  1. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  2. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  3. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  4. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  5. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  6. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

コメント

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP