シンプルで美しいスライドギャラリーjQueryプラグイン「fotorama.js」

Basic(基本)

ベーシックスタイル:画像サイズ(サンプル画像は、500×333px)そのままをスライドしてくれます。

Dimensions(大きさ)

date-width,date-height属性を指定することで表示される画像領域とサイズを指定することができます。

< div class="fotorama" data-width="800" data-height="600" >

Responsive(可変)

1.ウィンドウサイズに従い画像サイズを可変にする場合、date-widthで横幅を%指定、date-ratioでアスペクト比(800/600)を定義します。

< div class="fotorama" data-width="100%" data-ratio="800/600" >

2.表示する画像の最小値・最大値を指定します。data-minwidth,data-minheight,data-maxwidth,data-maxheight

< div class="fotorama" data-width="100%" data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%" >