WordPressのlightbox系プラグイン『jQuery Colorbox』のモーダルウィンドウの競合を回避する設定方法・他

長年画像をモーダルウィンドウで表示させるのに使っていた、WordPressのlightbox系のプラグイン『jQuery Colorbox』なのですが、一度こういうプラグインの設定をすると、トラブルが起こるまで設定はなかなか見直さないですよね。

jQuery Colorboxのモーダルウィンドウ

で今回、『jQuery Colorbox』のトラブルが起こったので設定を見直すことになったわけなのですが、原因としてはカルーセルプラグイン『Carousel Slider』を導入したことにより、このプラグインが使っているlightbox系のモーダルと、『jQuery Colorbox』のモーダルが競合してしまい、挙動がおかしくなった、という感じなんですよね。

そんなわけで、今さらなのですが『jQuery Colorbox』の設定をきちんと見直して競合回避したのですが、ついでに前から気になっていた「モーダルを出した時に画像がはみ出てしまう」という挙動もきちんと動くようにしたので、メモ!

『jQuery Colorbox』のモーダルウィンドウの競合を回避する方法

1.「Plugin settings」の設定を変更する

まずはセッティング「Plugin settings」の画面で、一番上の
『Automate jQuery Colorbox for all images in pages, posts and galleries』のチェックを外します。

jQuery Colorboxの競合回避設定方法1

これは自動的に全ての画像に『jQuery Colorbox』のモーダルウィンドウがでてくるクラス等が付与され、何もしなくても画像をクリックするとモーダルウィンドウで表示されるようになる設定なのですが、これを外すと自動でモーダルウィンドウはでてこなくなるので、そこは注意してくださいね。

2. <a><img>タグにクラスを付与する

『jQuery Colorbox』もモーダルウィンドウを使いたい画像の<a>タグに

class="cboxElement"

を、 <img>タグに

class="colorbox-1"

を指定します。(数字は任意の数字でOK。)

基本はこれでOK!です!

要は、

<a href="https://xxxxx.jpg" class="cboxElement"><img src="https://xxxxx.jpg" alt="" width="" height="" class="colorbox-1" /></a>

こんな感じにするということですね。

ただ、個別に設定することで『jQuery Colorbox』は全ての画像に効かないですよ!という以下のような警告が、投稿の画面でもプラグインの画面でも、ずっと表示されてしまいます。

正直これがうざいのでもう外してるのですが、他のプラグインのモーダルも、そして『jQuery Colorbox』のモーダルも両方使い分けたい!という方は、この設定で試してみてください。

『jQuery Colorbox』のモーダルの画像がはみ出るのを直す

これは設定の問題ですね。あまり設定を把握せずに『jQuery Colorbox』を導入してしまうと、このように画像をクリックしてモーダルウィンドウを表示させた時、画像がはみ出たような表示になってしまいます。

これは以下の設定に変更することで解決します。

jQuery Colorboxのセッティング

一番大事なのが『Resize images』ですね。ここにチェックが入ってないとはみ出た状態になってしまいます。

あと『Minimum with of an image』、『Minimum height of an image』この2つはチェックを下の方にして、数値は95%で設定しましたが、これは100以下なら大丈夫ですね。95%にすることで、上下サイドに最低でも5%の隙間が開いてくれますが、ここはお好みで大丈夫です。

最後に

もうかれこれ10年ほど?かな?レスポンシブという言葉すらなかったような頃からこの『jQuery Colorbox』を使っているのですが、やはりたまにはおかしい表示を発見したら、スルーしないでチェックしないとダメですね。

わかってはいるんですが『大したトラブルじゃないことに時間を割くなら、違うことに』という感じでいつもスルーしちゃうんですが、これからはおかしいところを発見したら、トラブルが広がらないようにまめに設定変更や見直しをしたいと思います!

Google AdS



関連記事

☆100達成!PageSpeed Insightsのスコアアップ方法 その3:Autoptimizeを導入する


Google「PageSpeed Insights」のスコア(点数)をアップさせる方法 その『3』です! 今回は『Au…

記事を読む▷


SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


IcoMoonにSVGファイルをインポート

IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法


今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP