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から直接写真を埋め込んでスライドショーを作りたい人は是非チェックしてみて下さい。

ペツル(PETZL) イーライト E02P2様々な環境に対応できる「ペツル(PETZL) イーライト E02P2」を購入前のページ

スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」次のページ

関連記事

  1. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  2. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  3. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  4. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP