JavaScript

レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

ポートフォリオなどでとても素敵なイメージギャラリーを実装することができるjQueryプラグイン「Portfoliojs」を使ってみました。レスポンシブに対応しており、横スクロールやキーボード操作もできるので利便性も良いですね。スマートフォンでも綺麗に表示・動作することができるので個人的にとても気に入りました。以下使い方です。

[ads_center]

使い方

使い方はとても簡単です。いつも通りjQueryとダウンロードしたプラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/portfolio.pack.min.js"></script>
<script>
$(document).ready(function() {
	var p = $("#gallery").portfolio({ logger: true});
	p.init();
});
</script>

あとは画像を指定するだけです。

<div id="gallery">
    <img data-src="images/img01.jpg" />
    <img data-src="images/img02.jpg" />
    <img data-src="images/img03.jpg" />
    <img data-src="images/img04.jpg" />
    <img data-src="images/img05.jpg" />
</div>

とても簡単で使いやすいですね。

オプションもいくつか用意されています。

p = $('#gallery').portfolio({
    loop: true, // ループのon/off
    easingMethod: 'easeOutQuint', // スライドする動き
    height: '500px', // ギャラリーの高さ
    width: '100%', // ギャラリーの幅で、px単位や%で指定可能
    lightbox: false, // メインで表示されている画像以外にはハイライトがかかり薄暗くなる
    logger: false // デバック時に使用
}); 

こんな感じで、イメージギャラリーの高さや幅もオプションで指定することができたりと使い勝手が良いですね。

また、スライドの動きを指定する「easingMethod」ではjQuery Easing Pluginが使われているので豊富な種類の中から自分の好きな動きを選択することができます。ちなみに種類は以下から確認することができます。

ということで、使い方もシンプルで素敵なイメージギャラリーを実装できるjQueryプラグイン「Portfoliojs」についてでした。以下からダウンロードできます。

関連記事

  1. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  2. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. jfMagnify
  5. Filterable Product Grid
  6. no-image

コメント

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

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

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景
  4. BELTZのバスクチーズケーキ

アーカイブ

PAGE TOP