Trying to fix inline code with colorbox...

I'm not sure the colorbox is the same popular colorbox module for zencart in the downloads, or else I would of posted this in the colorbox support thread. The colorbox came with a template I purchased called genesis, and the documentation in the javascript files states:

jQuery ColorBox v1.3.30
(c) 2013 Jack Moore - jacklmoore.com/colorbox
updated: 2013-01-25
license: http://www.opensource.org/licenses/mit-license.php

I have checked out his website, and it does have a lot of information on it regarding this colorbox. I haven't figured out how to fix the problem I have though yet, which is that when I use smaller pictures (under 800px or so) the colorbox's height is stretched. If I use a 350 x 350 picture, the height is usually stretched to around 751px for some reason. Since this might be a bit hard to envision exactly what I mean, here is a picture:

http://i59.tinypic.com/331k20m.jpg

The picture above is a 350 x 350 pixel. I have tried messing around with firefox firebug, and it seems it's an inline code. There is a colorbox css stylesheet in the template, but after hours of messing around, I think there is so way to adjust the height with it. Firebug says there is an element.style (which I guess is inline code) which is causing a height property. I have looked in the developers tool in my admin, the closest I could find is a javascript file, which seems to be the main colorbox javascript file. I have messed around with it a bit, but to be honest.... I have no idea what I am doing here, :D. Here is the javascript file if anyone wants to check it out:\





/*
jQuery ColorBox v1.3.30
(c) 2013 Jack Moore - jacklmoore.com/colorbox
updated: 2013-01-25
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(e,t,i){function o(i,o,n){var h=t.createElement(i);return o&&(h.id=U+o),n&&(h.style.cssText=n),e(h)}function n(e){var t=b.length,i=(j+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?T.width():T.height())/100:1)*parseInt(e,10))}function l(e){return _.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(e)}function s(){var t,i=e.data(N,J);null==i?(_=e.extend({},$),console&&console.log&&console.log("Err or: cboxElement missing settings object")):_=e.extend({},i);for(t in _)e.isFunction(_[t])&&"on"!==t.slice(0,2)&&(_[t]=_[t].call(N));_.rel=_.rel||N.rel||e(N).data("rel")||"nofollow",_.href=_.href||e(N).a ttr("href"),_.title=_.title||N.title,"string"==typeof _.href&&(_.href=e.trim(_.href))}function r(i,o){e(t).trigger(i),e("*",p).trigger(i),o&&o.call(N)}function a(){var e,t,i,o=U+"Slideshow_",n="click."+U;_.slideshow&&b[1]?(t=function(){I.html(_.slideshowStop).unbind(n).bind(et,function(){(_.loop||b[j+1])&&(e=setTimeout(G.next,_.slideshowSpeed))}).bind(Z,function(){clearTimeout(e)}) .one(n+" "+tt,i),p.removeClass(o+"off").addClass(o+"on"),e=setTimeout(G.next,_.slideshowS peed)},i=function(){clearTimeout(e),I.html(_.slideshowStart).unbind([et,Z,tt,n].join(" ")).one(n,function(){G.next(),t()}),p.removeClass(o+"on").addClass(o+"off")},_.s lideshowAuto?t():i()):p.removeClass(o+"off "+o+"on")}function d(i){R||(N=i,s(),b=e(N),j=0,"nofollow"!==_.rel&&(b=e("."+V).filter(function(){va r t,i=e.data(this,J);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===_.rel}),j=b.index(N),-1===j&&(b=b.add(N),j=b.length-1)),O||(O=P=!0,p.css({visibility:"hidden",display:"block"}),C.css({width:0,heigh t:0}),K=g.height()+x.height()+w.outerHeight(!0)-w.height(),z=y.width()+v.width()+w.outerWidth(!0)-w.width(),D=C.outerHeight(!0),B=C.outerWidth(!0),_.returnFocus&&(e(N).blur(),e(t ).one(it,function(){e(N).focus()})),f.css({opacity:parseFloat(_.opacity),cursor: _.overlayClose?"pointer":"auto",visibility:"visible"}).show(),_.w=h(_.initialWid th,"x"),_.h=h(_.initialHeight,"y"),G.position(),ht&&T.bind("resize."+lt+" scroll."+lt,function(){f.css({width:T.width(),height:T.height(),top:T.scrollTop( ),left:T.scrollLeft()})}).trigger("resize."+lt),r(Y,_.onOpen),F.add(H).hide(),S. html(_.close).show()),G.load(!0))}function c(){!p&&t.body&&(X=!1,T=e(i),p=o(st).attr({id:J,"class":nt?U+(ht?"IE6":"IE"):""} ).hide(),f=o(st,"Overlay",ht?"position:absolute":"").hide(),W=o(st,"LoadingOverl ay").add(o(st,"LoadingGraphic")),m=o(st,"Wrapper"),w=o(st,"Content").append(C=o( st,"LoadedContent","width:0; height:0; overflow:hidden"),H=o(st,"Title"),E=o(st,"Current"),L=o(st,"Next"),M=o(st,"Previ ous"),I=o(st,"Slideshow").bind(Y,a),S=o(st,"Close")),m.append(o(st).append(o(st, "TopLeft"),g=o(st,"TopCenter"),o(st,"TopRight")),o(st,!1,"clear:left").append(y= o(st,"MiddleLeft"),w,v=o(st,"MiddleRight")),o(st,!1,"clear:left").append(o(st,"B ottomLeft"),x=o(st,"BottomCenter"),o(st,"BottomRight"))).find("div div").css({"float":"left"}),k=o(st,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),F=L.add(M).add(E).add(I),e(t.body).append(f,p.append(m,k)))}funct ion u(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),d(this))}re turn p?(X||(X=!0,L.click(function(){G.next()}),M.click(function(){G.prev()}),S.click( function(){G.close()}),f.click(function(){_.overlayClose&&G.close()}),e(t).bind( "keydown."+U,function(e){var t=e.keyCode;O&&_.escKey&&27===t&&(e.preventDefault(),G.close()),O&&_.arrowKey&&b[1]&&(37===t?(e.preventDefault(),M.click()):39===t&&(e.preventDefault(),L.click())) }),e.isFunction(e.fn.on)?e(t).on("click."+U,"."+V,i):e("."+V).live("click."+U,i) ),!0):!1}var f,p,m,w,g,y,v,x,b,T,C,k,W,H,E,I,L,M,S,F,_,K,z,D,B,N,j,A,O,P,R,q,G,Q,X,$={transit ion:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,he ight:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling :!0,inline:!1,html:!1,iframe:!1,fastIframe:!0,photo:!1,href:!1,title:!1,rel:!1,o pacity:.7,preloading:!0,className:!1,current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",open:!1,returnFocus:!0,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:! 0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,overlayClo se:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0},J="colorbox",U="cbox",V=U+"Element",Y=U+"_open",Z=U+"_load",et=U+"_complete", tt=U+"_cleanup",it=U+"_closed",ot=U+"_purge",nt=!e.support.leadingWhitespace,ht= nt&&!i.XMLHttpRequest,lt=U+"_IE6",st="div";e.colorbox||(e(c),G=e.fn[J]=e[J]=function(t,i){var o=this;if(t=t||{},c(),u()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,J,e.extend({},e.data(this,J) ||$,t))}).addClass(V),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&d(o[0])}return o},G.position=function(e,t){function i(e){g[0].style.width=x[0].style.width=w[0].style.width=parseInt(e.style.width,10)-z+"px",w[0].style.height=y[0].style.height=v[0].style.height=parseInt(e.style.height,10)-K+"px"}var o,n,l,s=0,r=0,a=p.offset();T.unbind("resize."+U),p.css({top:-9e4,left:-9e4}),n=T.scrollTop(),l=T.scrollLeft(),_.fixed&&!ht?(a.top-=n,a.left-=l,p.css({position:"fixed"})):(s=n,r=l,p.css({position:"absolute"})),r+=_.right! ==!1?Math.max(T.width()-_.w-B-z-h(_.right,"x"),0):_.left!==!1?h(_.left,"x"):Math.round(Math.max(T.width()-_.w-B-z,0)/2),s+=_.bottom!==!1?Math.max(T.height()-_.h-D-K-h(_.bottom,"y"),0):_.top!==!1?h(_.top,"y"):Math.round(Math.max(T.height()-_.h-D-K,0)/2),p.css({top:a.top,left:a.left,visibility:"visible"}),e=p.width()===_.w+B&&p.he ight()===_.h+D?0:e||0,m[0].style.width=m[0].style.height="9999px",o={width:_.w+B+z,height:_.h+D+K,top:s,left:r},0===e&&p.cs s(o),p.dequeue().animate(o,{duration:e,complete:function(){i(this),P=!1,m[0].style.width=_.w+B+z+"px",m[0].style.height=_.h+D+K+"px",_.reposition&&setTimeout(function(){T.bind("resize."+ U,G.position)},1),t&&t()},step:function(){i(this)}})},G.resize=function(e){O&&(e =e||{},e.width&&(_.w=h(e.width,"x")-B-z),e.innerWidth&&(_.w=h(e.innerWidth,"x")),C.css({width:_.w}),e.height&&(_.h=h(e .height,"y")-D-K),e.innerHeight&&(_.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(C.css({he ight:"auto"}),_.h=C.height()),C.css({height:_.h}),G.position("none"===_.transiti on?0:_.speed))},G.prep=function(i){function h(){return _.w=_.w||C.width(),_.w=_.mw&&_.mw<_.w?_.mw:_.w,_.w}function s(){return _.h=_.h||C.height(),_.h=_.mh&&_.mh<_.h?_.mh:_.h,_.h}if(O){var a,d="none"===_.transition?0:_.speed;C.empty().remove(),C=o(st,"LoadedContent").a ppend(i),C.hide().appendTo(k.show()).css({width:h(),overflow:_.scrolling?"auto": "hidden"}).css({height:s()}).prependTo(w),k.hide(),e(A).css({"float":"none"}),a= function(){function i(){nt&&p[0].style.removeAttribute("filter")}var h,s,a=b.length,c="frameBorder",u="allowTransparency";O&&(s=function(){clearTimeo ut(q),W.remove(),r(et,_.onComplete)},nt&&A&&C.fadeIn(100),H.html(_.title).add(C) .show(),a>1?("string"==typeof _.current&&E.html(_.current.replace("{current}",j+1).replace("{total}",a)).show( ),L[_.loop||a-1>j?"show":"hide"]().html(_.next),M[_.loop||j?"show":"hide"]().html(_.previous),_.slideshow&&I.show(),_.preloading&&e.each([n(-1),n(1)],function(){var t,i,o=b[this],n=e.data(o,J);n&&n.href?(t=n.href,e.isFunction(t)&&(t=t.call(o))):t=o.href,l(t) &&(i=new Image,i.src=t)})):F.hide(),_.iframe?(h=o("iframe")[0],c in h&&(h[c]=0),u in h&&(h[u]="true"),_.scrolling||(h.scrolling="no"),e(h).attr({src:_.href,name:(new Date).getTime(),"class":U+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,m ozallowfullscreen:!0}).one("load",s).appendTo(C),e(t).one(ot,function(){h.src="//about:blank"}),_.fastIframe&&e(h).trigger("load")):s(),"fade"===_.transition?p.f adeTo(d,1,i):i())},"fade"===_.transition?p.fadeTo(d,0,function(){G.position(0,a) }):G.position(d,a)}},G.load=function(i){var n,a,d,c=G.prep;P=!0,A=!1,N=b[j],i||s(),Q&&p.add(f).removeClass(Q),_.className&&p.add(f).addClass(_.className),Q =_.className,r(ot),r(Z,_.onLoad),_.h=_.height?h(_.height,"y")-D-K:_.innerHeight&&h(_.innerHeight,"y"),_.w=_.width?h(_.width,"x")-B-z:_.innerWidth&&h(_.innerWidth,"x"),_.mw=_.w,_.mh=_.h,_.maxWidth&&(_.mw=h(_.maxW idth,"x")-B-z,_.mw=_.w&&_.w<_.mw?_.w:_.mw),_.maxHeight&&(_.mh=h(_.maxHeight,"y")-D-K,_.mh=_.h&&_.h<_.mh?_.h:_.mh),n=_.href,q=setTimeout(function(){W.appendTo(w)},1 00),_.inline?(d=o(st).hide().insertBefore(e(n)[0]),e(t).one(ot,function(){d.replaceWith(C.children())}),c(e(n))):_.iframe?c(" "):_.html?c(_.html):l(n)?(e(A=new Image).addClass(U+"Photo").bind("error",function(){_.title=!1,c(o(st,"Error").ht ml(_.imgError))}).one("load",function(){var e;_.scalePhotos&&(a=function(){A.height-=A.height*e,A.width-=A.width*e},_.mw&&A.width>_.mw&&(e=(A.width-_.mw)/A.width,a()),_.mh&&A.height>_.mh&&(e=(A.height-_.mh)/A.height,a())),_.h&&(A.style.marginTop=Math.max(_.h-A.height,0)/2+"px"),b[1]&&(_.loop||b[j+1])&&(A.style.cursor="pointer",A.onclick=function(){G.next()}),nt&&(A.style.msInte rpolationMode="bicubic"),setTimeout(function(){c(A)},1)}),setTimeout(function(){ A.src=n},1)):n&&k.load(n,_.data,function(t,i){c("error"===i?o(st,"Error").html(_ .xhrError):e(this).contents())})},G.next=function(){!P&&b[1]&&(_.loop||b[j+1])&&(j=n(1),G.load())},G.prev=function(){!P&&b[1]&&(_.loop||j)&&(j=n(-1),G.load())},G.close=function(){O&&!R&&(R=!0,O=!1,r(tt,_.onCleanup),T.unbind(". "+U+" ."+lt),f.fadeTo(200,0),p.stop().fadeTo(300,0,function(){p.add(f).css({opacity:1, cursor:"auto"}).hide(),r(ot),C.empty().remove(),setTimeout(function(){R=!1,r(it, _.onClosed)},1)}))},G.remove=function(){e([]).add(p).add(f).remove(),p=null,e("."+V).removeData(J).removeClass(V),e(t).unbin d("click."+U)},G.element=function(){return e(N)},G.settings=$)})(jQuery,document,window);

(well thats weird that there ended up being smiley faces in the code, is there a way to post code so that doesn't happen?) Here is a pic of what firebug is telling me about this height property, which is not defined in the colorbox css as far as I can tell:

http://i59.tinypic.com/6gls3d.jpg

Here is the colorbox stylesheet:

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#222222 url(../images/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px 0; display: none !important;}
#cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px 0; display: none !important;}
#cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px -29px; display: none !important;}
#cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px -29px; display: none !important;}
#cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y; display: none !important;}
#cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y; display: none !important;}
#cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x; display: none !important;}
#cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x; display: none !important;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:10px; left:90px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:10px; right:50px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:10px; left:15px; background: #888888 url('../images/sprite.png') no-repeat -10px -60px; width:28px; height:28px; text-indent:-9999px;}
#cboxNext{position:absolute; bottom:10px; left:45px; background: #888888 url('../images/sprite.png') no-repeat -60px -110px; width:28px; height:28px; text-indent:-9999px;}
#cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:10px; right:15px; background:url(../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxContent {background: #f1f1f1;overflow: hidden;border: 1px solid d6d6d6; padding: 15px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=# 00FFFFFF);
}

/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(../images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(../images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(../images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(../images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(../images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(../images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(../images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(../images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

Quote:

---

Originally Posted by toomanyknots

I'm not sure the colorbox is the same popular colorbox module for zencart in the downloads, or else I would of posted this in the colorbox support thread. The colorbox came with a template I purchased called genesis, and the documentation in the javascript files states:

jQuery ColorBox v1.3.30
(c) 2013 Jack Moore - jacklmoore.com/colorbox
updated: 2013-01-25

---

Zen Colorbox plugin makes use of jQuery ColorBox by Jack Moore and code added to work with Zen Cart without modifying colorbox code.