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

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  2. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  3. no-image
  4. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  5. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  6. circleChart

    JavaScript

    多彩なカスタマイズができる円形チャート「circleChart」

    circleChartは多彩なカスタマイズを実現した円形チャートを実装…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP