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. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  2. Responsive Elements
  3. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  4. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  5. Jquery progress indicator on page scroll
  6. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

コメント

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

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

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP