HOKAN
(カテゴリを選択)
イラスト (6)
小説 (4)
フルーツ (6)
野菜 (2)
デモ用 (2)
使い方 (5)
ウェブサイトのHOMEへ戻る
No.22
使い方
Lightbox以外の画像拡大ビューアを使用する場合
hokanで使用できるビューア 見つけたら随時確認していきます
起動スクリプトの表記はJS初心者が書いてるので不確実ですが、試してみたら動いたので多分いけます
動作確認済ビューア
☑
Lightbox
(てがろぐ標準)
☑
fancybox
(3系)
☑
Spotlight
☑
baguetteBox
→起動スクリプトが
<script>window.onload = function() { baguetteBox.run('任意のクラス名');};</script>
になっていれば大丈夫だと思います メインになるエリアか記事一つを囲むクラス名を設定しておいてください 「画像リンクに独自のclass属性値を追加」だとスワイプできないっぽい
☑
Luminous
→起動スクリプトが
<script>
window.onload = function() {
new LuminousGallery(document.querySelectorAll('任意のクラス名')
);};
</script>
になっていれば大丈夫だと思います これは「画像リンクに独自のclass属性値を追加」でOK
☑
Magnific Popup
→起動スクリプトが
<script>
window.onload = function(){
$('任意のクラス名').magnificPopup({
type: 'image',
gallery: { enabled:true}
});
};
</script>
これもLuminousと同じで「画像リンクに独自のclass属性値を追加」
☑
GLightbox
<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>~</script>
という部分をGLightboxの起動スクリプトの前に移動してみてください
□
fuwaimg
→少し格闘してみたのですが、今の管理人のjsぢからでは満足いく形に実装できなかったです…すまない…
(あとはだいたい起動スクリプトが「window.onload = function()」になってれば大丈夫じゃないかな…)
以下hokanの作りの説明
続きを読む
「hokan」は一覧用と単独記事用の表示を用意して、状況別にどちらかを非表示にすることでデザインが切り替わっているように見せているスキンです。そのため、非表示にした画像をビューアが拾って表示してしまうことがあります。
24/07/14の更新でIF文対応したことにより、非表示にした分のhtmlを出力しなくなったので大部分は大丈夫になったのですが、トップだけは先頭固定を残すためCSSで切り替えています。
「skin-cover.html」の末尾
<!-- ↓トップで非表示にした画像を記事ごと消す処理 -->
で非表示部分を無効にしていますが、この処理が働くより起動が早い画像ビューアには対応できず…申し訳ありません 一応見つけたビューアは確認してみました
畳む
カスタマイズ 前>>
2023.10.29
No.22
戻る
ユーザ「名無し」の投稿だけを見る
(※
時系列順で見る
)
この投稿と同じカテゴリに属する投稿:
カテゴリ「使い方」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2023年10月29日の投稿だけを見る
(※
時系列順で見る
)
2023年10月の投稿だけを見る
(※
時系列順で見る
)
2023年の投稿だけを見る
(※
時系列順で見る
)
全年10月29日の投稿をまとめて見る
(※
時系列順で見る
)
全年全月29日の投稿をまとめて見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
この投稿を再編集または削除する
起動スクリプトの表記はJS初心者が書いてるので不確実ですが、試してみたら動いたので多分いけます
動作確認済ビューア
☑Lightbox(てがろぐ標準)
☑fancybox(3系)
☑Spotlight
☑baguetteBox
→起動スクリプトが
<script>window.onload = function() { baguetteBox.run('任意のクラス名');};</script>
になっていれば大丈夫だと思います メインになるエリアか記事一つを囲むクラス名を設定しておいてください 「画像リンクに独自のclass属性値を追加」だとスワイプできないっぽい
☑Luminous
→起動スクリプトが
<script>
window.onload = function() {
new LuminousGallery(document.querySelectorAll('任意のクラス名')
);};
</script>
になっていれば大丈夫だと思います これは「画像リンクに独自のclass属性値を追加」でOK
☑Magnific Popup
→起動スクリプトが
<script>
window.onload = function(){
$('任意のクラス名').magnificPopup({
type: 'image',
gallery: { enabled:true}
});
};
</script>
これもLuminousと同じで「画像リンクに独自のclass属性値を追加」
☑GLightbox
<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>~</script>
という部分をGLightboxの起動スクリプトの前に移動してみてください
□fuwaimg→少し格闘してみたのですが、今の管理人のjsぢからでは満足いく形に実装できなかったです…すまない…
(あとはだいたい起動スクリプトが「window.onload = function()」になってれば大丈夫じゃないかな…)
以下hokanの作りの説明
「hokan」は一覧用と単独記事用の表示を用意して、状況別にどちらかを非表示にすることでデザインが切り替わっているように見せているスキンです。そのため、非表示にした画像をビューアが拾って表示してしまうことがあります。
24/07/14の更新でIF文対応したことにより、非表示にした分のhtmlを出力しなくなったので大部分は大丈夫になったのですが、トップだけは先頭固定を残すためCSSで切り替えています。
「skin-cover.html」の末尾<!-- ↓トップで非表示にした画像を記事ごと消す処理 -->で非表示部分を無効にしていますが、この処理が働くより起動が早い画像ビューアには対応できず…申し訳ありません 一応見つけたビューアは確認してみました
畳む
カスタマイズ 前>>