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. Jquery modal box plugin
  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  4. jQuery Section Navi Plugin
  5. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  6. Tipr

    JavaScript

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

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

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP