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. no-image
  2. Responsive Elements
  3. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  4. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  5. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP