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

HTML(htmlコード)

HTMLなどのテキストを表示させたい場合は、タグでテキストを囲って記述します。

< div class="fotorama" >
< div >First Slide< /div >
< /div >
First Slide
Second Slide
Third Slide

Selectable text(テキストを選択可能にする)

内包されているテキストを選択可能にしたい場合は、「fotorama__selectクラス」を指定します。

< div class="fotorama" >
< div >< span class="fotorama__select" > First Slide< /span >< /div >
< /div >
First Slide
Second Slide
Third Slide

Thumbnails text(テキストを選択可能にする)

サムネイルを表示したい場合には、data-nav="thumbs"を定義します。

< div class="fotorama" >
< div data-thumbs="images/no1.jpg" / > First Slide< /div >
< /div >
First Slide
Second Slide
Third Slide

Images(画像にテキストを載せる)

画像のスライドの上に、テキストを載せたい場合、data-img="○○.jpg"を定義します。

< div class="fotorama" >
< div data-img="images/no1.jpg" / > First Slide< /div >
< /div >
First Slide
Second Slide
Third Slide

←戻る