高機能過ぎるjQueryスライドショー「Camera slideshow」
The text you need
「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。
デフォル トの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。
ま た、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。
サンプルを作ってみました。 → 高機能過ぎるjQueryスライドショー 「Camera slideshow」サンプル
軽くて使いやすいので、どの画像ギャラリースライダーを 使おうか迷った時の選択肢のひとつに良いと思います。
【使用方法】
まずはこちらのCameraの サイトからファイル一式ダウンロードします。デモを含むZIPファイルを利用するとわかりやすいと思います。
＜head＞ 部分にcssとJavaScriptを指定します。
<link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/camera.min.js'></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_test').camera({
height: '50%',
});
});
</script>
＜body＞ 部分にスライドさせる画像を設定します。
<div
class="camera_wrap camera_chocolate_skin" id="camera_wrap_test">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
<div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
</div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
<div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
</div>
上のソースのcamera_chocolate_skinの部分には、すでに用意されている３３種類のスキンを使用することができ
ます。CSSファイルを 編集してオリジナルのスキンを作ることも可能です。
用意されているスキンは以下の通りで す。
用意されているスキンは以下の通りで す。
camera_amber_skin | camera_ash_skin | camera_azure_skin | camera_beige_skin | camera_black_skin | camera_blue_skin | camera_brown_skin | camera_burgundy_skin | camera_charcoal_skin | camera_chocolate_skin | camera_coffee_skin | camera_cyan_skin | camera_fuchsia_skin | camera_gold_skin | camera_green_skin | camera_grey_skin | camera_indigo_skin | camera_khaki_skin | camera_lime_skin | camera_magenta_skin | camera_maroon_skin | camera_orange_skin | camera_olive_skin | camera_pink_skin | camera_pistachio_skin | camera_pink_skin | camera_red_skin | camera_tangerine_skin | camera_turquoise_skin | camera_violet_skin | camera_white_skin | camera_yellow_skin
オプションを設定することで様々なカスタ マイズが可能になっています。
※さらに詳しいカスタマイズは元サイト内のoptionsを 参考。
最後にサンプルのソースを書いておきますので、どうぞご参考まで。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>高機能過ぎるjQueryスライドショー「Camera slideshow」サンプル</title>
<link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
<style>
.fluid_container {
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
</style>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/camera.min.js'></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_test').camera({
height: '50%',
});
});
</script>
</head>
<body>
<div class="fluid_container">
<div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
<div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
</div>
</div>
</body>
</html>
Photo:Michał
Halczewski <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>高機能過ぎるjQueryスライドショー「Camera slideshow」サンプル</title>
<link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
<style>
.fluid_container {
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
</style>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/camera.min.js'></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_test').camera({
height: '50%',
});
});
</script>
</head>
<body>
<div class="fluid_container">
<div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
<div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
</div>
</div>
</body>
</html>
