В fancybox открывается только часть фотографий

[Violent]

Здравствуйте, такая проблема, никак не могу решить, фотография "на странице товара" при включенном режиме "JqZoom" в боксе "fancybox" показывается, но не полностью (примеры на фотографиях), загрузил уменьшенную копию фото, результат то же, только, что теперь показывается большая часть фото. А при режиме "Thickbox" еще хуже, при наведении на фотографию открывается её полный размер и выходит на границы сайта (подробно на фотографиях).

Подскажите, что я могу сделать (чтобы оставить оригинальный размер фотографии и её качество), возможно будет лучше установить какой-то модуль, пробовал покопаться в файле "fancybox jquery", толку мало, он я так понял фото не генерирует..

Вообщем любому "толковому" совету буду рад, спасибо!!

[Kerm]

Сравнить файлы шаблона с оригинальным и максимально код сделать похожим на тот что в оригинальном.

[Violent]

Сравнить файлы шаблона с оригинальным и максимально код сделать похожим на тот что в оригинальном.

А в каких файлах копаться нужно, подсказать можете? возможно даже знаете какую строчку нужно заменить?

[Violent]

Что никто не знает как решить проблему?

[Caracal]

Тоже сейчас мучаюсь... Пришел к выводу что надо снести этот фансибокс и поставить что-то другое...

 

Кстати, в чем отличие thickbox от fancybox и почему в админке пишется thickbox, по факту подгружается fancybox, а в product.tpl вызывается thickbox...

Edited November 29, 2012 by Caracal (see edit history)

[Caracal]

В общем colorbox'м легко заменить. Не стал возиться.

Если кому надо...

Качаем colorbox: http://www.jacklmoor...ox/colorbox.zip

 

Открываем файл colorbox/colorbox/jquery.colorbox-min.js

 

Выбираем понравившийся эффект. Демо можно глянуть:

http://www.jacklmoore.com/colorbox/example1/

http://www.jacklmoore.com/colorbox/example2/

http://www.jacklmoore.com/colorbox/example3/

http://www.jacklmoore.com/colorbox/example4/

http://www.jacklmoore.com/colorbox/example5/

 

 

...я выбрал exanple3.

Открываем соответственно colorbox/example3/index.html

 

берём этот код:

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });

Меняем вызов на thickbox:

 

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".thickbox").colorbox({rel:'thickbox'});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });

вставляем над всем содержимым открытого ранее colorbox/colorbox/jquery.colorbox-min.js

 

Получаем:

 

 

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".thickbox").colorbox({rel:'thickbox'});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });
// ColorBox v1.3.20.1 - jQuery lightbox plugin
// (c) 2012 Jack Moore - jacklmoore.com
// License: http://www.opensource.org/licenses/mit-license.php
(function(e,t,n){function G(n,r,i){var o=t.createElement(n);return r&&(o.id=s+r),i&&(o.style.cssText=i),e(o)}function Y(e){var t=T.length,n=(U+e)%t;return n<0?t+n:n}function Z(e,t){return Math.round((/%/.test(e)?(t==="x"?tt():nt())/100:1)*parseInt(e,10))}function et(e){return B.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(e)}function tt(){return n.innerWidth||N.width()}function nt(){return n.innerHeight||N.height()}function rt(){var t,n=e.data(R,i);n==null?(B=e.extend({},r),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},n);for(t in B)e.isFunction(B[t])&&t.slice(0,2)!=="on"&&(B[t]=B[t].call(R));B.rel=B.rel||R.rel||"nofollow",B.href=B.href||e(R).attr("href"),B.title=B.title||R.title,typeof B.href=="string"&&(B.href=e.trim(B.href))}function it(t,n){e.event.trigger(t),n&&n.call(R)}function st(){var e,t=s+"Slideshow_",n="click."+s,r,i,o;B.slideshow&&T[1]?(r=function(){M.text(B.slideshowStop).unbind(n).bind(f,function(){if(B.loop||T[u+1])e=setTimeout(J.next,B.slideshowSpeed)}).bind(a,function(){clearTimeout(e)}).one(n+" "+l,i),g.removeClass(t+"off").addClass(t+"on"),e=setTimeout(J.next,B.slideshowSpeed)},i=function(){clearTimeout(e),M.text(B.slideshowStart).unbind([f,a,l,n].join(" ")).one(n,function(){J.next(),r()}),g.removeClass(t+"on").addClass(t+"off")},B.slideshowAuto?r():i()):g.removeClass(t+"off "+t+"on")}function ot(t){V||(R=t,rt(),T=e(R),U=0,B.rel!=="nofollow"&&(T=e("."+o).filter(function(){var t=e.data(this,i),n;return t&&(n=t.rel||this.rel),n===B.rel}),U=T.index(R),U===-1&&(T=T.add(R),U=T.length-1)),W||(W=X=!0,g.show(),B.returnFocus&&e(R).blur().one(c,function(){e(this).focus()}),m.css({opacity:+B.opacity,cursor:B.overlayClose?"pointer":"auto"}).show(),B.w=Z(B.initialWidth,"x"),B.h=Z(B.initialHeight,"y"),J.position(),d&&N.bind("resize."+v+" scroll."+v,function(){m.css({width:tt(),height:nt(),top:N.scrollTop(),left:N.scrollLeft()})}).trigger("resize."+v),it(u,B.onOpen),H.add(A).hide(),P.html(B.close).show()),J.load(!0))}function ut(){!g&&t.body&&(Q=!1,N=e(n),g=G(K).attr({id:i,"class"?s+(d?"IE6":"IE"):""}).hide(),m=G(K,"Overlay",d?"position:absolute":"").hide(),L=G(K,"LoadingOverlay").add(G(K,"LoadingGraphic")),y=G(K,"Wrapper"),b=G(K,"Content").append(C=G(K,"LoadedContent","width:0; height:0; overflow:hidden"),A=G(K,"Title"),O=G(K,"Current"),_=G(K,"Next"),D=G(K,"Previous"),M=G(K,"Slideshow").bind(u,st),P=G(K,"Close")),y.append(G(K).append(G(K,"TopLeft"),w=G(K,"TopCenter"),G(K,"TopRight")),G(K,!1,"clear:left").append(E=G(K,"MiddleLeft"),b,S=G(K,"MiddleRight")),G(K,!1,"clear:left").append(G(K,"BottomLeft"),x=G(K,"BottomCenter"),G(K,"BottomRight"))).find("div div").css({"float":"left"}),k=G(K,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),H=_.add(D).add(O).add(M),e(t.body).append(m,g.append(y,k)))}function at(){return g?(Q||(Q=!0,j=w.height()+x.height()+b.outerHeight(!0)-b.height(),F=E.width()+S.width()+b.outerWidth(!0)-b.width(),I=C.outerHeight(!0),q=C.outerWidth(!0),g.css({"padding-bottom":j,"padding-right":F}),_.click(function(){J.next()}),D.click(function(){J.prev()}),P.click(function(){J.close()}),m.click(function(){B.overlayClose&&J.close()}),e(t).bind("keydown."+s,function(e){var t=e.keyCode;W&&B.escKey&&t===27&&(e.preventDefault(),J.close()),W&&B.arrowKey&&T[1]&&(t===37?(e.preventDefault(),D.click()):t===39&&(e.preventDefault(),_.click()))}),e("."+o,t).live("click",function(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),ot(this))})),!0):!1}var r={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!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,opacity:.9,preloading:!0,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,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:undefined},i="colorbox",s="cbox",o=s+"Element",u=s+"_open",a=s+"_load",f=s+"_complete",l=s+"_cleanup",c=s+"_closed",h=s+"_purge",p=!e.support.opacity&&!e.support.style,d=p&&!n.XMLHttpRequest,v=s+"_IE6",m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D,P,H,B,j,F,I,q,R,U,z,W,X,V,$,J,K="div",Q;if(e.colorbox)return;e(ut),J=e.fn[i]=e[i]=function(t,n){var s=this;t=t||{},ut();if(at()){if(!s[0]){if(s.selector)return s;s=e("<a/>"),t.open=!0}n&&(t.onComplete=n),s.each(function(){e.data(this,i,e.extend({},e.data(this,i)||r,t))}).addClass(o),(e.isFunction(t.open)&&t.open.call(s)||t.open)&&ot(s[0])}return s},J.position=function(e,t){function f(e){w[0].style.width=x[0].style.width=b[0].style.width=e.style.width,b[0].style.height=E[0].style.height=S[0].style.height=e.style.height}var n,r=0,i=0,o=g.offset(),u,a;N.unbind("resize."+s),g.css({top:-9e4,left:-9e4}),u=N.scrollTop(),a=N.scrollLeft(),B.fixed&&!d?(o.top-=u,o.left-=a,g.css({position:"fixed"})):(r=u,i=a,g.css({position:"absolute"})),B.right!==!1?i+=Math.max(tt()-B.w-q-F-Z(B.right,"x"),0):B.left!==!1?i+=Z(B.left,"x"):i+=Math.round(Math.max(tt()-B.w-q-F,0)/2),B.bottom!==!1?r+=Math.max(nt()-B.h-I-j-Z(B.bottom,"y"),0):B.top!==!1?r+=Z(B.top,"y"):r+=Math.round(Math.max(nt()-B.h-I-j,0)/2),g.css({top:o.top,left:o.left}),e=g.width()===B.w+q&&g.height()===B.h+I?0:e||0,y[0].style.width=y[0].style.height="9999px",n={width:B.w+q,height:B.h+I,top:r,left:i},e===0&&g.css(n),g.dequeue().animate(n,{duration:e,complete:function(){f(this),X=!1,y[0].style.width=B.w+q+F+"px",y[0].style.height=B.h+I+j+"px",B.reposition&&setTimeout(function(){N.bind("resize."+s,J.position)},1),t&&t()},step:function(){f(this)[spam-filter])},J.resize=function(e){W&&(e=e||{},e.width&&(B.w=Z(e.width,"x")-q-F),e.innerWidth&&(B.w=Z(e.innerWidth,"x")),C.css({width:B.w}),e.height&&(B.h=Z(e.height,"y")-I-j),e.innerHeight&&(B.h=Z(e.innerHeight,"y")),!e.innerHeight&&!e.height&&(C.css({height:"auto"}),B.h=C.height()),C.css({height:B.h}),J.position(B.transition==="none"?0:B.speed))},J.prep=function(t){function o(){return B.w=B.w||C.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function u(){return B.h=B.h||C.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(!W)return;var n,r=B.transition==="none"?0:B.speed;C.remove(),C=G(K,"LoadedContent").append(t),C.hide().appendTo(k.show()).css({width:o(),overflow:B.scrolling?"auto":"hidden"}).css({height:u()}).prependTo(,k.hide(),e(z).css({"float":"none"}),d&&e("select").not(g.find("select")).filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one(l,function(){this.style.visibility="inherit"}),n=function(){function y(){p&&g[0].style.removeAttribute("filter")}var t,n,o=T.length,u,a="frameBorder",l="allowTransparency",c,d,v,m;if(!W)return;c=function(){clearTimeout($),L.detach().hide(),it(f,B.onComplete)},p&&z&&C.fadeIn(100),A.html(B.title).add(C).show();if(o>1){typeof B.current=="string"&&O.html(B.current.replace("{current}",U+1).replace("{total}",o)).show(),_[b.loop||U<o-1?"show":"hide"]().html(B.next),D[b.loop||U?"show":"hide"]().html(B.previous),B.slideshow&&M.show();if(B.preloading){t=[Y(-1),Y(1)];while(n=T[t.pop()])m=e.data(n,i),m&&m.href?(d=m.href,e.isFunction(d)&&(d=d.call(n)))=n.href,et(d)&&(v=new Image,v.src=d)[spam-filter]else H.hide();B.iframe?(u=G("iframe")[0],a in u&&(u[a]=0),l in u&&(u[l]="true"),u.name=s+ +(new Date),B.fastIframe?c():e(u).one("load",c),u.src=B.href,B.scrolling||(u.scrolling="no"),e(u).addClass(s+"Iframe").appendTo(C).one(h,function(){u.src="//about:blank"})):c(),B.transition==="fade"?g.fadeTo(r,1,y):y()},B.transition==="fade"?g.fadeTo(r,0,function(){J.position(0,n)}):J.position(r,n)},J.load=function(t){var n,r,i=J.prep;X=!0,z=!1,R=T[u],t||rt(),it(h),it(a,B.onLoad),B.h=B.height?Z(B.height,"y")-I-j:B.innerHeight&&Z(B.innerHeight,"y"),B.w=B.width?Z(B.width,"x")-q-F:B.innerWidth&&Z(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=Z(B.maxWidth,"x")-q-F,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=Z(B.maxHeight,"y")-I-j,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,$=setTimeout(function(){L.show().appendTo(},100),B.inline?(G(K).hide().insertBefore(e(n)[0]).one(h,function(){e(this).replaceWith(C.children())}),i(e(n))):B.iframe?i(" "):B.html?i(B.html):et(n)?(e(z=new Image).addClass(s+"Photo").error(function(){B.title=!1,i(G(K,"Error").html(B.imgError))}).load(function(){var e;z.onload=null,B.scalePhotos&&(r=function(){z.height-=z.height*e,z.width-=z.width*e},B.mw&&z.width>B.mw&&(e=(z.width-B.mw)/z.width,r()),B.mh&&z.height>B.mh&&(e=(z.height-B.mh)/z.height,r())),B.h&&(z.style.marginTop=Math.max(B.h-z.height,0)/2+"px"),T[1]&&(B.loop||T[u+1])&&(z.style.cursor="pointer",z.onclick=function(){J.next()}),p&&(z.style.msInterpolationMode="bicubic"),setTimeout(function(){i(z)},1)}),setTimeout(function(){z.src=n},1)):n&&k.load(n,B.data,function(t,n,r){i(n==="error"?G(K,"Error").html(B.xhrError):e(this).contents())})},J.next=function(){!X&&T[1]&&(B.loop||T[u+1])&&(U=Y(1),J.load())},J.prev=function(){!X&&T[1]&&(B.loop||U)&&(U=Y(-1),J.load())},J.close=function(){W&&!V&&(V=!0,W=!1,it(l,B.onCleanup),N.unbind("."+s+" ."+v),m.fadeTo(200,0),g.stop().fadeTo(300,0,function(){g.add(m).css({opacity:1,cursor:"auto"}).hide(),it(h),C.remove(),setTimeout(function(){V=!1,it(c,B.onClosed)},1)}))},J.remove=function(){e([]).add(g).add(m).remove(),g=null,e("."+o).removeData(i).removeClass(o).die()},J.element=function(){return e(R)},J.settings=r})(jQuery,document,this);

Открываем

my_site/js/jquery/plugins/fancybox/jquery.fancybox.js и меняем всё содержимое на полученный выше код

 

Открываем my_site/js/jquery/plugins/fancybox/jquery.fancybox.css так же очищаем его и вставляем всё из из /colorbox/example3/colorbox.css

 

картинки из /colorbox/example3/images/ копируем и вставляем в my_site/js/jquery/plugins/fancybox/images

 

всё.

 

про параметры и всё остальное можно прочитать здесь

Edited November 29, 2012 by Caracal (see edit history)

[Dimitri Yelquin]

Я тоже выбрал третий вариант колорбокса, но только его внешнее оформление (оно у меня в светлом варианте, то есть, стрелочки и закрывающая кнопка — светло-серые). Однако у меня остался фенсибокс, как был. Я только подсадил чужие кнопки и переписал под них стили. Как это сделать, я в моей теме (4-й раздел форума) об этом рассказываю.

 

А вообще решение хорошее. Единственно, что не нравится, — это дизайн всех приведённых примеров. Не намного лучше дефолтного дизайна фенсибокса.

[Violent]

В общем colorbox'м легко заменить. Не стал возиться.

Если кому надо...

Качаем colorbox: http://www.jacklmoor...ox/colorbox.zip

 

Открываем файл colorbox/colorbox/jquery.colorbox-min.js

 

Выбираем понравившийся эффект. Демо можно глянуть:

http://www.jacklmoor...orbox/example1/

http://www.jacklmoor...orbox/example2/

http://www.jacklmoor...orbox/example3/

http://www.jacklmoor...orbox/example4/

http://www.jacklmoor...orbox/example5/

 

 

...я выбрал exanple3.

Открываем соответственно colorbox/example3/index.html

 

берём этот код:

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });

Меняем вызов на thickbox:

 

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".thickbox").colorbox({rel:'thickbox'});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });

вставляем над всем содержимым открытого ранее colorbox/colorbox/jquery.colorbox-min.js

 

Получаем:

 

 

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".thickbox").colorbox({rel:'thickbox'});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
 return false;
});
  });
// ColorBox v1.3.20.1 - jQuery lightbox plugin
// (c) 2012 Jack Moore - jacklmoore.com
// License: http://www.opensource.org/licenses/mit-license.php
(function(e,t,n){function G(n,r,i){var o=t.createElement(n);return r&&(o.id=s+r),i&&(o.style.cssText=i),e(o)}function Y(e){var t=T.length,n=(U+e)%t;return n<0?t+n:n}function Z(e,t){return Math.round((/%/.test(e)?(t==="x"?tt():nt())/100:1)*parseInt(e,10))}function et(e){return B.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(e)}function tt(){return n.innerWidth||N.width()}function nt(){return n.innerHeight||N.height()}function rt(){var t,n=e.data(R,i);n==null?(B=e.extend({},r),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},n);for(t in B)e.isFunction(B[t])&&t.slice(0,2)!=="on"&&(B[t]=B[t].call(R));B.rel=B.rel||R.rel||"nofollow",B.href=B.href||e(R).attr("href"),B.title=B.title||R.title,typeof B.href=="string"&&(B.href=e.trim(B.href))}function it(t,n){e.event.trigger(t),n&&n.call(R)}function st(){var e,t=s+"Slideshow_",n="click."+s,r,i,o;B.slideshow&&T[1]?(r=function(){M.text(B.slideshowStop).unbind(n).bind(f,function(){if(B.loop||T[u+1])e=setTimeout(J.next,B.slideshowSpeed)}).bind(a,function(){clearTimeout(e)}).one(n+" "+l,i),g.removeClass(t+"off").addClass(t+"on"),e=setTimeout(J.next,B.slideshowSpeed)},i=function(){clearTimeout(e),M.text(B.slideshowStart).unbind([f,a,l,n].join(" ")).one(n,function(){J.next(),r()}),g.removeClass(t+"on").addClass(t+"off")},B.slideshowAuto?r():i()):g.removeClass(t+"off "+t+"on")}function ot(t){V||(R=t,rt(),T=e(R),U=0,B.rel!=="nofollow"&&(T=e("."+o).filter(function(){var t=e.data(this,i),n;return t&&(n=t.rel||this.rel),n===B.rel}),U=T.index(R),U===-1&&(T=T.add(R),U=T.length-1)),W||(W=X=!0,g.show(),B.returnFocus&&e(R).blur().one(c,function(){e(this).focus()}),m.css({opacity:+B.opacity,cursor:B.overlayClose?"pointer":"auto"}).show(),B.w=Z(B.initialWidth,"x"),B.h=Z(B.initialHeight,"y"),J.position(),d&&N.bind("resize."+v+" scroll."+v,function(){m.css({width:tt(),height:nt(),top:N.scrollTop(),left:N.scrollLeft()})}).trigger("resize."+v),it(u,B.onOpen),H.add(A).hide(),P.html(B.close).show()),J.load(!0))}function ut(){!g&&t.body&&(Q=!1,N=e(n),g=G(K).attr({id:i,"class"?s+(d?"IE6":"IE"):""}).hide(),m=G(K,"Overlay",d?"position:absolute":"").hide(),L=G(K,"LoadingOverlay").add(G(K,"LoadingGraphic")),y=G(K,"Wrapper"),b=G(K,"Content").append(C=G(K,"LoadedContent","width:0; height:0; overflow:hidden"),A=G(K,"Title"),O=G(K,"Current"),_=G(K,"Next"),D=G(K,"Previous"),M=G(K,"Slideshow").bind(u,st),P=G(K,"Close")),y.append(G(K).append(G(K,"TopLeft"),w=G(K,"TopCenter"),G(K,"TopRight")),G(K,!1,"clear:left").append(E=G(K,"MiddleLeft"),b,S=G(K,"MiddleRight")),G(K,!1,"clear:left").append(G(K,"BottomLeft"),x=G(K,"BottomCenter"),G(K,"BottomRight"))).find("div div").css({"float":"left"}),k=G(K,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),H=_.add(D).add(O).add(M),e(t.body).append(m,g.append(y,k)))}function at(){return g?(Q||(Q=!0,j=w.height()+x.height()+b.outerHeight(!0)-b.height(),F=E.width()+S.width()+b.outerWidth(!0)-b.width(),I=C.outerHeight(!0),q=C.outerWidth(!0),g.css({"padding-bottom":j,"padding-right":F}),_.click(function(){J.next()}),D.click(function(){J.prev()}),P.click(function(){J.close()}),m.click(function(){B.overlayClose&&J.close()}),e(t).bind("keydown."+s,function(e){var t=e.keyCode;W&&B.escKey&&t===27&&(e.preventDefault(),J.close()),W&&B.arrowKey&&T[1]&&(t===37?(e.preventDefault(),D.click()):t===39&&(e.preventDefault(),_.click()))}),e("."+o,t).live("click",function(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),ot(this))})),!0):!1}var r={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!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,opacity:.9,preloading:!0,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,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:undefined},i="colorbox",s="cbox",o=s+"Element",u=s+"_open",a=s+"_load",f=s+"_complete",l=s+"_cleanup",c=s+"_closed",h=s+"_purge",p=!e.support.opacity&&!e.support.style,d=p&&!n.XMLHttpRequest,v=s+"_IE6",m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D,P,H,B,j,F,I,q,R,U,z,W,X,V,$,J,K="div",Q;if(e.colorbox)return;e(ut),J=e.fn[i]=e[i]=function(t,n){var s=this;t=t||{},ut();if(at()){if(!s[0]){if(s.selector)return s;s=e("<a/>"),t.open=!0}n&&(t.onComplete=n),s.each(function(){e.data(this,i,e.extend({},e.data(this,i)||r,t))}).addClass(o),(e.isFunction(t.open)&&t.open.call(s)||t.open)&&ot(s[0])}return s},J.position=function(e,t){function f(e){w[0].style.width=x[0].style.width=b[0].style.width=e.style.width,b[0].style.height=E[0].style.height=S[0].style.height=e.style.height}var n,r=0,i=0,o=g.offset(),u,a;N.unbind("resize."+s),g.css({top:-9e4,left:-9e4}),u=N.scrollTop(),a=N.scrollLeft(),B.fixed&&!d?(o.top-=u,o.left-=a,g.css({position:"fixed"})):(r=u,i=a,g.css({position:"absolute"})),B.right!==!1?i+=Math.max(tt()-B.w-q-F-Z(B.right,"x"),0):B.left!==!1?i+=Z(B.left,"x"):i+=Math.round(Math.max(tt()-B.w-q-F,0)/2),B.bottom!==!1?r+=Math.max(nt()-B.h-I-j-Z(B.bottom,"y"),0):B.top!==!1?r+=Z(B.top,"y"):r+=Math.round(Math.max(nt()-B.h-I-j,0)/2),g.css({top:o.top,left:o.left}),e=g.width()===B.w+q&&g.height()===B.h+I?0:e||0,y[0].style.width=y[0].style.height="9999px",n={width:B.w+q,height:B.h+I,top:r,left:i},e===0&&g.css(n),g.dequeue().animate(n,{duration:e,complete:function(){f(this),X=!1,y[0].style.width=B.w+q+F+"px",y[0].style.height=B.h+I+j+"px",B.reposition&&setTimeout(function(){N.bind("resize."+s,J.position)},1),t&&t()},step:function(){f(this)[spam-filter])},J.resize=function(e){W&&(e=e||{},e.width&&(B.w=Z(e.width,"x")-q-F),e.innerWidth&&(B.w=Z(e.innerWidth,"x")),C.css({width:B.w}),e.height&&(B.h=Z(e.height,"y")-I-j),e.innerHeight&&(B.h=Z(e.innerHeight,"y")),!e.innerHeight&&!e.height&&(C.css({height:"auto"}),B.h=C.height()),C.css({height:B.h}),J.position(B.transition==="none"?0:B.speed))},J.prep=function(t){function o(){return B.w=B.w||C.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function u(){return B.h=B.h||C.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(!W)return;var n,r=B.transition==="none"?0:B.speed;C.remove(),C=G(K,"LoadedContent").append(t),C.hide().appendTo(k.show()).css({width:o(),overflow:B.scrolling?"auto":"hidden"}).css({height:u()}).prependTo(,k.hide(),e(z).css({"float":"none"}),d&&e("select").not(g.find("select")).filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one(l,function(){this.style.visibility="inherit"}),n=function(){function y(){p&&g[0].style.removeAttribute("filter")}var t,n,o=T.length,u,a="frameBorder",l="allowTransparency",c,d,v,m;if(!W)return;c=function(){clearTimeout($),L.detach().hide(),it(f,B.onComplete)},p&&z&&C.fadeIn(100),A.html(B.title).add(C).show();if(o>1){typeof B.current=="string"&&O.html(B.current.replace("{current}",U+1).replace("{total}",o)).show(),_[b.loop||U<o-1?"show":"hide"]().html(B.next),D[b.loop||U?"show":"hide"]().html(B.previous),B.slideshow&&M.show();if(B.preloading){t=[Y(-1),Y(1)];while(n=T[t.pop()])m=e.data(n,i),m&&m.href?(d=m.href,e.isFunction(d)&&(d=d.call(n)))=n.href,et(d)&&(v=new Image,v.src=d)[spam-filter]else H.hide();B.iframe?(u=G("iframe")[0],a in u&&(u[a]=0),l in u&&(u[l]="true"),u.name=s+ +(new Date),B.fastIframe?c():e(u).one("load",c),u.src=B.href,B.scrolling||(u.scrolling="no"),e(u).addClass(s+"Iframe").appendTo(C).one(h,function(){u.src="//about:blank"})):c(),B.transition==="fade"?g.fadeTo(r,1,y):y()},B.transition==="fade"?g.fadeTo(r,0,function(){J.position(0,n)}):J.position(r,n)},J.load=function(t){var n,r,i=J.prep;X=!0,z=!1,R=T[u],t||rt(),it(h),it(a,B.onLoad),B.h=B.height?Z(B.height,"y")-I-j:B.innerHeight&&Z(B.innerHeight,"y"),B.w=B.width?Z(B.width,"x")-q-F:B.innerWidth&&Z(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=Z(B.maxWidth,"x")-q-F,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=Z(B.maxHeight,"y")-I-j,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,$=setTimeout(function(){L.show().appendTo(},100),B.inline?(G(K).hide().insertBefore(e(n)[0]).one(h,function(){e(this).replaceWith(C.children())}),i(e(n))):B.iframe?i(" "):B.html?i(B.html):et(n)?(e(z=new Image).addClass(s+"Photo").error(function(){B.title=!1,i(G(K,"Error").html(B.imgError))}).load(function(){var e;z.onload=null,B.scalePhotos&&(r=function(){z.height-=z.height*e,z.width-=z.width*e},B.mw&&z.width>B.mw&&(e=(z.width-B.mw)/z.width,r()),B.mh&&z.height>B.mh&&(e=(z.height-B.mh)/z.height,r())),B.h&&(z.style.marginTop=Math.max(B.h-z.height,0)/2+"px"),T[1]&&(B.loop||T[u+1])&&(z.style.cursor="pointer",z.onclick=function(){J.next()}),p&&(z.style.msInterpolationMode="bicubic"),setTimeout(function(){i(z)},1)}),setTimeout(function(){z.src=n},1)):n&&k.load(n,B.data,function(t,n,r){i(n==="error"?G(K,"Error").html(B.xhrError):e(this).contents())})},J.next=function(){!X&&T[1]&&(B.loop||T[u+1])&&(U=Y(1),J.load())},J.prev=function(){!X&&T[1]&&(B.loop||U)&&(U=Y(-1),J.load())},J.close=function(){W&&!V&&(V=!0,W=!1,it(l,B.onCleanup),N.unbind("."+s+" ."+v),m.fadeTo(200,0),g.stop().fadeTo(300,0,function(){g.add(m).css({opacity:1,cursor:"auto"}).hide(),it(h),C.remove(),setTimeout(function(){V=!1,it(c,B.onClosed)},1)}))},J.remove=function(){e([]).add(g).add(m).remove(),g=null,e("."+o).removeData(i).removeClass(o).die()},J.element=function(){return e(R)},J.settings=r})(jQuery,document,this);

Открываем

my_site/js/jquery/plugins/fancybox/jquery.fancybox.js и меняем всё содержимое на полученный выше код

 

Открываем my_site/js/jquery/plugins/fancybox/jquery.fancybox.css так же очищаем его и вставляем всё из из /colorbox/example3/colorbox.css

 

картинки из /colorbox/example3/images/ копируем и вставляем в my_site/js/jquery/plugins/fancybox/images

 

всё.

 

про параметры и всё остальное можно прочитать здесь

Будет ли это работать на версии 1.5?

Вы сами придумали данный способ или возможно есть подробная инструкция?

[Caracal]

Будет ли это работать на версии 1.5?

Вы сами придумали данный способ или возможно есть подробная инструкция?

на 1.5 и делаю. Я сам придумал. Здесь думать то не над чем.

[Violent]

на 1.5 и делаю. Я сам придумал. Здесь думать то не над чем.

Спасибо Вам конечно, но к сожалению у меня этот способ отказывается работать, когда все прописал, проверяю страницу товара, фотографии есть, но на главную фотографию возможности нажать нету (тоесть не масштабируется), при нажатии на боковые фото, открываются в новой вкладке, вообщем становится еще хуже

Возможно я что-то не так делаю, но я даже не знаю что.. в настройках выбрано:

 

Включить JqZoom вместо Thickbox:

Да

 

 

Даже при включении "Thickbox"

результат остается тот же..

 

Возможно кто-то знает, что нужно делать, может нужно перегенерировать .htaccess или по новой перегенерировать изображения.

Любому совету буду рад!

 

P.S. Так же я установил модель "Magic Zoom Plus" и всё бы хорошо, но почему то в нем нету открытия фотографии в рамке, только лупа, возможно это связано с тем что у меня бесплатная версия и прошло уже 30 дней, кто с ним работал, что можете сказать? (ссылка)

Edited November 30, 2012 by Violent (see edit history)

[Caracal]

Спасибо Вам конечно, но к сожалению у меня этот способ отказывается работать, когда все прописал, проверяю страницу товара, фотографии есть, но на главную фотографию возможности нажать нету (тоесть не масштабируется), при нажатии на боковые фото, открываются в новой вкладке, вообщем становится еще хуже

Возможно я что-то не так делаю, но я даже не знаю что.. в настройках выбрано:

 

Включить JqZoom вместо Thickbox:

Да Нет

даже при включении "

Thickbox"

результат остается тот же..

Возможно кто-то знает, что нужно делать, может нужно перегенерировать .htaccess или по новой перегенерировать изображения.

Любому совету буду рад!

 

Знач скрипт не вызывается...

[Violent]

Знач скрипт не вызывается...

А что нужно чтобы его вызвать и обеспечить стабильную работу?)

[Caracal]

А что нужно чтобы его вызвать и обеспечить стабильную работу?)

А всё правильно сделал то?

выложи файл:

my_site/js/jquery/plugins/fancybox/jquery.fancybox.js

и product.tpl

и ещё ссылку на сайт...

 

можетт чем и помогу

[Violent]

my_site/js/jquery/plugins/fancybox/jquery.fancybox.js (все как и у Вас):

$(document).ready(function(){
    //Examples of how to assign the ColorBox event to elements
    $(".thickbox").colorbox({rel:'thickbox'});
    $(".ajax").colorbox();
    $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".inline").colorbox({inline:true, width:"50%"});
    $(".callbacks").colorbox({
	 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
	 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
	 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
	 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
	 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){
	 $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
	 return false;
    });
  });
// ColorBox v1.3.20.1 - jQuery lightbox plugin
// (c) 2012 Jack Moore - jacklmoore.com
// License: http://www.opensource.org/licenses/mit-license.php
(function(e,t,n){function G(n,r,i){var o=t.createElement(n);return r&&(o.id=s+r),i&&(o.style.cssText=i),e(o)}function Y(e){var t=T.length,n=(U+e)%t;return n<0?t+n:n}function Z(e,t){return Math.round((/%/.test(e)?(t==="x"?tt():nt())/100:1)*parseInt(e,10))}function et(e){return B.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(e)}function tt(){return n.innerWidth||N.width()}function nt(){return n.innerHeight||N.height()}function rt(){var t,n=e.data(R,i);n==null?(B=e.extend({},r),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},n);for(t in B)e.isFunction(B[t])&&t.slice(0,2)!=="on"&&(B[t]=B[t].call(R));B.rel=B.rel||R.rel||"nofollow",B.href=B.href||e(R).attr("href"),B.title=B.title||R.title,typeof B.href=="string"&&(B.href=e.trim(B.href))}function it(t,n){e.event.trigger(t),n&&n.call(R)}function st(){var e,t=s+"Slideshow_",n="click."+s,r,i,o;B.slideshow&&T[1]?(r=function(){M.text(B.slideshowStop).unbind(n).bind(f,function(){if(B.loop||T[u+1])e=setTimeout(J.next,B.slideshowSpeed)}).bind(a,function(){clearTimeout(e)}).one(n+" "+l,i),g.removeClass(t+"off").addClass(t+"on"),e=setTimeout(J.next,B.slideshowSpeed)},i=function(){clearTimeout(e),M.text(B.slideshowStart).unbind([f,a,l,n].join(" ")).one(n,function(){J.next(),r()}),g.removeClass(t+"on").addClass(t+"off")},B.slideshowAuto?r():i()):g.removeClass(t+"off "+t+"on")}function ot(t){V||(R=t,rt(),T=e(R),U=0,B.rel!=="nofollow"&&(T=e("."+o).filter(function(){var t=e.data(this,i),n;return t&&(n=t.rel||this.rel),n===B.rel}),U=T.index(R),U===-1&&(T=T.add(R),U=T.length-1)),W||(W=X=!0,g.show(),B.returnFocus&&e(R).blur().one(c,function(){e(this).focus()}),m.css({opacity:+B.opacity,cursor:B.overlayClose?"pointer":"auto"}).show(),B.w=Z(B.initialWidth,"x"),B.h=Z(B.initialHeight,"y"),J.position(),d&&N.bind("resize."+v+" scroll."+v,function(){m.css({width:tt(),height:nt(),top:N.scrollTop(),left:N.scrollLeft()})}).trigger("resize."+v),it(u,B.onOpen),H.add(A).hide(),P.html(B.close).show()),J.load(!0))}function ut(){!g&&t.body&&(Q=!1,N=e(n),g=G(K).attr({id:i,"class"?s+(d?"IE6":"IE"):""}).hide(),m=G(K,"Overlay",d?"position:absolute":"").hide(),L=G(K,"LoadingOverlay").add(G(K,"LoadingGraphic")),y=G(K,"Wrapper"),b=G(K,"Content").append(C=G(K,"LoadedContent","width:0; height:0; overflow:hidden"),A=G(K,"Title"),O=G(K,"Current"),_=G(K,"Next"),D=G(K,"Previous"),M=G(K,"Slideshow").bind(u,st),P=G(K,"Close")),y.append(G(K).append(G(K,"TopLeft"),w=G(K,"TopCenter"),G(K,"TopRight")),G(K,!1,"clear:left").append(E=G(K,"MiddleLeft"),b,S=G(K,"MiddleRight")),G(K,!1,"clear:left").append(G(K,"BottomLeft"),x=G(K,"BottomCenter"),G(K,"BottomRight"))).find("div div").css({"float":"left"}),k=G(K,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),H=_.add(D).add(O).add(M),e(t.body).append(m,g.append(y,k)))}function at(){return g?(Q||(Q=!0,j=w.height()+x.height()+b.outerHeight(!0)-b.height(),F=E.width()+S.width()+b.outerWidth(!0)-b.width(),I=C.outerHeight(!0),q=C.outerWidth(!0),g.css({"padding-bottom":j,"padding-right":F}),_.click(function(){J.next()}),D.click(function(){J.prev()}),P.click(function(){J.close()}),m.click(function(){B.overlayClose&&J.close()}),e(t).bind("keydown."+s,function(e){var t=e.keyCode;W&&B.escKey&&t===27&&(e.preventDefault(),J.close()),W&&B.arrowKey&&T[1]&&(t===37?(e.preventDefault(),D.click()):t===39&&(e.preventDefault(),_.click()))}),e("."+o,t).live("click",function(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||(e.preventDefault(),ot(this))})),!0):!1}var r={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!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,opacity:.9,preloading:!0,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,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:undefined},i="colorbox",s="cbox",o=s+"Element",u=s+"_open",a=s+"_load",f=s+"_complete",l=s+"_cleanup",c=s+"_closed",h=s+"_purge",p=!e.support.opacity&&!e.support.style,d=p&&!n.XMLHttpRequest,v=s+"_IE6",m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D,P,H,B,j,F,I,q,R,U,z,W,X,V,$,J,K="div",Q;if(e.colorbox)return;e(ut),J=e.fn[i]=e[i]=function(t,n){var s=this;t=t||{},ut();if(at()){if(!s[0]){if(s.selector)return s;s=e("<a/>"),t.open=!0}n&&(t.onComplete=n),s.each(function(){e.data(this,i,e.extend({},e.data(this,i)||r,t))}).addClass(o),(e.isFunction(t.open)&&t.open.call(s)||t.open)&&ot(s[0])}return s},J.position=function(e,t){function f(e){w[0].style.width=x[0].style.width=b[0].style.width=e.style.width,b[0].style.height=E[0].style.height=S[0].style.height=e.style.height}var n,r=0,i=0,o=g.offset(),u,a;N.unbind("resize."+s),g.css({top:-9e4,left:-9e4}),u=N.scrollTop(),a=N.scrollLeft(),B.fixed&&!d?(o.top-=u,o.left-=a,g.css({position:"fixed"})):(r=u,i=a,g.css({position:"absolute"})),B.right!==!1?i+=Math.max(tt()-B.w-q-F-Z(B.right,"x"),0):B.left!==!1?i+=Z(B.left,"x"):i+=Math.round(Math.max(tt()-B.w-q-F,0)/2),B.bottom!==!1?r+=Math.max(nt()-B.h-I-j-Z(B.bottom,"y"),0):B.top!==!1?r+=Z(B.top,"y"):r+=Math.round(Math.max(nt()-B.h-I-j,0)/2),g.css({top:o.top,left:o.left}),e=g.width()===B.w+q&&g.height()===B.h+I?0:e||0,y[0].style.width=y[0].style.height="9999px",n={width:B.w+q,height:B.h+I,top:r,left:i},e===0&&g.css(n),g.dequeue().animate(n,{duration:e,complete:function(){f(this),X=!1,y[0].style.width=B.w+q+F+"px",y[0].style.height=B.h+I+j+"px",B.reposition&&setTimeout(function(){N.bind("resize."+s,J.position)},1),t&&t()},step:function(){f(this)[spam-filter])},J.resize=function(e){W&&(e=e||{},e.width&&(B.w=Z(e.width,"x")-q-F),e.innerWidth&&(B.w=Z(e.innerWidth,"x")),C.css({width:B.w}),e.height&&(B.h=Z(e.height,"y")-I-j),e.innerHeight&&(B.h=Z(e.innerHeight,"y")),!e.innerHeight&&!e.height&&(C.css({height:"auto"}),B.h=C.height()),C.css({height:B.h}),J.position(B.transition==="none"?0:B.speed))},J.prep=function(t){function o(){return B.w=B.w||C.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function u(){return B.h=B.h||C.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(!W)return;var n,r=B.transition==="none"?0:B.speed;C.remove(),C=G(K,"LoadedContent").append(t),C.hide().appendTo(k.show()).css({width:o(),overflow:B.scrolling?"auto":"hidden"}).css({height:u()}).prependTo(,k.hide(),e(z).css({"float":"none"}),d&&e("select").not(g.find("select")).filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one(l,function(){this.style.visibility="inherit"}),n=function(){function y(){p&&g[0].style.removeAttribute("filter")}var t,n,o=T.length,u,a="frameBorder",l="allowTransparency",c,d,v,m;if(!W)return;c=function(){clearTimeout($),L.detach().hide(),it(f,B.onComplete)},p&&z&&C.fadeIn(100),A.html(B.title).add(C).show();if(o>1){typeof B.current=="string"&&O.html(B.current.replace("{current}",U+1).replace("{total}",o)).show(),_[b.loop||U<o-1?"show":"hide"]().html(B.next),D[b.loop||U?"show":"hide"]().html(B.previous),B.slideshow&&M.show();if(B.preloading){t=[Y(-1),Y(1)];while(n=T[t.pop()])m=e.data(n,i),m&&m.href?(d=m.href,e.isFunction(d)&&(d=d.call(n)))=n.href,et(d)&&(v=new Image,v.src=d)[spam-filter]else H.hide();B.iframe?(u=G("iframe")[0],a in u&&(u[a]=0),l in u&&(u[l]="true"),u.name=s+ +(new Date),B.fastIframe?c():e(u).one("load",c),u.src=B.href,B.scrolling||(u.scrolling="no"),e(u).addClass(s+"Iframe").appendTo(C).one(h,function(){u.src="//about:blank"})):c(),B.transition==="fade"?g.fadeTo(r,1,y):y()},B.transition==="fade"?g.fadeTo(r,0,function(){J.position(0,n)}):J.position(r,n)},J.load=function(t){var n,r,i=J.prep;X=!0,z=!1,R=T[u],t||rt(),it(h),it(a,B.onLoad),B.h=B.height?Z(B.height,"y")-I-j:B.innerHeight&&Z(B.innerHeight,"y"),B.w=B.width?Z(B.width,"x")-q-F:B.innerWidth&&Z(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=Z(B.maxWidth,"x")-q-F,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=Z(B.maxHeight,"y")-I-j,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,$=setTimeout(function(){L.show().appendTo(},100),B.inline?(G(K).hide().insertBefore(e(n)[0]).one(h,function(){e(this).replaceWith(C.children())}),i(e(n))):B.iframe?i(" "):B.html?i(B.html):et(n)?(e(z=new Image).addClass(s+"Photo").error(function(){B.title=!1,i(G(K,"Error").html(B.imgError))}).load(function(){var e;z.onload=null,B.scalePhotos&&(r=function(){z.height-=z.height*e,z.width-=z.width*e},B.mw&&z.width>B.mw&&(e=(z.width-B.mw)/z.width,r()),B.mh&&z.height>B.mh&&(e=(z.height-B.mh)/z.height,r())),B.h&&(z.style.marginTop=Math.max(B.h-z.height,0)/2+"px"),T[1]&&(B.loop||T[u+1])&&(z.style.cursor="pointer",z.onclick=function(){J.next()}),p&&(z.style.msInterpolationMode="bicubic"),setTimeout(function(){i(z)},1)}),setTimeout(function(){z.src=n},1)):n&&k.load(n,B.data,function(t,n,r){i(n==="error"?G(K,"Error").html(B.xhrError):e(this).contents())})},J.next=function(){!X&&T[1]&&(B.loop||T[u+1])&&(U=Y(1),J.load())},J.prev=function(){!X&&T[1]&&(B.loop||U)&&(U=Y(-1),J.load())},J.close=function(){W&&!V&&(V=!0,W=!1,it(l,B.onCleanup),N.unbind("."+s+" ."+v),m.fadeTo(200,0),g.stop().fadeTo(300,0,function(){g.add(m).css({opacity:1,cursor:"auto"}).hide(),it(h),C.remove(),setTimeout(function(){V=!1,it(c,B.onClosed)},1)}))},J.remove=function(){e([]).add(g).add(m).remove(),g=null,e("."+o).removeData(i).removeClass(o).die()},J.element=function(){return e(R)},J.settings=r})(jQuery,document,this);

Product.tpl:

[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 6625 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{include file="$tpl_dir./errors.tpl"}
{if $errors|@count == 0}
<script type="text/javascript">
// <![CDATA[[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]// PrestaShop internal settings
var currencySign = '{$currencySign|html_entity_decode:2:"UTF-8"}';
var currencyRate = '{$currencyRate|floatval}';
var currencyFormat = '{$currencyFormat|intval}';
var currencyBlank = '{$currencyBlank|intval}';
var taxRate = {$tax_rate|floatval};
var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]//JS Hook
var oosHookJsCodeFunctions = new Array();[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]// Parameters
var id_product = '{$product->id|intval}';
var productHasAttributes = {if isset($groups)}true{else}false{/if};
var quantitiesDisplayAllowed = {if $display_qties == 1}true{else}false{/if};
var quantityAvailable = {if $display_qties == 1 && $product->quantity}{$product->quantity}{else}0{/if};
var allowBuyWhenOutOfStock = {if $allow_oosp == 1}true{else}false{/if};
var availableNowValue = '{$product->available_now|escape:'quotes':'UTF-8'}';
var availableLaterValue = '{$product->available_later|escape:'quotes':'UTF-8'}';
var productPriceTaxExcluded = {$product->getPriceWithoutReduct(true)|default:'null'} - {$product->ecotax};
var reduction_percent = {if $product->specificPrice AND $product->specificPrice.reduction AND $product->specificPrice.reduction_type == 'percentage'}{$product->specificPrice.reduction*100}{else}0{/if};
var reduction_price = {if $product->specificPrice AND $product->specificPrice.reduction AND $product->specificPrice.reduction_type == 'amount'}{$product->specificPrice.reduction|floatval}{else}0{/if};
var specific_price = {if $product->specificPrice AND $product->specificPrice.price}{$product->specificPrice.price}{else}0{/if};
var product_specific_price = new Array();
{foreach from=$product->specificPrice key='key_specific_price' item='specific_price_value'}
product_specific_price['{$key_specific_price}'] = '{$specific_price_value}';
{/foreach}
var specific_currency = {if $product->specificPrice AND $product->specificPrice.id_currency}true{else}false{/if};
var group_reduction = '{$group_reduction}';
var default_eco_tax = {$product->ecotax};
var ecotaxTax_rate = {$ecotaxTax_rate};
var currentDate = '{$smarty.now|date_format:'%Y-%m-%d %H:%M:%S'}';
var maxQuantityToAllowDisplayOfLastQuantityMessage = {$last_qties};
var noTaxForThisProduct = {if $no_tax == 1}true{else}false{/if};
var displayPrice = {$priceDisplay};
var productReference = '{$product->reference|escape:'htmlall':'UTF-8'}';
var productAvailableForOrder = {if (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}'0'{else}'{$product->available_for_order}'{/if};
var productShowPrice = '{if !$PS_CATALOG_MODE}{$product->show_price}{else}0{/if}';
var productUnitPriceRatio = '{$product->unit_price_ratio}';
var idDefaultImage = {if isset($cover.id_image_only)}{$cover.id_image_only}{else}0{/if};[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if !$priceDisplay || $priceDisplay == 2}
{assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL, 2)}
{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
{elseif $priceDisplay == 1}
{assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL, 2)}
{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]var productPriceWithoutRedution = '{$productPriceWithoutRedution}';
var productPrice = '{$productPrice}';[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]// Customizable field
var img_ps_dir = '{$img_ps_dir}';
var customizationFields = new Array();
{assign var='imgIndex' value=0}
{assign var='textFieldIndex' value=0}
{foreach from=$customizationFields item='field' name='customizationFields'}
{assign var="key" value="pictures_`$product->id`_`$field.id_customization_field`"}
customizationFields[{$smarty.foreach.customizationFields.index|intval}] = new Array();
customizationFields[{$smarty.foreach.customizationFields.index|intval}][0] = '{if $field.type|intval == 0}img{$imgIndex++}{else}textField{$textFieldIndex++}{/if}';
customizationFields[{$smarty.foreach.customizationFields.index|intval}][1] = {if $field.type|intval == 0 && isset($pictures.$key) && $pictures.$key}2{else}{$field.required|intval}{/if};
{/foreach}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]// Images
var img_prod_dir = '{$img_prod_dir}';
var combinationImages = new Array();[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if isset($combinationImages)}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
 combinationImages[{$combinationId}] = new Array();
 {foreach from=$combination item='image' name='f_combinationImage'}
  combinationImages[{$combinationId}][{$smarty.foreach.f_combinationImage.index}] = {$image.id_image|intval};
 {/foreach}
{/foreach}
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]combinationImages[0] = new Array();
{if isset($images)}
{foreach from=$images item='image' name='f_defaultImages'}
 combinationImages[0][{$smarty.foreach.f_defaultImages.index}] = {$image.id_image};
{/foreach}
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]// Translations
var doesntExist = '{l s='This combination does not exist for this product. Please choose another.' js=1}';
var doesntExistNoMore = '{l s='This product is no longer in stock' js=1}';
var doesntExistNoMoreBut = '{l s='with those attributes but is available with others' js=1}';
var uploading_in_progress = '{l s='Uploading in progress, please wait...' js=1}';
var fieldRequired = '{l s='Please fill in all required fields, then save the customization.' js=1}';
{if isset($groups)}
// Combinations
{foreach from=$combinations key=idCombination item=combination}
 var specific_price_combination = new Array();
 specific_price_combination['reduction_percent'] = {if $combination.specific_price AND $combination.specific_price.reduction AND $combination.specific_price.reduction_type == 'percentage'}{$combination.specific_price.reduction*100}{else}0{/if};
 specific_price_combination['reduction_price'] = {if $combination.specific_price AND $combination.specific_price.reduction AND $combination.specific_price.reduction_type == 'amount'}{$combination.specific_price.reduction}{else}0{/if};
 specific_price_combination['price'] = {if $combination.specific_price AND $combination.specific_price.price}{$combination.specific_price.price}{else}0{/if};
 specific_price_combination['reduction_type'] = '{if $combination.specific_price}{$combination.specific_price.reduction_type}{/if}';
 addCombination({$idCombination|intval}, new Array({$combination.list}), {$combination.quantity}, {$combination.price}, {$combination.ecotax}, {$combination.id_image}, '{$combination.reference|addslashes}', {$combination.unit_impact}, {$combination.minimal_quantity}, '{$combination.available_date}', specific_price_combination);
{/foreach}
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if isset($attributesCombinations)}
// Combinations attributes informations
var attributesCombinations = new Array();
{foreach from=$attributesCombinations key=id item=aC}
 tabInfos = new Array();
 tabInfos['id_attribute'] = '{$aC.id_attribute|intval}';
 tabInfos['attribute'] = '{$aC.attribute}';
 tabInfos['group'] = '{$aC.group}';
 tabInfos['id_attribute_group'] = '{$aC.id_attribute_group|intval}';
 attributesCombinations.push(tabInfos);
{/foreach}
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]$(document).ready(function () {
$('.color_to_pick_holder').hover(function() {
  $('#color_to_pick_list').stop(true, true).slideDown(400);
}, function() {
  $('#color_to_pick_list').stop(true, true).slideUp(400);
});
});[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]/*  --------------- */
//]]>
</script>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{include file="$tpl_dir./breadcrumb.tpl"}
<div id="primary_block" class="clearfix">
{if isset($adminActionDisplay) && $adminActionDisplay}
<div id="admin-action">
 <p>{l s='This product is not visible to your customers.'}
 <input type="hidden" id="admin-action-product-id" value="{$product->id}" />
 <input type="submit" value="{l s='Publish'}" class="exclusive" onclick="submitPublishProduct('{$base_dir}{$smarty.get.ad}', 0)"/>
 <input type="submit" value="{l s='Back'}" class="exclusive" onclick="submitPublishProduct('{$base_dir}{$smarty.get.ad}', 1)"/>
 </p>
 <p id="admin-action-result"></p>
 </p>
</div>
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if isset($confirmation) && $confirmation}
<p class="confirmation">
 {$confirmation}
</p>
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]<!-- right infos-->
<div id="pb-right-column">
 <!-- product img-->
 <div id="image-block">
 {if $have_image}
  <span id="view_full_size">
   <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, '')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" />
   <span class="span_link">{l s='View full size'}</span>
  </span>
 {else}
  <span id="view_full_size">
   <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
   <span class="span_link">{l s='View full size'}</span>
  </span>
 {/if}
 </div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]  {if isset($images) && count($images) > 0}
 <!-- thumbnails -->
 <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
 {if isset($images) && count($images) > 4}<a id="view_scroll_left" class="hidden btn" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a>{/if}
 <div id="thumbs_list">
  <ul id="thumbs_list_frame">
   {if isset($images)}
 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}
 <li id="thumbnail_{$image.id_image}">
  <a href="{$link->getImageLink($product->link_rewrite, $imageIds, '')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
  </a>
 </li>
 {/foreach}
   {/if}
  </ul>
 </div>
 {if isset($images) && count($images) > 4}<a id="view_scroll_right" class="btn" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
 </div>
 {/if}


</div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]<!-- left infos-->
<div id="pb-left-column">
 {if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if} 
 <span class="productTitle">{$product->name|escape:'htmlall':'UTF-8'}</span>
 {if isset($comments)}
 {assign var='totalGrade' value=0}
 {assign var='totalVotes' value=0}
 {assign var='productGrade' value=0}
 {foreach from=$comments item=comment}
  {if $comment.content}
  {$totalGrade = $totalGrade+$comment.grade}
  {$totalVotes = $totalVotes+1}	
  {/if}
 {/foreach}
 {if $totalVotes>0}
  {$productGrade = $totalGrade/$totalVotes}
 {else}
  {$productGrade = 0}
 {/if}
  <div class="comment" id="product_comment">
 <div class="star_content clearfix">
 {section name="i" start=0 loop=5 step=1}
  {if $productGrade <= $smarty.section.i.index}
   <div class="star"></div>
  {else}
   <div class="star star_on"></div>
  {/if}
 {/section}
 </div>
  </div>
  [/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]  {/if}
 <div class="clearfix"></div>
 {if $product->online_only}
 <p class="online_only">{l s='Online only'}</p>
 {/if}
 <!--{if $product->description_short OR $packItems|@count > 0}   ALYSUM
 <div id="short_description_block">
  {if $product->description_short}
   <div id="short_description_content" class="rte align_justify">{$product->description_short}</div>
  {/if}
  {if $product->description}
  <p class="buttons_bottom_block"><a href="javascript:{ldelim}{rdelim}" class="button">{l s='More details'}</a></p>
  {/if}
  {if $packItems|@count > 0}
  <div class="short_description_pack">
   <h3>{l s='Pack content'}</h3>
   {foreach from=$packItems item=packItem}
   <div class="pack_content">
 {$packItem.pack_quantity} x <a href="{$link->getProductLink($packItem.id_product, $packItem.link_rewrite, $packItem.category)}">{$packItem.name|escape:'htmlall':'UTF-8'}</a>
 <p>{$packItem.description_short}</p>
   </div>
   {/foreach}
  </div>
  {/if}
 </div>
 {/if}
-->
 {*{if isset($colors) && $colors}
 <!-- colors -->
 <div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <!--<ul id="color_to_pick_list" class="clearfix">
  {foreach from=$colors key='id_attribute' item='color'}
   <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>-->
  <select id="color_to_pick_list" class="clearfix">
  {foreach from=$colors key='id_attribute' item='color'}
   <option id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</option>
  {/foreach}
  </select>
  <div class="clear"></div>
 </div>
 {/if}*}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]  <!-- description and features -->
 {if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments)}
 <div id="more_info_block" class="clear">
  <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
   {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
   {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
   {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
   {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
   {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
   {$HOOK_PRODUCT_TAB}
  </ul>
  <div id="more_info_sheets" class="sheets align_justify">
  {if isset($product) && $product->description}
   <!-- full description -->
   <div id="idTab1" class="rte">{$product->description}</div>
  {/if}
  {if isset($features) && $features}
   <!-- product's features -->
   <ul id="idTab2" class="bullet">
   {foreach from=$features item=feature}
		  {if isset($feature.value)}
	 <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
		  {/if}
   {/foreach}
   </ul>
  {/if}
  {if isset($attachments) && $attachments}
   <ul id="idTab9" class="bullet">
   {foreach from=$attachments item=attachment}
 <li><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
   {/foreach}
   </ul>
  {/if}
  {if isset($accessories) AND $accessories}
   <!-- accessories -->
   <ul id="idTab4" class="bullet">
 <div class="block products_block accessories_block clearfix">
  <div class="block_content">
   <ul>
   {foreach from=$accessories item=accessory name=accessories_list}
    {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
    <li class="ajax_block_product {if $smarty.foreach.accessories_list.first}first_item{elseif $smarty.foreach.accessories_list.last}last_item{else}item{/if} product_accessories_description">
	 <div class="product_desc">
	  <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'large')}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" /></a>
	 </div>
	 <div class="product_accessories_price">
	  <h5><a href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|truncate:22:'...':true|escape:'htmlall':'UTF-8'}</a></h5>
	  {if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<span class="price">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if}
	  {if ($accessory.allow_oosp || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
	  <a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")}" rel="ajax_id_product_{$accessory.id_product|intval}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
	  {else}
	  <span class="exclusive">{l s='Add to cart'}</span>
	  {/if}
	 </div>
    </li>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]	   {/foreach}
   </ul>
  </div>
 </div>
   </ul>
  {/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- Customizable products -->
  {if isset($product) && $product->customizable}
   <div id="idTab10" class="bullet customization_block">
 <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
  <p class="infoCustomizable">
   {l s='After saving your customized product, remember to add it to your cart.'}
   {if $product->uploadable_files}<br />{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
  </p>
  {if $product->uploadable_files|intval}
  <div class="customizableProductsFile">
   <h3>{l s='Pictures'}</h3>
   <ul id="uploadable_files" class="clearfix">
    {counter start=0 assign='customizationField'}
    {foreach from=$customizationFields item='field' name='customizationFields'}
	 {if $field.type == 0}
	  <li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
	   {if isset($pictures.$key)}
	   <div class="customizationUploadBrowse">
	    <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
	    <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
		 <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
	    </a>
	   </div>
	   {/if}
	   <div class="customizationUploadBrowse">
	    <label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
	    <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
	   </div>
	  </li>
	  {counter}
	 {/if}
    {/foreach}
   </ul>
  </div>
  {/if}
  {if $product->text_fields|intval}
  <div class="customizableProductsText">
   <h3>{l s='Text'}</h3>
   <ul id="text_fields">
   {counter start=0 assign='customizationField'}
   {foreach from=$customizationFields item='field' name='customizationFields'}
    {if $field.type == 1}
    <li class="customizationUploadLine{if $field.required} required{/if}">
	 <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
	 <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
    </li>
    {counter}
    {/if}
   {/foreach}
   </ul>
  </div>
  {/if}
  <p id="customizedDatas">
   <input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
   <input type="hidden" name="submitCustomizedDatas" value="1" />
   <input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
   <span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
  </p>
 </form>
 <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
   </div>
  {/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
  </div>
 </div>
 {/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]  {if ($product->show_price AND !isset($restricted_country_mode)) OR isset($groups) OR $product->reference OR (isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS)}
 <!-- add to cart form-->
 <form id="buy_block" {if $PS_CATALOG_MODE AND !isset($groups) AND $product->quantity > 0}class="hidden"{/if} action="{$link->getPageLink('cart')}" method="post">[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- hidden datas -->
  <div class="hidden">
   <input type="hidden" name="token" value="{$static_token}" />
   <input type="hidden" name="id_product" value="{$product->id|intval}" id="product_page_product_id" />
   <input type="hidden" name="add" value="1" />
   <input type="hidden" name="id_product_attribute" id="idCombination" value="" />
  </div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <div class="product_attributes">
   {if isset($groups)}
   <!-- attributes -->
   <div id="attributes">
   {foreach from=$groups key=id_attribute_group item=group}
 {if $group.attributes|@count}
  <fieldset class="attribute_fieldset">
   <label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
   {assign var="groupName" value="group_$id_attribute_group"}
   <div class="attribute_list">
   {if ($group.group_type == 'select')}
    <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select dropdown-select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
	 {/foreach}
    </select>
   {elseif ($group.group_type == 'color')}
    <!--<div class="color_to_pick_holder">
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <div id="color-holder-wrapper-{$id_attribute|intval}" class="color-holder-wrapper {if ($group.default != $id_attribute)}hidden{/if}">
	  <div class="color_indicator" style="background:{$colors.$id_attribute.value}"></div>
	  {$colors.$id_attribute.name}
	  </div>
	 {/foreach}
    <ul id="color_to_pick_list" class="clearfix">
	 {assign var="default_colorpicker" value=""}
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <li id="colorsect_{$id_attribute|intval}" class="colorsect">
	  <a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');$('.colorsect').show('slow');$('#colorsect_{$id_attribute|intval}').hide('slow');$('.color-holder-wrapper').css('display','none');$('#color-holder-wrapper-{$id_attribute|intval}').css('display','block');{/if}">
	   <div class="color_indicator" style="background:{$colors.$id_attribute.value}"></div>
	   {$colors.$id_attribute.name}
	  </a>
	 </li>
	 {if ($group.default == $id_attribute)}
	  {$default_colorpicker = $id_attribute}
	 {/if}
	 {/foreach}
    </ul>
    </div>-->
    <select name="color_to_pick_list" class="dropdown-select" onchange="colorPickerClick('#colorsect');getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	 {assign var="default_colorpicker" value=""}
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <option id="colorsect" value="{$id_attribute|intval}"{if ($group.default == $id_attribute)} selected{/if}>{$colors.$id_attribute.name}
	  </option>
	 {if ($group.default == $id_attribute)}
	  {$default_colorpicker = $id_attribute}
	 {/if}
	 {/foreach}
    </select>
    <input type="hidden" id="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
   {elseif ($group.group_type == 'radio')}
    {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	 {$group_attribute|escape:'htmlall':'UTF-8'}<br/>
    {/foreach}
   {/if}
   </div>
  </fieldset>
 {/if}
   {/foreach}
   <div class="clear"></div>
   </div>
  {/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
   <label for="product_reference">{l s='Reference:'} </label>
   <span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span>
  </p>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- quantity wanted -->
  <p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
   <label>{l s='Quantity:'}</label>
   <input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />
  </p>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- minimal quantity wanted -->
  <p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
   {l s='This product is not sold individually. You must select at least'} <b id="minimal_quantity_label">{$product->minimal_quantity}</b> {l s='quantity for this product.'}
  </p>
  {if $product->minimal_quantity > 1}
  <script type="text/javascript">
   checkMinimalQuantity();
  </script>
  {/if}
  <div class="content_prices clearfix">
   <!-- prices -->
   {if $product->show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]	 <div class="price">
  {if !$priceDisplay || $priceDisplay == 2}
   {assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL)}
   {assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
  {elseif $priceDisplay == 1}
   {assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL)}
   {assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
  {/if}
  {if $product->specificPrice AND $product->specificPrice.reduction}
    {if $priceDisplay >= 0 && $priceDisplay <= 2}
	 {if $productPriceWithoutRedution > $productPrice}
	  <span id="old_price_display">{convertPrice price=$productPriceWithoutRedution}</span>
	  <!-- {if $tax_enabled && $display_tax_label == 1}
	   {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
	  {/if} -->
	 {/if}
    {/if}
   {/if}
   {if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}
    <span id="reduction_percent">-{$product->specificPrice.reduction*100}%</span>
   {elseif $product->specificPrice AND $product->specificPrice.reduction_type == 'amount' && $product->specificPrice.reduction|intval !=0}
    <span id="reduction_amount">-{convertPrice price=$product->specificPrice.reduction|floatval}</span>
   {/if}
  <p class="our_price_display">
  {if $priceDisplay >= 0 && $priceDisplay <= 2}
   <span id="our_price_display">{convertPrice price=$productPrice}</span>	  
   <!--{if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))}
    {if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
   {/if}-->
  {/if}
  </p>

   {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}
   <span class="exclusive">
    <span></span>
    {l s='Add to cart'}
   </span>
  {else}
   <p id="add_to_cart" class="buttons_bottom_block">
    <span></span>
    <input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
   </p>
  {/if}
  {if $product->on_sale}
   <img src="{$img_dir}onsale_{$lang_iso}.gif" alt="{l s='On sale'}" class="on_sale_img"/>
   <span class="on_sale">{l s='On sale!'}</span>
  {elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutRedution > $productPrice}
   <span class="discount">{l s='Reduced price!'}</span>
  {/if}
  {if $priceDisplay == 2}
   <br />
   <span id="pretaxe_price"><span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span> {l s='tax excl.'}</span>
  {/if}
 </div>
 [/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]	
 {if $packItems|@count && $productPrice < $product->getNoPackPrice()}
  <p class="pack_price">{l s='instead of'} <span style="text-decoration: line-through;">{convertPrice price=$product->getNoPackPrice()}</span></p>
  <br class="clear" />
 {/if}
 {if $product->ecotax != 0}
  <p class="price-ecotax">{l s='include'} <span id="ecotax_price_display">{if $priceDisplay == 2}{$ecotax_tax_exc|convertAndFormatPrice}{else}{$ecotax_tax_inc|convertAndFormatPrice}{/if}</span> {l s='for green tax'}
   {if $product->specificPrice AND $product->specificPrice.reduction}
   <br />{l s='(not impacted by the discount)'}
   {/if}
  </p>
 {/if}
 {if !empty($product->unity) && $product->unit_price_ratio > 0.000000}
   {math equation="pprice / punit_price"  pprice=$productPrice  punit_price=$product->unit_price_ratio assign=unit_price}
  <p class="unit-price"><span id="unit_price_display">{convertPrice price=$unit_price}</span> {l s='per'} {$product->unity|escape:'htmlall':'UTF-8'}</p>
 {/if}
 {*close if for show price*}
 {/if}

 [/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]	 <div class="clear"></div>
   </div>
  <!-- availability  alysum
  <p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
   <!--<span id="availability_label">{l s='Availability:'}</span>
   <span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>
   {if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}
   </span>
  </p> -->[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- number of item in stock alysum
  {if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)}
  <p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>
   <span id="quantityAvailable">{$product->quantity|intval}</span>
   <span {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>
   <span {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>
  </p>
  {/if}-->[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <!-- Out of stock hook -->
  <div id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>
   {$HOOK_PRODUCT_OOS}
  </div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <p class="warning_inline" id="last_quantities"{if ($product->quantity > $last_qties OR $product->quantity <= 0) OR $allow_oosp OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none"{/if} >{l s='Warning: Last items in stock!'}</p>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]   <div class="hookProductPage">
   {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}
   <!-- usefull links-->
   <ul id="usefull_link_block">
 {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
 <!--<li class="print"><a href="javascript:print();">{l s='Print'}</a></li>-->
 {if $have_image && !$jqZoomEnabled}
 {/if}
   </ul>
  </div>
 </div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3] 

 </form>
 <div id="wishlist_block"></div>
 {/if}
 {if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
</div>
</div>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if (isset($quantity_discounts) && count($quantity_discounts) > 0)}
<!-- quantity discount -->
<ul class="idTabs clearfix">
<li><a href="#discount" style="cursor: pointer" class="selected">{l s='Quantity discount'}</a></li>
</ul>
<div id="quantityDiscount">
<table class="std">
    <thead>
	    <tr>
		    <th>{l s='product'}</th>
		    <th>{l s='from (qty)'}</th>
		    <th>{l s='discount'}</th>
	    </tr>
    </thead>
 <tbody>
	    <tr id="noQuantityDiscount">
		    <td colspan='3'>{l s='There is not any quantity discount for this product.'}</td>
	    </tr>
	    {foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
	    <tr id="quantityDiscount_{$quantity_discount.id_product_attribute}">
		    <td>
			    {if (isset($quantity_discount.attributes) && ($quantity_discount.attributes))}
				    {$product->getProductName($quantity_discount.id_product, $quantity_discount.id_product_attribute)}
			    {else}
				    {$product->getProductName($quantity_discount.id_product)}
			    {/if}
		    </td>
		    <td>{$quantity_discount.quantity|intval}</td>
		    <td>
			    {if $quantity_discount.price != 0 OR $quantity_discount.reduction_type == 'amount'}
				   -{convertPrice price=$quantity_discount.real_value|floatval}
			   {else}
				   -{$quantity_discount.real_value|floatval}%
			   {/if}
		    </td>
	    </tr>
	    {/foreach}
    </tbody>
</table>
</div>
{/if}
{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}[/size][/font][/color]

[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{if isset($packItems) && $packItems|@count > 0}
<div id="blockpack">
 <h2>{l s='Pack content'}</h2>
 {include file="$tpl_dir./product-list.tpl" products=$packItems}
</div>
{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]{/if}[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]

[Caracal]

Посмотрел... colorbox ты подключил.

 

У тебя ресайз не настроен. Идёшь в админке Preferences => Images, настраиваешь префиксы - и нормальные размеры.

- при наведении - картинка встает без префикса large . Всплывающие - без thilkbox

 

так вот примерно должно быть: http://s51.radikal.ru/i131/1211/91/4161d64a0f30.png

 

после перегенирируй все картинки.

 

и ещё у тебя откуда-то кириллические символы в адресах картинок.

[Violent]

Caracal,

Спасибо тебе за помощь, но ни один из методов к сожалению не сработал =(

Но за-то меня хорошо выручил модуль "Magic Zoom Plus" им и пользуюсь, если нужен обращайся

Еще раз спасибо)

[kipme]

Добрый день любители PS.

Попробовал данный хак с colorbox, подгружает но отваливаются другие скрипты )

Есть ли мануал как поставить colorbox полноценно?

Цель разные размеры у изображений, возможно есть альтернативный способ решения?

Спасибо.