LightBoxが動かないときはソースを確認してみよう

この記事を読むのに必要な時間は約 16 分です。

script を読みこむ順番に注意しよう

1.ソースを見る。

動かないときは、まず、ソースを見てみましょう。
→ページを右クリック→ソース

Ctrl+Fキーで文字列を検索します。
jquery と打って検索してみましょう。

最初に

<script type='text/javascript' src='https://あなたのURL/wp-includes/js/jquery/jquery.js'></script>

が見つかるはずです。

Lightboxプラグインは、これより下に入っています。

以下はこのブログで使用しているsimple-lightbox のコードです。

<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/client/js/prod/lib.core.js?ver=2.7.0&#038;fver=20180625011058'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/client/js/prod/lib.view.js?ver=2.7.0&#038;fver=20180625011058'></script> 
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/themes/baseline/js/prod/client.js?ver=2.7.0&#038;fver=20180625011100'></script> 
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/themes/default/js/prod/client.js?ver=2.7.0&#038;fver=20180625011102'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/template-tags/item/js/prod/tag.item.js?ver=2.7.0&#038;fver=20180625011100'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/template-tags/ui/js/prod/tag.ui.js?ver=2.7.0&#038;fver=20180625011100'></script>
<script type='text/javascript' defer='defer' src='https://www.never-giveup.net/wp-content/plugins/simple-lightbox/content-handlers/image/js/prod/handler.image.js?ver=2.7.0&#038;fver=20180625011059'></script>

footerに近いところにありました。

ご自分のLightboxプラグインのスクリプトが全体のどの辺にあるかチェックしてみましょう。

Lightboxプラグインを読み込む場所は、なるべくfooterに近いほうが他のプラグインから干渉を受けません。

たいていのLightbox系プラグインは、設定でheaderかfooterを選択できます。

2.リンクが切れてないか確認する。

プラグインのリンクを見つけたらクリックしてリンクが切れてないか確認しましょう。

3.スクリプトコードにdeferを加える。

本体のjqueryの後のスクリプトを順番よく読み込む為に「defer」を用いると良いでしょう。
deferを用いると書かれた順番にスクリプトが実行されます。

プラグインAsync JavaScriptで実装できます。
必ず設定で本体のjqueryを除外設定とすることがポイントです。

<script type='text/javascript'  defer='defer' src='https://www.never-giveup.net/wp-content/plugin/jquery-colorbox/jquery-colorbox.js'></script>

jquery.js は一番最初に読み込むスクリプト。
asynk deferを除外設定する。
lightbox系スクリプトは、footerに近いところで読み込むようにします。
<script type='text/javascript' src='https://www.never-giveup.net/wp-includes/js/jquery/jquery.js'></script>

画像リンクを確認しよう

どの画像に対し、lightboxを適用するのか指定する必要があります。
プラグインによって変わりますが、リンク(rel)の指定かクラスの指定が必要です。
rel=”lightbox”      data-rel=” lightbox” (HTML5からはdataで)

<a href="https://www.never-giveup.net/images/2477.jpg" data-rel="lightbox"/><img src="https://www.never-giveup.net/images/2477.jpg" title="タイトル" alt="タイトル"/>

↓これは最新のJetPackの画像リンクです。写真のexif(meta情報)までご丁寧に読み込んでいます。そのためやたらと長~~くなっています。

<a href="http://https://www.never-giveup.net/images/2014/02/IMG_3407_r.jpg" data-rel="lightbox-gallery" class=""><img data-attachment-id="1595" data-orig-file="https://www.never-giveup.net/images/202/IMG_3407_r.jpg" data-orig-size="1600,1200" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Canon PowerShot SX210 IS&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1364009619&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;21.135&quot;,&quot;iso&quot;:&quot;80&quot;,&quot;shutter_speed&quot;:&quot;0.002&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="IMG_3407_r" data-image-description="" data-medium-file="https://www.never-giveup.net/images/2014/02/IMG_3407_r-300x225.jpg" data-large-file="https://www.never-giveup.net/images/2014/02/IMG_3407_r-1066x800.jpg" src="https://www.never-giveup.net/images/2014/02/IMG_3407_r-646x485.jpg" width="646" height="485" align="left" title="IMG_3407_r" scale="0" class="tc-smart-load-skip tc-smart-loaded" style="width: 646px; height: 481px; display: block;"></a>

動かない場合はソースを読んで画像リンクを確認しましょう。

リンクにlightboxの文字列がないときはWPの編集画面で画像を編集するエディター↓で指定できます。

リンクrelにlightboxを書き加えます。

ギャラリーの場合は個別の画像に属性を付けられません。
テーマに変更を加える必要があります。

テーマの function.php に以下のフィルターを加え、画像リンクを置き換えます。

引用元

add_filter('the_content', 'my_addlightboxrel');

function my_addlightboxrel($content) {
       
   global $post;
       
   $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       
   $replacement = '<a$1href=$2$3.$4$5 data-rel="lightbox" title="'.$post->post_title.'"$6>';
       
   $content = preg_replace($pattern, $replacement, $content);
       
   return $content;

}

このコードは元の画像リンクを差し替えます。

※function.php に手を加える場合、事前にコピーを保存しておきましょう。
最悪、テーマが壊れ、サーバーに戻れなくなります。

また、投稿内の画像全部にかける場合はCSSクラスを指定し、プラグインで設定することができます。(プラグインの仕様に準ずる)

.entry-content img

.archive img (アーカイブページ画像)

.post img (シングルページ画像)

.page img

ギャラリーに使用する場合には

.gallery img

.tiled-gallery-item img(JetPackタイルギャラリー用)

それでも動かない場合

諦めましょう。

冗談です。(≧≦)

たぶん上のことを一つずつチェックすれば動くと思います。

それでも動かないなら干渉しているプラグインがあると思いますので、ソースを見て本体のjqueryの読み込みの後に続くスクリプトを確認してください。

管理画面にてインストール済みプラグインの画面から干渉してそうなプラグインをすべて停止させてください。

動くようになれば、そのプラグインが原因ですので捨てて下さい。

それでも動かない

→それでも動かない場合、テーマに原因があるか壊れています。

初期テーマに戻してください。

LightBox系おすすめプラグイン

Images Lazyload and Slideshow

少し古いプラグインですが、FancyBox PrettyPhoto SlimBox HighSlide が利用できます。
このプラグインはスライドショーと付くところから写真が多いサイト向けです。
画像クラスを指定して使えるので便利です。他のサイトで使用しています。

Responsive Lightbox & Gallery

lightboxを組み込み済みのプラグイン。
SwipeBox | prettyPhoto | FancyBox | Nivo Lightbox | Image Lightbox | TosRUs | Featherlight | Magnific Popup

全部で8個の中から選べます。おすすめです。

Simple Lightbox

そして最後に当ブログで長く使用しているSimple Lightboxです。
名前の通りシンプルで使いやすくておすすめ。

以上、LightBoxでした。