てがろぐ
- Fumy Otegaru Memo Logger -
No.1520, No.1519, No.1518, No.1517, No.1516, No.1515, No.1514［7件］
ギャラリーモード内でも、特定ユーザに限定して表示したり、特定ハッシュタグに限定して表示したりできます。
バリエーションの例は以下のような感じです。#🌱豆知識
●ギャラリー(デフォルトの表示) ： tegalog.cgi?mode=gallery
●ギャラリー(ユーザＩＤを限定) ： tegalog.cgi?mode=gallery&userid=ユーザID
●ギャラリー(ハッシュタグ限定) ： tegalog.cgi?mode=gallery&tag=ハッシュタグ
●ギャラリー(日付の範囲を限定) ： tegalog.cgi?mode=gallery&date=日付
●ギャラリー(任意の単語で検索) ： tegalog.cgi?mode=gallery&q=検索語
バリエーションの例は以下のような感じです。#🌱豆知識
●ギャラリー(デフォルトの表示) ： tegalog.cgi?mode=gallery
●ギャラリー(ユーザＩＤを限定) ： tegalog.cgi?mode=gallery&userid=ユーザID
●ギャラリー(ハッシュタグ限定) ： tegalog.cgi?mode=gallery&tag=ハッシュタグ
●ギャラリー(日付の範囲を限定) ： tegalog.cgi?mode=gallery&date=日付
●ギャラリー(任意の単語で検索) ： tegalog.cgi?mode=gallery&q=検索語
テストテストあいうえお
内部画像の含まれる投稿だけを一覧で表示できるギャラリーモードのほかに、UPされている画像のすべてを一覧で表示できるImagesモード的なものもあった方が良いのかな……。（ギャラリーモードでは、「UPされているが投稿本文には含まれていない画像」は表示されませんし、デフォルトのギャラリー用スキンでは投稿に含まれる1枚目の画像しか表示されませんし。）
はらへったなう。(´･ω･`)
拡大画像が表示される際に、ぐいーんと枠が広がるアニメーションが嫌で「Lightbox以外のスクリプトを使いたい」と思われる方もいらっしゃるかも知れませんが、わざわざ別のスクリプトに変更しなくても、Lightboxのオプションを以下のように指定するだけで、ぐいーんと広がったり、ふわっと切り替わったりするアニメーション効果をOFFにして、一瞬で拡大画像を表示することもできます。#🌱豆知識
具体的には、外側スキン(skin-cover.html)内の末尾に記述してある [[JS:LIGHTBOX:JQ]] の記述よりも下側に(重要)、以下のHTMLソース(JavaScript)を書きます。
上記では、fadeDuration、imageFadeDuration、resizeDurationの3項目の値をすべて0にしています。これはアニメーションにかける時間をミリ秒で指定するオプションなので、0を指定するとアニメーション効果をOFFにできます。「アニメーション効果は欲しいが、もっと素早く動いて欲しい」という場合には、デフォルト秒数よりも短い時間を指定すれば良いでしょう。
なお、複数のオプションを記述する際は、上記のように半角カンマ記号「,」で区切ります。このとき、最後の項目の後にはカンマ記号を打たないように注意して下さい。
ちなみに、ナビゲーション関連のオプションには例えば以下のような項目もあります。
Lightboxは、PC上では画像の上にマウスを載せると、次の画像や前の画像へ移動するための矢印アイコンが画像の左右に表示されます。しかし、マウスのないモバイル端末では表示されません。このalwaysShowNavOnTouchDevicesオプションの値を「true」にすると、モバイル端末(タッチデバイス)では、左右の矢印が常時表示されるようになります。(複数の画像がある場合のみ)
また、Lightboxでは拡大画像の左下に「Image 1 of 20」のような感じで、いま何番目の画像を表示しているのかが案内されます。showImageNumberLabelオプションの値をfalseにすれば、これを非表示にできます。畳む
上記のような書式で指定できるLightboxのオプションは、Lightbox公式サイトに表形式で書かれています。
➡ https://lokeshdhakar.com/projects/lightbox2/#options
具体的には、外側スキン(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
先日リリースした Ver 2.5.0 に付属の skin-gallery に含まれる skin-cover.html ファイルの中身をテキストエディタで開くと、CSSファイルの読み込み部分が tegalog-gallery.css?d20200207a になっています。この末尾の「?d20200207a」は特に要らないので消して下さって構いません。いや、消さずにそのまま放置しても悪影響はありませんが。(なので特に配布パッケージも修正せず放置しています。^^;) テスト段階でキャッシュが読まれるのを防ぐために付けていた文字列を消すのを忘れていただけです……。
