Poszukałem troszkę na ten temat ale mam wciąż ogromny problem z dostosowaniem tego.
znalazłem instrukcję http://www.virtuemart.pl/forum/viewtopic.php?f=4&t=2878&p=8124&hilit=slimbox#p8124
zrobiłem tak jak radzą z tym, że zrobiłem to z slimbox2 i nie działa!
Gdy zrobiłem tak jak jest w tej instrukcji to zaczyna mi się otwierać obraz jako html i żeby powrócić do produktu muszę klikać wstecz w przeglądarce.
Na końcu tej instrukcji jest napisane:
Nalezy jednak pamietać aby przerobić skrypt tak aby reagował na wywołanie rel="lightbox" a nie rel="lytebox" (bez tej przeróbki skryptu konieczna staje sie dalsza ingerencja w pliki VM np flypage aby zmienić nazwe odnośsnika wywołujacego okno
No ale znalazłem w plikach od slimbox2 plik autoload.js i wydaje mi się, że on jest odpowiedzialny za to
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
tak od środka wygląda.
---------- Post dodany o 20:27 ---------- Poprzedni post był o 20:15 ----------
Chciałem też dokonać zmian w starej wersji slimboxa którą mam od początku z vm ale tam da się jedynie edytować wielkość diva który jest odpowiedzialny za wyświetlanie obrazka za pomocą css-a. Niestety nie wystarcza to gdyz powierzchnia diva się zmniejsza a zdjęcie jako, że jest tłem tego diva pozostaje tej samej wielkosci i jest ucięte. Odnośnie pliku slimbox.js to nie mogę się nic połapać o co tam chodzi bo wszystko jest pomieszane i z javą też u mnie slabo ale wygląda to tak:
/*
Slimbox v1.71 - The ultimate lightweight Lightbox clone
(c) 2007-2009 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
var Slimbox=(function(){var F=window,n=Browser.Engine.trident4,u,g,G=-1,o,w,E,v,y,M,s,m={},t=new Image(),K=new Image(),I,a,h,q,J,e,H,c,A,L,x,i,d,C;F.addEvent("domready",function(){$(document.body).adopt($$(I=new Element("div",{id:"lbOverlay",events:{click:D}}),a=new Element("div",{id:"lbCenter"}),H=new Element("div",{id:"lbBottomContainer"})).setStyle("display","none"));h=new Element("div",{id:"lbImage"}).injectInside(a).adopt(q=new Element("div",{styles:{position:"relative"}}).adopt(J=new Element("a",{id:"lbPrevLink",href:"#",events:{click:B}}),e=new Element("a",{id:"lbNextLink",href:"#",events:{click:f}})));c=new Element("div",{id:"lbBottom"}).injectInside(H).adopt(new Element("a",{id:"lbCloseLink",href:"#",events:{click:D}}),A=new Element("div",{id:"lbCaption"}),L=new Element("div",{id:"lbNumber"}),new Element("div",{styles:{clear:"both"}}))});function z(){var N=F.getScroll(),O=F.getSize();$$(a,H).setStyle("left",N.x+(O.x/2));if(v){I.setStyles({left:N.x,top:N.y,width:O.x, height:O.y})}}function l(N){["object",n?"select":"embed"].forEach(function(P){Array.forEach(document.getEle mentsByTagName(P),function(Q){if(N){Q._slimbox=Q.s tyle.visibility}Q.style.visibility=N?"hidden":Q._slimbox})});I.style.display=N?"":"none";var O=N?"addEvent":"removeEvent";F[O]("scroll",z)[O]("resize",z);document[O]("keydown",p)}function p(O){var N=O.code;return u.closeKeys.contains(N)?D():u.nextKeys.contains(N) ?f():u.previousKeys.contains(N)?B():false}function B(){return b(w)}function f(){return b(E)}function b(N){if(N>=0){G=N;o=g[N][0];w=(G||(u.loop?g.length:0))-1;E=((G+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";m=new Image();m.onload=k;m.src=o}return false}function k(){a.className="";d.set(0);h.setStyles({backgroundImage:"url("+o+")",display:""});q.setStyle("width",m.width);$$(q,J,e).setStyle("height",m.height);A.set("html",g[G][1]||"");L.set("html",(((g.length>1)&&u.counterText)||"").replace(/{x}/,G+1).replace(/{y}/,g.length));if(w>=0){t.src=g[w][0]}if(E>=0){K.src=g[E][0]}M=h.offsetWidth;s=h.offsetHeight;var P=Math.max(0,y-(s/2)),N=0,O;if(a.offsetHeight!=s){N=i.start({height: s,top:P})}if(a.offsetWidth!=M){N=i.start({width:M, marginLeft:-M/2})}O=function(){H.setStyles({width:M,top:P+s,marg inLeft:-M/2,visibility:"hidden",display:""});d.start(1)};if(N){i.chain(O)}else{O()}}function j(){if(w>=0){J.style.display=""}if(E>=0){e.style.display=""}C.set(-c.offsetHeight).start(0);H.style.visibility=""}function r(){m.onload=$empty;m.src=t.src=K.src=o;i.cancel() ;d.cancel();C.cancel();$$(J,e,h,H).setStyle("display","none")}function D(){if(G>=0){r();G=w=E=-1;a.style.display="none";x.cancel().chain(l).start(0)}return false}Element.implement({slimbox:function(N,O){$$( this).slimbox(N,O);return this}});Elements.implement({slimbox:function(N,Q,P ){Q=Q||function(R){return[R.href,R.title]};P=P||function(){return true};var O=this;O.removeEvents("click").addEvent("click",function(){var R=O.filter(P,this);return Slimbox.open(R.map(Q),R.indexOf(this),N)});return O}});return{open:function(P,O,N){u=$extend({loop:f alse,overlayOpacity:0.8,overlayFadeDuration:400,re sizeDuration:400,resizeTransition:false,initialWid th:250,initialHeight:250,imageFadeDuration:400,cap tionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},N||{});x=new Fx.Tween(I,{property:"opacity",duration:u.overlayFadeDuration});i=new Fx.Morph(a,$extend({duration:u.resizeDuration,link :"chain"},u.resizeTransition?{transition:u.resizeTransitio n}:{}));d=new Fx.Tween(h,{property:"opacity",duration:u.imageFadeDuration,onComplete:j});C=new Fx.Tween(c,{property:"margin-top",duration:u.captionAnimationDuration});if(typeof P=="string"){P=[[P,O]];O=0}y=F.getScrollTop()+(F.getHeight()/2);M=u.initialWidth;s=u.initialHeight;a.setStyles( {top:Math.max(0,y-(s/2)),width:M,height:s,marginLeft:-M/2,display:""});v=n||(I.currentStyle&&(I.currentStyle.position!="fixed"));if(v){I.style.position="absolute"}x.set(0).start(u.overlayOpacity);z();l(1);g=P;u.l oop=u.loop&&(g.length>1);return b(O)}}})();
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
Slimbox.scanPage = function() {
$$("a").filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
}).slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
};
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
window.addEvent("domready", Slimbox.scanPage);
}
Czy wie ktoś jak sobie z tym poradzić? Najlepszą opcją dla mnie byłoby gdyby zdjęcie dostosowywało się szerokością do wielkosci okna przeglądarki ale zaakceptuję już nawet taką opcję żeby zmienić szerokość zdjęcia tak by nie przekraczała 1000px na stałe do czasu aż nie znajdę lepszego rozwiązania.
Proszę o pomoc! Szukałem naprawdę ale widocznie jeszcze jestem za słaby żeby sobie z tym poradzić.
---------- Post dodany 22-11-2011 o 00:46 ---------- Poprzedni post był 21-11-2011 o 20:27 ----------
Uwziąłem się i postanowiłem zamienić standardowego Slimboxa na slimbox2 gdyż przeczytałem, że w slimbox nie można tak robić jak chcę.
Zrobiłem to tak:
1. Do folderu components/com_virtuemart/js/ wrzuciłem folder slimbox2 (zawierający: folder css/ , folder extra/ , folder js/ , folder src/ )
2. Następnie w administrator/components/com_virtuemart/classes pobrałem plik htmlTools.class.php i edytowałem go zgodnie z zaleceniami z instrukcji do której link opublikowałem wyzej w forum.
znalazłem fragment kodu:
function loadSlimBox( ) { global $mosConfig_live_site, $vm_mainframe; if( !defined( '_SLIMBOX_LOADED' )) { vmCommonHTML::loadMooTools(); // added by JK for loading mootoools 1.2 if configured in Joomla $jversion = new JVersion(); if ($jversion->RELEASE == '1.5' && $jversion->DEV_LEVEL >= 19 && JPluginHelper::isEnabled( 'system', 'mtupgrade' ) ) { $vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/\';'); $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/js/slimbox.js' ); $vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/css/slimbox.css' ); } else { $vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox/\';'); $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/js/slimbox.js' ); $vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/css/slimbox.css' ); } // added by JK for loading mootoools 1.2 if configured in Joomla ends define ( '_SLIMBOX_LOADED', '1' ); } }
i zamieniłem go na:
function loadSlimBox( ) { global $mosConfig_live_site, $vm_mainframe; if( !defined( '_SLIMBOX_LOADED' )) { vmCommonHTML::loadMooTools(); // added by JK for loading mootoools 1.2 if configured in Joomla $jversion = new JVersion(); if ($jversion->RELEASE == '1.5' && $jversion->DEV_LEVEL >= 19 && JPluginHelper::isEnabled( 'system', 'mtupgrade' ) ) { $vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/\';'); $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/js/slimbox.js' ); $vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox-1.71a/css/slimbox.css' ); } else { if(defined ('VM_SLIMBOX')): $vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox2/\';'); $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/'.VM_SLIMBOX.'/js/'.VM_SLIMBOX.'.js' ); $vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/'.VM_SLIMBOX.'/css/'.VM_SLIMBOX.'.css' ); else: $vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox/\';'); $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/js/slimbox.js' ); $vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/css/slimbox.css' ); endif; } // added by JK for loading mootoools 1.2 if configured in Joomla ends define ( '_SLIMBOX_LOADED', '1' ); } }
3. Następnie z administrator/components/com_virtuemart pobrałem plik virtuemart.cfg.php i dopisałem do niego
define('VM_SLIMBOX', 'slimbox2'); // slimbox , shadowbox ,lytebox
(było napisane, że mogę to zrobić gdziekolwiek więc wkleiłem to pod innymi define)
4. Ostatni punkt instrukcji mówi
Nalezy jednak pamietać aby przerobić skrypt tak aby reagował na wywołanie rel="lightbox" a nie rel="lytebox" (bez tej przeróbki skryptu konieczna staje sie dalsza ingerencja w pliki VM np flypage aby zmienić nazwe odnośsnika wywołujacego okno.
sprawdziłem w pliku slimbox2.js i na samym dole kodu jest rel="lytebox". Oto kod z pliku slimbox.js
/* Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery (c) 2007-2010 Christophe Beyls <http://www.digitalia.be> MIT-style license.*/(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:fals e,overlayOpacity:0.8,overlayFadeDuration:400,resiz eDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDurat ion:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({to p:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z ();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q ){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width :M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,t op:M},u.resizeDuration,u.resizeEasing)}if(a.offset Width!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(fun ction(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAni mationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDur ation,j)}return false}})(jQuery);
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); }); });}
I po tym wszystkim to powinno działać ale teraz po kliknięciu na zdjęcie otwiera się ono w przeglądarce jako plik a nie jako slimbox.
Czy ktoś by mógł sprawdzić co mogłem pomieszać? Co zrobiłem nie tak. Może przy slimbox2 jest inna procedura?
Pomocy jestem naprawdę zdesperowany i szukałem już chyba wszędzie.