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. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  2. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  3. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

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

    JavaScript

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

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

  5. DD Scroll Boxes
  6. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP