かえでBlog

色々なことを徒然と……

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

      2013/04/29

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を解析し、以下の点を修正してみた。


                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);
                         }
                 });
         };

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

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

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

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

 - JavaScript, WordPress, 備忘録 , , ,