読み込み
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js”></script>
<script type=”text/javascript” src=”./js/fotorama.js”></script>
<link rel=”stylesheet” href=”./css/fotorama.css” />
設定
<div class=”fotorama”
オプション1=～
オプション2=～
オプション3=～>
<img src=”./images/1.jpg”>
<img src=”./images/2.jpg”>
</div>
画像でない要素もスライド可能
<div class=”fotorama”>
<div>～</div>
<div>～</div>
<div>～</div>
</div>
オプション
<div class=”fotorama”
幅
data-width=”800"
高さ
data-height=”600″>
サムネイル表示
data-nav=”thumbs”
全画面表示
data-allowfullscreen=”true”
フェード表示
data-transition=”crossfade”
ループ再生
data-loop=”true”
自動再生
data-autoplay=”true”
矢印表示
data-arrows=”true”
クリック移動
data-click=”true”
スワイプ移動
data-swipe=”true”
<img src=”./images/1.jpg”>
<img src=”./images/2.jpg”>
</div>
幅を自動調整
<div class=”fotorama” >
<img src=”./images/1.jpg”>
<img src=”./images/2.jpg” data-fit=”cover”>
</div>
画像にキャプションを表示
<div class=”fotorama”>
<img src=”./images/1.jpg” data-caption=”One”>
<img src=”./images/2.jpg” data-caption=”Two”>
</div>
