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」についてでした。以下からダウンロードできます。

WordPressのログイン時のツールバーWordPressにYouTubeやVimeoのURLを貼るだけで簡単に動画を埋め込むことができる前のページ

ChromeからワンクリックでDropboxにアクセスできる拡張機能次のページ

関連記事

  1. jQuery fullsizable
  2. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  3. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  4. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  5. Block Slide

    JavaScript

    jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」

    Block SlideというjQueryプラグインを使えば印象的なエフ…

  6. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP