このサンプルは、YouTubeのData APIとjQueryを利用してキーワードで動画を検索して結果を表示します。サンプルが表示されたら「Pick UP VIDEO」直下の検索窓に「キーワード」を入力して[Search!]ボタンをクリックしてください。検索した動画のサムネイルが表示されます。サムネイルがクリックすると動画が再生されます。「cats」の代わりに「dogs」を入力して検索してみてください。面白い動画が見れます。
このサンプルは、jQueryのTopUpプラグインを利用して商品イメージと商品を説明している動画をエフェクト付きで拡大表示します。サンプルが表示されたら、「今月のオススメスイーツ」にスクロールしてスイーツのサムネイルをクリックしてください。サムネイルが拡大表示されます。拡大表示されたイメージを閉じるには右上の[X]をクリックします。[YouTube]のサムネイルをクリックするとポップアップウィンドウに動画を再生します。動画を閉じるには、右上の[X]をクリックします。ポップアップウィンドウが見づらいときは、「このサンプルを編集して試してみる」をクリックしてご覧ください。
※このサンプルは、Firefox|Chromeでご覧ください。
このサンプルは、jQueryのMultimediaPortfolioプラグインを利用してサムネイルを左右にスクロールさせながら拡大表示します。サンプルが表示されたら「今月のオススメスイーツ」までスクロールします。スイーツのサムネイルが表示されたらスライダーをドラッグしてサムネイルを左右にスライドさせます。サムネイルをクリックするとポップアップウィンドウに拡大表示します。拡大表示されたイメージは、イメージ上の左右の矢印ボタン(マウスをイメージ上に移動するとイメージの中央両端に表示される)をクリックして切り替えることができます。ポップアップウィンドウを閉じるには、右上の[X]をクリックします。
このサンプルは、jQueryのGallerifficプラグインを利用して「今月のオススメスイーツ」のサムネイルをタブ化して拡大表示します。サンプルが表示されたら「今月のオススメスイーツ」までスクロールします。左側に表示されているサムネイルをクリックすると、右側にサムネイルが拡大表示されます。サムネイルを切り替えるには、左上のタブ[1][2]をクリックします。 拡大表示されたイメージを切り替えるには右上の[Previous Sweet][Next Sweet]をクリックします。イメージを自動で切り替えるには左上の[Play Slideshow]をクリックします。[Pause Slideshow]をクリックすると手動に戻ります。