てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板（この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。）

■フリースペース：編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン《てがろぐCGIの配布ページに戻る》

No.1516

拡大画像が表示される際に、ぐいーんと枠が広がるアニメーションが嫌で「Lightbox以外のスクリプトを使いたい」と思われる方もいらっしゃるかも知れませんが、わざわざ別のスクリプトに変更しなくても、Lightboxのオプションを以下のように指定するだけで、ぐいーんと広がったり、ふわっと切り替わったりするアニメーション効果をOFFにして、一瞬で拡大画像を表示することもできます。#🌱豆知識

具体的には、外側スキン(skin-cover.html)内の末尾に記述してある [[JS:LIGHTBOX:JQ]] の記述よりも下側に(重要)、以下のHTMLソース(JavaScript)を書きます。
<script>
lightbox.option({
    'fadeDuration': 0,    /* 描画枠の描画アニメーション時間を0ミリ秒にする(デフォルトは600) */
    'imageFadeDuration': 0, /* 画像の読み込み時のアニメーション時間を0ミリ秒にする(デフォルトは600) */
    'resizeDuration': 0 /* 描画枠のサイズ変更時のアニメーション時間を0ミリ秒にする(デフォルトは700) */
})
</script>
上記では、fadeDuration、imageFadeDuration、resizeDurationの3項目の値をすべて0にしています。これはアニメーションにかける時間をミリ秒で指定するオプションなので、0を指定するとアニメーション効果をOFFにできます。「アニメーション効果は欲しいが、もっと素早く動いて欲しい」という場合には、デフォルト秒数よりも短い時間を指定すれば良いでしょう。
なお、複数のオプションを記述する際は、上記のように半角カンマ記号「,」で区切ります。このとき、最後の項目の後にはカンマ記号を打たないように注意して下さい。

ちなみに、ナビゲーション関連のオプションには例えば以下のような項目もあります。
<script>
lightbox.option({
    'alwaysShowNavOnTouchDevices': true, /* モバイル端末では左右の移動矢印を常時表示する */
    'showImageNumberLabel': false    /* 画像の番号を表示しない */
})
</script>
Lightboxは、PC上では画像の上にマウスを載せると、次の画像や前の画像へ移動するための矢印アイコンが画像の左右に表示されます。しかし、マウスのないモバイル端末では表示されません。このalwaysShowNavOnTouchDevicesオプションの値を「true」にすると、モバイル端末(タッチデバイス)では、左右の矢印が常時表示されるようになります。(複数の画像がある場合のみ)
また、Lightboxでは拡大画像の左下に「Image 1 of 20」のような感じで、いま何番目の画像を表示しているのかが案内されます。showImageNumberLabelオプションの値をfalseにすれば、これを非表示にできます。畳む

上記のような書式で指定できるLightboxのオプションは、Lightbox公式サイトに表形式で書かれています。
➡ https://lokeshdhakar.com/projects/lightbox2/#options

(1460文字) No.1516 at 2020/02/16(日) 10:57:18〔5年以上前〕 by