フルスクリーン Fullscreen Fotorama デモ

Fotoramaステージの右上にあるアイコン（トグルボタン）をクリックて、Fotoramaステージを拡大してフルスクリーンに移行します。 また、フルスクリーンで同じアイコンをクリックして、元のFotoramaステージに戻ることができます。 デフォルトはフルスクリーンを行わない。

通常のフルスクリーンの設定：data-allowfullscreen

HTML

<div class="fotorama" data-width="600" data-ratio="4/3" 
        data-fit="cover" data-allowfullscreen="true">
  <img src="images/f/full-01.jpg">
  <img src="images/f/full-02.jpg"> 
  <img src="images/f/full-03.jpg">
  <img src="images/f/full-12.jpg">
  <img src="images/f/full-05.jpg">
  <img src="images/f/full-06.jpg">
  <img src="images/f/full-07.jpg">
  <img src="images/f/full-08.jpg">
  <img src="images/f/full-09.jpg">
  <img src="images/f/full-10.jpg">
  <img src="images/f/full-11.jpg">
  <img src="images/f/full-13.jpg">
  <img src="images/f/full-14.jpg">
</div>

デモ（画像１５枚）

フルスクリ－ンAPIを使用したネイティブなフルスクリーンの設定：data-allowfullscreen

HTML

<div class="fotorama" data-width="600" data-ratio="4/3" 
        data-fit="cover" data-allowfullscreen="true">
  <img src="images/f/full-01.jpg">
  <img src="images/f/full-02.jpg"> 
  <img src="images/f/full-03.jpg">
  <img src="images/f/full-12.jpg">
  <img src="images/f/full-05.jpg">
  <img src="images/f/full-06.jpg">
  <img src="images/f/full-07.jpg">
  <img src="images/f/full-08.jpg">
  <img src="images/f/full-09.jpg">
  <img src="images/f/full-10.jpg">
  <img src="images/f/full-11.jpg">
  <img src="images/f/full-13.jpg">
  <img src="images/f/full-14.jpg">
</div>

デモ（画像１５枚）

フルスクリーンで、Fotoramaステージとは別の大きな画像を設定：data-allowfullscreen,data-full

例として、フルスクリーン用の大きな画像とFotoramaステージの画像（ここでは600px)を別に用意します。

HTML

<div class="fotorama" data-width="600" data-ratio="4/3" 
                         data-fit="cover" data-allowfullscreen="native">
  <img src="images/f/w600/full-01.jpg" data-full="images/f/full-01.jpg"> <!-- 600X450 1256X1920 -->
  <img src="images/f/w600/full-02.jpg" data-full="images/f/full-02.jpg"> <!-- 600X450 1600X1920 --> 
  <img src="images/f/w600/full-03.jpg" data-full="images/f/full-03.jpg"> <!-- 600X450 1600X1920 -->
  <img src="images/f/w600/full-04.jpg" data-full="images/f/full-04.jpg"> <!-- 600X450 1600X1920 -->
  <img src="images/f/w600/full-05.jpg" data-full="images/f/full-05.jpg"> <!-- 600X450 1600X1920 -->
  <img src="images/f/w600/full-06.jpg" data-full="images/f/full-06.jpg"> <!-- 600X450 1256X1920 -->
  <img src="images/f/w600/full-07.jpg" data-full="images/f/full-07.jpg"> <!-- 600X450 1600X1920 -->
  <img src="images/f/w600/full-08.jpg" data-full="images/f/full-08.jpg"> <!-- 600X450 1024X768  -->
  <img src="images/f/w600/full-09.jpg" data-full="images/f/full-09.jpg"> <!-- 600X450 1024X768  -->
  <img src="images/f/w600/full-10.jpg" data-full="images/f/full-10.jpg"> <!-- 600X450 1024X768  -->
  <img src="images/f/w600/full-11.jpg" data-full="images/f/full-11.jpg"> <!-- 600X450 1024X768  -->
  <img src="images/f/w600/full-12.jpg" data-full="images/f/full-12.jpg"> <!-- 600X403 1562X1051 -->
  <img src="images/f/w600/full-13.jpg" data-full="images/f/full-13.jpg"> <!-- 600X383 1643X1051 -->
  <img src="images/f/w600/full-14.jpg" data-full="images/f/full-14.jpg"> <!-- 600X386 1630X1051 -->
</div>

デモ（画像１５枚）サイズ：上HTMLコメント参照。左、Fotoramaステージの画像　右、フルスクリーン用の画像。

Fotorama (c) Artem Polikarpov ／ powered by Fotorama (c) Artem Polikarpov

  最終更新日：2016.3.8(初版）