slideshowプラグインについて

Last-modified: Wed, 22 Jul 2020 15:51:45 JST (1373d)
Top > slideshowプラグインについて

概要

カルーセル機能を持ったスライドショーを設置することができるプラグインです。

使い方

#slideshow(画像1,画像2,画像3,...[auto=true],[speed=3000],[adaptiveHeight=false],[slidshowPosition=center],[imgPosition=center],[width],[max-width],[height],[id]);

オプションについて

  • 画像
    • 表示する画像を指定します。「ページ名/画像名」の形式で指定し、slideshowを設置したページと同じページに添付されている場合は「ページ名/」は省略可能です。
  • auto=true|false
    • 画像の自動切換え。trueで自動切換えON、falseで自動切換えOFFとなります。指定が無ければtrueとして動作します。
  • speed
    • 自動切換えを行う際の間隔をミリ秒で指定。指定がない場合は3000ミリ秒(3秒)で動作します。
  • adaptiveHeight=true|false
    • スライドショーの高さが、表示される画像ごとに再調整するかどうかを指定します。falseの場合は常に指定された画像の中で最も大きな高さの画像に合わせたサイズとなります。trueにすると画像が入れ替わるたびに、表示中の画像の高さに合わせてスライドショー全体の高さが再調整されます。指定がない場合はfalseとして動作します。
  • width（%|px|em）
    • スライドショーを表示するエリアの幅を指定します。単位は%、px、emが利用可能です。単位の指定がない（数字だけ記載）場合は自動的にpxとして動作します。幅の指定がない場合は100%となります。
  • max-width(数値)
    • 上記widthを%で指定した場合、最大幅をpxで制限するための引数です。widthを%で指定した場合にのみ有効となります。
  • height（%|px|em）
    • スライドショーを表示するエリアの高さを指定します。単位は%、px、emが利用可能です。単位の指定がない（数字だけ記載）場合は自動的にpxとして動作します。指定がない場合、adaptiveHeight=falseの時は指定されている画像中の最大の高さ、adaptiveHeight=trueの時は表示中の画像の高さで動作します。
  • slideshowPosition=center|left|right
    • スライドショーを表示する位置を左寄せ、中央、右寄せから選択します。指定がなければ中央で動作します。
  • imgPosition=center|left|right
    • スライドショーに表示される画像が表示エリアより小さい場合の表示位置を指定します。指定がなければ中央で動作します。
  • id
    • １ページ内に複数のスライドショーを設置する場合は、それぞれ一意となるIDを半角英数のみで設定してください。１つだけ設置する場合は設定不要です。

画像サイズについて

width、heightのオプションが指定されない場合、画像の元のサイズで表示されます。widthまたはheightが指定された場合、大きな画像は指定されたサイズが最大値となるよう縦横比を保った状態で縮小表示されます。指定されたサイズ未満の小さな画像は引き延ばされることはありません（リサイズされません）。

使用例

デフォルトでの設置例です。ページ内に複数スライドショーを設置する都合上、画像の他にidを設定しています

#slideshow(sample1.png,sample2.png,sample3.png,id=ss1);

画像の切り替えスピードを1秒に変更した例です

#slideshow(sample1.png,sample2.png,sample3.png,speed=1000,id=ss2);

画像の自動切換えをOFFにした例です

#slideshow(sample1.png,sample2.png,sample3.png,auto=false,id=ss3);

adaptiveHeightをONにした例です

#slideshow(sample1.png,sample2.png,sample3.png,adaptiveHeight=true,id=ss4);

スライドショーの幅を画面の100%にした上で最大幅を350pxに制限した例です

#slideshow(sample1.png,sample2.png,sample3.png,width=100%,max-width=350,id=ss5);

表示位置を変更した例です。スライドショーの幅を画面の60%にした上で全体を左寄せにし、画像を右寄せで表示しています

#slideshow(sample1.png,sample2.png,sample3.png,slideshowPosition=left,imgPosition=right,width=60%,id=ss6);

幅と高さを指定した例です。

#slideshow(sample1.png,sample2.png,sample3.png,width=75%,height=100px,id=ss7);

当プラグインについて

[GAMERS WIKI>https://jpngamerswiki.com/?ff7d0a095a]で公開されている、slideshowプラグインをカスタマイズして使用しております。