My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
( Hello. This is a repost of a thread I posted in the general section first, but it might be more appropriate in this thread)
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:
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, . 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,_.slides howS 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()).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({opacityarseFloat(_.opacity),cursor:_. overlayClose?"pointer":"auto",visibility:"visible" }).show(),_.w=h(_.initialWidth,"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").appen d(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,namenew 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.msIn te 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:
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{cursorointer;}
.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: progidXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00 FFFFFF );
}
/*
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 = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
and neither are we since we can't see your site.. posting a link might help, but I suspect you need to go back to the place you got your template from for help..
Yes, use the code tag to wrap your code.. (it's the # sign on the toolbar)
Otherwise, I have NO CLUE what the issue is with your template's built in colorbox plugin.. Suggest asking your template author to help you sort it out. This support thread is for assistance with the Zen Colorbox module in the downloads section, not other implementations of the colorbox jQuery library.. You can also try just installing the Zen Colorbox module in the downloads here, but if it were me, I would want to make sure that the module the template maker installed is removed in full first so that there isn't a chance of any conflict..
Last edited by DivaVocals; 6 Apr 2015 at 03:03 PM.
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
Thank you for such a quick reply! And thank you for letting me know about the code wrap, I never knew that, thank you! The reason I haven't posted a link is because my website is live and typically has potential customers viewing it most of the time. The template with the colorbox issue is not one I am using currently on my website. I plan to switch to it when all the kinks are worked out, but until then I usually only work on it later at night or when there isn't that much traffic, to avoid freaking people out, since there are other issues with it as well. But I could switch templates if you would like to take a look at it. I have made an attempt to contact the author of this template, but last time it took about a week for a reply, so I am not sure when I will hear from them.
Daniel