jQuery googleslides

JavaScript

Google+やPicasaから写真を埋め込みスライドショーを作れるプラグイン「jQuery googleslides」

jQuery googleslidesはGoogle+やPicasaからの写真を埋め込んでスライドショーを作ることができるjQueryプラグインです。写真を指定するにはユーザーIDとアルバムIDをオプションに設定する必要があります。Googleサービスで写真を管理している人は簡単に自分のスライドショーが作れるので便利ですね。

[ads_center]

使い方

jQuery googleslidesの使い方

このように写真を埋め込んでスライドショーを作成できます。

使い方は、まずはjQueryを読み込んでいる状態で、ダウンロードしたプラグインファイルを読み込みます。

<link href="src/jquery.googleslides.css" rel="stylesheet" type="text/css" /> 
<script src="src/jquery.googleslides.js" type="text/javascript"></script>

body内には以下のHTMLマークアップを記述しておきます。

<div id='slides'></div>

そしてスライダーを開始させます。埋め込みたい写真はユーザーIDとアルバムIDを指定します。

$('#slides').googleslides({
    userid:'ここにユーザーID',
    albumid:'ここにアルバムID'
});

オプションもimgmax、random、caption、time、fadespeedなど色々と設定することが可能なので詳しくは公式サイトでご確認下さい。ちなみにWordPressのプラグインもあるみたいですね。

Google+やPicasaから直接写真を埋め込んでスライドショーを作りたい人は是非チェックしてみて下さい。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  2. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  3. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  4. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  5. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  6. Vimeo Carousel Gallery

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP