HTMLテキスト Fotorama デモ

DIVブロック内のHTMLタグで描かれた要素をFotoramaステージに表示し、スライドします。
それらには、テキスト、テーブル、iframeや画像などがあります。
さらに、通常の画像スライド上にこれらのHTMLテキストを表することができます。

HTMLテキストのみのスライド

最も簡単なHTMLテキストの設定方法

・HTML

<div class="fotorama" style="width:500px;background:#dcdcdc">
  <div>One</div>
  <div><font color=#ffffff><strong>Two</strong></font></div>
  <div><font color=red><em>Three</em></font></div>
  <div>トンボGIF<br><img src="images/f/tombo.gif">
    </div>
  <div>
     <table border=1 bgcolor=#ffffff><caption>テーブル</caption>
       <tr bgcolor=beige><td>項目１</td><td>項目２</td></tr>
       <tr><td>ひばり</td><td>すずめ</td></tr>
      </table>
    </div>
  <div>YouTube<br>
       <iframe width="480" height="270" src="https://www.youtube.com/embed/pwqDcul0bpU" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

・デモ（HTML）
One
Two
Three
トンボGIF
テーブル
項目１項目２
ひばりすずめ
YouTube
Fotoramaサイト

スタイルシートでDIVブロックのHTMLテキストなどのカスタマイズ方法：文字の大きさ、表示位置や背景色など

・HTML

<!-- 例 Style for custom HTML  -->
<style type="text/css">
	 .customHtml {
		text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		font-family: Georgia, serif;
		font-size: 72px;
		text-align: center;
		height: 181px;
		padding-top: 100px;
	}
</style>
</head></body>

<div class="fotorama" data-width="500" data-height="281">
   <div class="customHtml" style="background: rgba(255, 0, 0, .2);"><span>One</span></div>
   <div class="customHtml" style="background: rgba(0, 0, 0, .8);"><font color=#ffffff><strong>Two</strong></font></div>
   <div class="customHtml" style="background: rgba(0, 0, 255, .1);"><em>Three</em></div>
   <div  class="customHtml"  style="background: rgba(255, 0, 0, .3);">夕焼けトンボ<br><img src="images/f/tombo.gif"></div>
</div>

・デモ（スタイルシートでHTMLテキストを修飾-テキストの大きさや位置など）
One
Two
Three
夕焼けトンボ

通常の画像スライドにHTMLテキストを表示

画像を併せて表示したい場合は、DIVタグにオプションdata-img,data-thumb, data-thumbratioを使用して、 画像（data-img）、サムネール画像（data-thumb）、サムネール画像の大きさ（data-thumbratio）を記述します。 オプションdata-thumbratioのデフォルトは64X64 pxです。data-thumbratioは、レシオ（横縦の比）で指定しますが、高さは64pxの一定になります。 キャプションとして使える！

・HTML

<div class="fotorama" data-nav="thumbs" data-autoplay="true" data-navposition="top" data-width="675" data-height="450" data-allowfullscreen="true" style="background:#000000;width:600px">
 <div class="customHtml" data-img="images/m/pixabay00-tulip.jpg" 
               data-thumb="images/m/pixabay00-tulip.jpg" data-thumbratio="1/2">
                   <font color=#ffffff>Fotorama<br>スライドショー<br>スタート</font></div>
 <div data-img="images/m/pixabay13-675x450.jpg" data-thumb="images/m/pixabay13-s.jpg" data-thumbratio="144/96"><font color=white>1/10 砂漠</font></div>
 <div data-img="images/m/pixabay02-337x450.jpg" data-thumb="images/m/pixabay02-s.jpg" data-thumbratio="64/128"><font color=white>2/10</font></div>
 <div data-img="images/m/pixabay03-675x450.jpg" data-thumb="images/m/pixabay03-s.jpg"><font color=white>3/10</font></div>
 <div data-img="images/m/pixabay06-360x450.jpg" data-thumb="images/m/pixabay06-s.jpg" data-thumbratio="64/128"><font color=white>4/10</font></div>
 <div data-img="images/m/pixabay12-675x450.jpg" data-thumb="images/m/pixabay12-s.jpg"><font color=white>5/10</font></div>
 <div data-img="images/m/pixabay15-675x450.jpg" data-thumb="images/m/pixabay15-s.jpg"><font color=white>6/10</font></div>
 <div data-img="images/m/pixabay16-675x450.jpg" data-thumb="images/m/pixabay16-s.jpg"><font color=white>7/10</font></div>
 <div data-img="images/m/pixabay17-348x450.jpg" data-thumb="images/m/pixabay17-s.jpg" data-thumbratio="64/128"><font color=white>8/10</font></div>
 <div data-img="images/m/pixabay18-675x450.jpg" data-thumb="images/m/pixabay18-s.jpg"><font color=white>9/10</font></div>
 <div data-img="images/m/pixabay21-355x450.jpg" data-thumb="images/m/pixabay21-s.jpg" data-thumbratio="64/128"><font color=white>10/10</font></div>
</div>

・デモ（）
Fotorama
スライドショー
スタート
1/10 砂漠
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

photo by pixabay.com ／ powered by Fotorama (c) Artem Polikarpov

  最終更新日：2016.3.8(初版）