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();
});

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

関連記事

  1. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  2. Responsive Parallax Drag-slider With Transparent Letters
  3. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  4. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  5. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  6. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP