kdcsライブラリー

jQueryスライドショー「Camera slideshow」現在は無料配布されてないっぽい

head内にjQueryとcssを読み込む

<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>

オプションを含むjqueryの設定

<script type="text/javascript">
  jQuery(function(){
      jQuery('#slide').camera();//任意のセレクタですが、今回は#slideにしています
  });
</script>

HTMLの記述
イメージファイルはimgタグではなく「data-src」を使う

<div id="slide" class="camera_wrap">
    <div data-src="sample1.jpg"></div>
    <div data-src="sample2.jpg"></div>
    <div data-src="sample3.jpg"></div>
    <div data-src="sample4.jpg"></div>
</div>

Camera slideshowのスキンを使う場合

<div id="slide" class="camera_wrap camera_blue_skin">
    <div data-src="sample1.jpg"></div>
    <div data-src="sample2.jpg"></div>
    <div data-src="sample3.jpg"></div>
    <div data-src="sample4.jpg"></div>
</div>

スキンの種類

camera_amber_skin  |  camera_ash_skin  |  camera_azure_skin
camera_beige_skin  |  camera_black_skin  |  camera_blue_skincamera_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

オプション

alignment: 'center' //写真を表示する位置 topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
autoAdvance: true //スライドアニメーションの自動スタート
mobileAutoAdvance: true //スライドの自動スタートモバイル版
barDirection: 'leftToRight' //ローダーのバーの進行方向　'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop'
barPosition: 'bottom'　//ローダーのバーの位置
cols: 6 //エフェクト効果の列の数
easing: 'easeInOutExpo' //イージングの変更
fx: 'random' //スライドアニメーションのエフェクト
gridDifference: 250
height: '50%'
hover: true //スライドにホバーするとアニメーションストップ
imagePath: 'images/' //プラグイン関係の画像のパス
loader: 'pie' //ローダーのタイプ  pie, bar, none
loaderColor: '#eeeeee' ローダーの色
loaderBgColor: '#222222'　ローダーの背景の色
loaderOpacity: .8 //ローダーの透過度
loaderPadding: 2 //ローダーのパディング
loaderStroke: 7 //ローダーの線の太さ
minHeight: '200px' //最小高さ
navigation: true //次へ、前へのリンク有無
navigationHover: true //ホバーでナビゲーションを表示、非表示
mobileNavHover: true 
opacityOnGrid: false
overlayer: true
pagination: true //スライドのページネーションの有無
playPause: true //ストップボタンの有無
pauseOnClick: true //スライドをクリックするとスライドショーを止める
pieDiameter: 38 //ローダーの円のサイズ
piePosition: 'rightTop' //ローダーの円の位置
portrait: false //
rows: 4 //エフェクト効果の行の数
slicedCols: 12 //エフェクト効果スライスの列の数　
slicedRows: 8　//エフェクト効果スライスの行の数　
slideOn: 'random'
thumbnails: false //サムネイルの有無
time: 7000 //スライドの表示時間
transPeriod: 1500 //スライドアニメーションの時間

アニメーション fx:

'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'