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」の末尾<!-- ↓トップで非表示にした画像を記事ごと消す処理 -->で非表示部分を無効にしていますが、この処理が働くより起動が早い画像ビューアには対応できず…申し訳ありません 一応見つけたビューアは確認してみました
畳む


カスタマイズ 前>>

戻る