Results 1 to 3 of 3
  1. #1
    Join Date
    Jun 2014
    Location
    hamilton, ohio
    Posts
    100
    Plugin Contributions
    0

    Default 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:



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

  2. #2
    Join Date
    Jun 2014
    Location
    hamilton, ohio
    Posts
    100
    Plugin Contributions
    0

    Default Re: Trying to fix inline code with colorbox...

    (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')");
    }

  3. #3
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,071
    Plugin Contributions
    14

    Default Re: Trying to fix inline code with colorbox...

    Quote Originally Posted by toomanyknots View Post
    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.
    Dave
    Always forward thinking... Lost my mind!

 

 

Similar Threads

  1. v139h Error with Bitpay payment module... trying to fix myself
    By lolwaut in forum Addon Payment Modules
    Replies: 6
    Last Post: 29 May 2014, 09:23 PM
  2. v139h Always Problems with the way I'm styling my custom inline Code!
    By traytray in forum Templates, Stylesheets, Page Layout
    Replies: 31
    Last Post: 18 Jun 2013, 07:16 PM
  3. Replies: 3
    Last Post: 8 Jul 2008, 02:18 AM
  4. New security update - trying to fix
    By BryanKollar in forum Basic Configuration
    Replies: 14
    Last Post: 21 Aug 2006, 05:55 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR