WordPress 備忘録 JavaScript

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

2012年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) + & quot;
    px & quot;;
    //$wrap[0].style.height = (settings.h + loaded    Height + interfaceHeight) + "px";
    $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight + 42) + & quot;
    px & quot;;
    //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

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

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