on:2012年3月12日sponsors表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。始まるIEの自動アップデートのIE8にも対応しています。Pixedelic[ad#ad-2]CameraのデモCameraの使い方Cameraのデモデモは上記のトップにあるものと、他に3種類のスライドショーがあります。トップのものが一番シンプルで、Cameraの基本性能を楽しめます。画像の切り替えには、美しいアニメーションが採用されています。トップのデモでは自動・手動再生が可です。下部のページネーションは、アニメーションでふわりとサムネイルが表示されます。[ad#ad-2]トップ以外の3種類のデモもご紹介。デモ:Basicベーシックなタイプとサムネイル付きのスライドショー。デモ:Features動画、HTML5の独自属性で実装したスライドショー。デモ:Fullscreenフルスクリーンタイプのスライドショー。Cameraの使い方Cameraで使用する基本的なHTMLの構造から。HTMLdiv要素にHTML5の独自属性で「data-src」を使い、画像を配置します。data-src="images/image_2.jpg"></div></div>外部ファイル「jquery.js」をはじめ下記のスクリプトを外部ファイルとして記述します。※全スクリプトはダウンロードファイルに含まれています。src='scripts/camera.min.js'></script>JavaScriptjQueryのセレクタで画像を内包するdiv要素を指定します。jQuery('#camera_wrap').camera({});オプションを使用する場合は、下記のようになります。true});CSS用意されている「camera.css」には33種類のスキンが用意されており、アイコンに異なるカラーを与えます。自分専用のスキンもこのスタイルシートを編集することで簡単にできます。Posts関連記事が見つかりませんでした。