高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。

サンプルを作ってみました。ご覧下さい。

「Camera slideshow」をフルスクリーンで背景にするサンプル

フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。

【設置方法】
まずはこちらのCameraのサイトからファイル一式をダウンロードします。デモを含むZIPファイルを利用するとわかりやすいと思います。(デモにはサムネイルを利用したフルスクリーンのデモが含まれています。)

<head>部分にcssを設定して、以下のスタイルのコードを記述します。#contentsのスタイルは自由に設定して下さい。

続いて<head>部分にJavaScriptを指定します。

<body>部分にスライドさせる画像を設定します。

以上の設定で「Camera slideshow」を利用したスライドショーを背景で流すことができます。オプションなどは以前の記事、高機能過ぎるjQueryスライドショー「Camera slideshow」を参考にして頂けると良いかと思います。

最後にサンプルのソースを書いておきますので、どうぞご参考まで。

この記事と関連してると思われる記事: