Zen Colorbox

jeking:

Finally had time to get back to this. I missed the included \includes\modules\YOUR_TEMPLATE\additional_images.php Image Handler is also installed and I had that version of this file.
That certainly would explain the issue.. :laugh: Glad you are all set now.. :smile:

DivaVocals:

That certainly would explain the issue.. :laugh: Glad you are all set now.. :smile:

I do like simple fixes...and glad it put a :smile: on your face.

( 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,.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()).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").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,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.heighte,A.width-=A.widthe},.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:

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=#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 = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

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 genesisand 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..

toomanyknots:

(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?)
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..

DivaVocals:

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..

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

toomanyknots:

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

and you can avoid having to work this way (which BTW is a BAD idea) by simply setting up a proper dev site which is a clone of your live site so you can test changes without impacting the live shop..

Unless we can see what you have, the community can't help you.. We need to see if you have this module installed before anyone from this support thread can help.. Plus I strongly suspect that this is some colorbox thing the template author spun up, in which case it's still a question for the template author.. Any discussion on the author's own colorbox implementation in this support thread is off topic unless he's using this module..

Is there a way that colorbox can be used to create a gallery page on an ezpage? I am setting up a store using the winchester black template which has colorbox already installed. The client wants a gallery and I thought this may be a good way to go if its possible.

I've been looking at this issue due to another post that got me thinking... Colorbox (the script) is not very good at sizing an image up to match the box, so using external settings like scalePhotos:true, then setting innerHeight innerWidth or height width only affects the box the image is in. If the image is larger then the box, scalePhotos:true rescales the image down, but not proportionality, no scaling up at all, the code is not there to perform that task. Same as passing LARGE_IMAGE_HEIGHT/LARGE_IMAGE_WIDTH does nothing at all in colorbox. There is no external way to pass photo size to colorbox without rewriting colorbox script itself.

Option 1, request a new feature enhancement to colorbox or fork it and do it ourself!
Option 2, rewrite the function in zen_colorbox.php to resize the image and pass the size to the script by adding two lines of code.
Option 3, upload the correct size image...

I don't like what scalePhotos:true does to the image box, it's not responsive at all and it's possible to have a very large image trying to display on a very small screen!

Sending the photo size to colorbox code keeps it responsive and allows the code to resize the image to the screen... so option 2 is on my todo list!

The problem I had in testing without changing code... setting sizes in photo.height and photo.width without creating it proportionality caused distortions.

davewest:

I've been looking at this issue due to another post that got me thinking... Colorbox (the script) is not very good at sizing an image up to match the box, so using external settings like scalePhotos:true, then setting innerHeight innerWidth or height width only affects the box the image is in. If the image is larger then the box, scalePhotos:true rescales the image down, but not proportionality, no scaling up at all, the code is not there to perform that task. Same as passing LARGE_IMAGE_HEIGHT/LARGE_IMAGE_WIDTH does nothing at all in colorbox. There is no external way to pass photo size to colorbox without rewriting colorbox script itself.

Option 1, request a new feature enhancement to colorbox or fork it and do it ourself!
Option 2, rewrite the function in zen_colorbox.php to resize the image and pass the size to the script by adding two lines of code.
Option 3, upload the correct size image...

I don't like what scalePhotos:true does to the image box, it's not responsive at all and it's possible to have a very large image trying to display on a very small screen!

Sending the photo size to colorbox code keeps it responsive and allows the code to resize the image to the screen... so option 2 is on my todo list!

The problem I had in testing without changing code... setting sizes in photo.height and photo.width without creating it proportionality caused distortions.

Re: Option 1, request a new feature enhancement to colorbox or fork it and do it ourself!
I assume you mean forking the Colobox library?? Is the author of it adverse to accepting PRs?? Because if he isn't you could submit a PT and see if he accepts it into the codebase

Re: Option 2, rewrite the function in zen_colorbox.php
I know Daniel has been absent, but I do know he checks in to the Zen Colorbox repo.. The only issue at this point is that his master repo is out of step with the version available in the downloads because he's got the (yet unfinished) code to try and add the lightbox effect to all of the Zen Cart popups.. My fork of his repo matches what's in the downloads.. If you wanna fork my fork, and make the change, I'll re-submit the module (unless you wanna :smile:)

Hello.

By the advise of people on this forum I deleted the ZenLightbox and installed Zen ColorBox plugin. I'm using the Additional Product Images add-on as well, since it's easier for my client to use it instead of re-loading product's edit panel, nevermind :)

I'm stuck with an issue I can't seem to solve myself:

The main image shows up as it should with colorbox, but I can only see the close button, there are NO <prev next> buttons to go from picture one to picture two. If I click on any of the additional images below, they just open normally, without the colorbox effect and not in the "gallery mode" as the settings of the colorbox plugin say. Please see the example here.

So, is this plugin for additional images even compatible with ColorBox? If so, how can I make it work? :)

ZenCart: v. 1.5.4

Would recommend verifying installation of this plugin and if the other modifies the same file(s) would suggest verifying that the merge of the two is correct.

Has anyone been able to get this mod to work on Zen Cart version 1.5.5?
I have Image handler installed, am using the colorbox file for additional images... but it is not showing the closing X at the bottom right of the image. I know it is there... so I can click in that area to close the image, but no one else is going to know to do that!
I also have CSS JS loader installed. I have tried about everything I can think of to get it to work and, while it WILL do the colorbox function, I just cannot figure out how to get the controls to show up.
Image Handler is also not working the way it should... but I am not worried about that at the moment, just want the Colorbox to work! :cool:
Any help from you experts out there would be greatly appreciated!

stellarweb:

Has anyone been able to get this mod to work on Zen Cart version 1.5.5?...
I have installed zen colorbox as part of Responsive Sheffield Blue template on zc 1.5.5 along with Image Handler 4.3.2
I encountered similar problem - main image would come up but no additional image next/previous. If I clicked on additional image within the product listing that image would come up as a small pop-up.

I noticed the includes/modules/additional image core files were different. I copied the file from my zc 1.5.4 site (also merged with IH 1.5.4 and a different responsive template that also uses colorbox). That worked.

I presume that there was some issue between new additional images file and either IH4 or ZenColorbox. I'm not an expert by any stretch. However, this hack is working for me and I haven't noted any problems. (touch wood).

soxophoneplayer:

I have installed zen colorbox as part of Responsive Sheffield Blue template on zc 1.5.5 along with Image Handler 4.3.2
I encountered similar problem - main image would come up but no additional image next/previous. If I clicked on additional image within the product listing that image would come up as a small pop-up.

I noticed the includes/modules/additional image core files were different. I copied the file from my zc 1.5.4 site (also merged with IH 1.5.4 and a different responsive template that also uses colorbox). That worked.

I'm not having any problems with colorbox and ZC1.5.5 I'm also starting with RSB 2 but not using Image Handler. Doing a three way compare the only difference I see is a call to a observer in the default that's not in the other two, which shouldn't create the problem your having.

I have Image handler installed, am using the colorbox file for additional images... but it is not showing the closing X at the bottom right of the image. I know it is there... so I can click in that area to close the image, but no one else is going to know to do that!

Check that your stylesheet_zen_colorbox.css has the correct path and that the image folder has all the images for the box... When I first installed, it was the default box layout which worked.. but I use a different designed layout and it's working too.

How to make the popup image larger. I installed this by uninstalling the zen lightbox plugin, it works as it should but when I click on the main image on the product page it brings up the lightbox but you can see it starts at the 400 px set in admin but instead of growing to at least 1000 (set to 1200 in admin/images settings for IH) it does not. The size of the popup is actually smaller than the main image.

this is just a sample of the way it behaves: https://fantasiesrealm.com/market/Designers/Anima-Gemini/AG-Collection-Ete-Exclusive

On the pc-windows 8.1-FireFox and Chrome the images are smaller than the main image, on the macintosh the images are only a bit larger than the main image.

They act like there is a setting to have them fit to window. I would like to have the popup be at least 1000x1000 so that the customers can see the details on some of the products better.

How can I change the size of the popup image?

DarkAngel:

How to make the popup image larger. I installed this by uninstalling the zen lightbox plugin, it works as it should but when I click on the main image on the product page it brings up the lightbox but you can see it starts at the 400 px set in admin but instead of growing to at least 1000 (set to 1200 in admin/images settings for IH) it does not. The size of the popup is actually smaller than the main image.

this is just a sample of the way it behaves: https://fantasiesrealm.com/market/Designers/Anima-Gemini/AG-Collection-Ete-Exclusive

On the pc-windows 8.1-FireFox and Chrome the images are smaller than the main image, on the macintosh the images are only a bit larger than the main image.

They act like there is a setting to have them fit to window. I would like to have the popup be at least 1000x1000 so that the customers can see the details on some of the products better.

How can I change the size of the popup image?

for me, your example is displaying as expected. The popup is 95% of available screen. Colorbox doesn't manage the size of the image up so it can not size the image to make use of 95% of your available screen. it does down size to make the 95% of your screen. You can force it to expand beyond 95%, but then all the controls are now outside the viewing area and no way to kill it without hitting escape... I'm looking at adding zoom to the popup to fix this on extremely large images on small screens.

Thank you for the reply. I guess it is alright and a zoom would be great. We sell 3d art items and some are skin textures so it is nice to have them large so they can see details...LOL

DarkAngel:

Thank you for the reply. I guess it is alright and a zoom would be great. We sell 3d art items and some are skin textures so it is nice to have them large so they can see details...LOL

WheelZoom makes use of the existing displayed image and zooms in using css and is easy to add into colorbox.. I added it to my site and it works. When colorbox displays the image, hovering over the image, spin the mouse wheel to zoom in/out grab the zoomed in image to move it around. Sample installation, download wheelzoom from Jack Moore wed site and place the script file in your template jscript folder.

modify includes/classes/zen_colorbox/jquery_colorbox.php add

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/wheelzoom.js"></script>"></script>';

modify includes/classes/zen_colorbox/autoload_default.php add edits in red

$("a[rel^='colorbox']").colorbox({[B]onComplete:function(){ wheelzoom(document.querySelectorAll('.cboxPhoto')); }, [/B]<?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_colorbox/options.php'); ?>});;

That's all you need to do for wheelzoom to work in colorbox!
If you use img as instructions, when colorbox close so will all images on your site.. Use cboxPhoto instead of img tag.. When I figure out why git cola stopped posting, I'll add it to my github page..

davewest:

WheelZoom makes use of the existing displayed image and zooms in using css and is easy to add into colorbox.. I added it to my site and it works. When colorbox displays the image, hovering over the image, spin the mouse wheel to zoom in/out grab the zoomed in image to move it around. Sample installation, download wheelzoom from Jack Moore wed site and place the script file in your template jscript folder.

modify includes/classes/zen_colorbox/jquery_colorbox.php add

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/wheelzoom.js"></script>"></script>';

> 
> modify includes/classes/zen_colorbox/autoload_default.php  add edits in red
> ```
$("a[rel^='colorbox']").colorbox({[B]onComplete:function(){ wheelzoom(document.querySelectorAll('.cboxPhoto')); }, [/B]<?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_colorbox/options.php'); ?>});;

That's all you need to do for wheelzoom to work in colorbox!
If you use img as instructions, when colorbox close so will all images on your site.. Use cboxPhoto instead of img tag.. When I figure out why git cola stopped posting, I'll add it to my github page..

Thank you and I might just give this a try.