画像の表示としてjQuery Colorboxを使おうと思ったのですが、なぜか画像が表示されない……
枠だけが表示されているんですよねぇ……
もう私にはどうしようもない……
とは思わず、頑張ってやっていくことに。
まず、F12を押下してデベロッパーツールを起動し、画像近辺をみてみる。
classでcolorboxがあって、widthとheightがありますね。
まずはそれを大きめにとってみる。(width heightともに100px追加)
これではまだ画像がでませんねぇ。
子クラスのcboxWrapperもwidthとheightが同じ値で記載されているので、変えてみますか。
お、画像が出てきた出てきた。
どうやら、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
応急処置として使用するには問題ないでしょ。