jQueryプラグインのスライドショー「camera.js」について

jQueryプラグインのスライドショー「camera.js」について

滋賀 大津 京都 エリアでホームページ作成・WEBデザインをしているカエルズデザインの谷川です。
今回は最近クライアントワークで利用したjQueryプラグインCameraについての使い方備忘録です。
詳細にはまとめておりませんので予めご了承ください。
スライド時のエフェクトが豊富で、レスポンシブにも対応した高機能スライドショーです。

デモ紹介

カエルズデザインのトップページのメインビジュアルにcamera.jsを設置してみました。
このDEMOではanimate.cssをテキスト部分に適用しています。

 カエルズDEMO 

オフィシャルのDEMOはこちらから→

camera設置方法

プラグインのオフィシャルサイトはこちらです。
camera

このページからはうまくダウンロードできなかったのでこちらよりダウンロードしました。
https://github.com/pixedelic/Camera

記述例はこちら
CSSとJSを設置しましょう。
設置するフォルダ等は任意のものに変更してください。

<link type="text/css" href="css/camera.css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobile.customized.min.js"></script>
<script src="js/camera.js"></script>
<script type="text/javascript">
  jQuery(function(){
      jQuery('#camera_slide').camera();
  });
</script>

HTMLはこちら

<div class="demo">
<div class="camera_wrap camera_green_skin" id="camera_slide">
	<div data-src="img/demo01.jpg">
	 <div class="camera_caption">
            キャプションを入れることが出来ます。
         </div>
	</div>
	
	<div data-src="img/demo02.jpg">
	  <div>
           ここには自由にコンテンツを入れてスタイルを適用することもできます。
         </div>
	</div>
    
    <div data-src="img/demo03.jpg">
	 <div>
           ここには自由にコンテンツを入れてスタイルを適用することもできます。
         </div>
	</div>
</div>
</div>

オプション

よく使いそうなオプションはこちら
初期値が表記されています。

fx: ‘random’‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
エフェクトの数々。複数のエフェクトを組み合わせるにはコンマで ‘simpleFade, scrollRight, scrollBottom’
height: ‘50%’画像の横幅に対しての割合です。
hover: trueホバー時にアニメーションをストップするかどうか
navigation: trueナビゲーションの有無
time: 7000スライドの間隔。ミリセカンドで設定
time: 7000スライドの間隔。ミリセカンドで設定

全てのオプションはこちらを参照ください。
http://www.pixedelic.com/plugins/camera/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ご相談・お問い合わせはこちら

ホームページ制作・WEBデザイン・Wordpressの構築・リニューアルなどの
ご相談やお見積りはこちらからお気軽にお問い合わせください。

お問い合わせはこちら