備忘録 JavaScript WordPress

jQuery Colorboxが表示されないのを修正

7月に入りました。(もう2日)ですが。

少しずつブログを書いていこうと思いますので、よろしくお願いいたします。

さて、画像の表示としてjQuery Colorboxを使おうと思ったのですが、なぜか画像が表示されない……

d3de9a06c6e9ea84ba97dac0a060a4d5

枠だけが表示されているんですよねぇ……

もう私にはどうしようもない……

とは思わず、頑張ってやっていくことに。

まず、F12を押下してデベロッパーツールを起動し、画像近辺をみてみる。

6d7b899591b82586bc8d73ac651025a2

classでcolorboxがあって、widthとheightがありますね。

まずはそれを大きめにとってみる。(width heightともに100px追加)

2e34073bc2a926f981ee05209e8d3215

これではまだ画像がでませんねぇ。

子クラスのcboxWrapperもwidthとheightが同じ値で記載されているので、変えてみますか。

131977708760f312326e436458ce43f9

お、画像が出てきた出てきた。

どうやら、colorboxとcboxWrapperを調整すればいけそうですねぇ。

CSSファイルを直せばいけるとは思っていませんが、とりあえずCSSファイルを見たが、widthとheightを記載されているものはなし。

ファイル毎にcolorboxとcboxWrapperを検索したがなかなかわからなかった……

なので、jquery.colorbox.jsを解析し、以下の点を修正してみた。

[javascript] function modalDimensions(that) {
//SSC modify start 2012/7/1
//$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
$content[0].style.width = $topBorder[0].style.width = $bottomBorder[0].style.width = (that.style.width.replace(/[px]/g,'')-42)+"px";
//$content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
$content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (that.style.height.replace(/[px]/g,'')-42)+"px";
//SSC modify end 2012/7/1
}
//SSC modify start 2012/7/1
// $box.dequeue().animate({width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: top, left: left}, {
$box.dequeue().animate({width: settings.w + loadedWidth + 42 , height: settings.h + loadedHeight +42 , top: top, left: left}, {
//SSC modify end 2012/7/1
duration: speed,
complete: function () {
modalDimensions(this);

                             active = false;

                             // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
                             //SSC modify start 2012/7/1
                             //$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
                             $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth + 42) + "px";
                             //$wrap[0].style.height = (settings.h + loaded    Height + interfaceHeight) + "px";
                             $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight + 42) + "px";
                             //SSC modify end 2012/7/1

             if (settings.reposition) {
                     setTimeout(function () {  // small delay before binding onresize due to an IE8 bug.
                         $window.bind('resize.' + prefix, publicMethod.position);
                     }, 1);
                 }

                             if (loadedCallback) {
                                     loadedCallback();
                             }
                     },
                     step: function () {
                             modalDimensions(this);
                     }
             });
     };

[/javascript]

単純に枠組みの画像分追加でいけるんですよね…(枠組み左側右側それぞれ21px)

でも、それだけだと枠組み表示する部分にもwidthとheightが追加され、おかしなことになるので、その部分だけ増やさないように修正してみた。

あとはminifyして、置き換えなおしたら終了…w

応急処置として使用するには問題ないでしょ。

-備忘録, JavaScript, WordPress
-, , ,

© 2020 かえでBlog