Bumerang - Yazarkafe

Blogger Slayt Alanı Ekle-2

İlk anlattığımız slayt alanını görmediyseniz burdan ulaşabilirsiniz.İlk slayt alanı anlatımında slayt alanlarının, siteler ve bloglar için önemini anlattan kısa bir açıklama yapmıştık.Şimdi ise kullanım olarak aynı, tasarım olarak farklı olan ikinci blogger slayt alanı ekleme ile ilgili bir anlatım yapacağız.
Ekliyeceğimiz blogger slayt alanı demosu için tıklayın.
Blogunuza ekliyeceğimiz blogger slayt alanının anlatımını iki adımda yapacağız
1.Adım:Blogger hesabımızla giriş yapıyoruz.Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz,widget şablonlarını genişlet kutucuğunu işaretliyoruz.Ctrl+F yardımı ile kodlar içerisnde </head>kodunu aratıp buluyoruz ve aşşağıdaki kodu kopylayaıp bulduğumuz </head>kodundan önceki satıra yapıştırıyoruz
<script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('11.36=f 12({1M:11,a:{1m:"2s"},X:8(B,A){7.P("1v",8(){7.1w=(7.13["k"+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n("13");7.13=C||f 1c("3Y",{3Z:$1Y(7.e.40("14","1N"),{41:"42"})}).43(7.e);7.e.1Z("13",7.13).1d("14",0);7.l=[];7.1w=n},2s:8(){7.14="14-15";7.1x="21";7.k=7.e.2x},22:8(){7.14="14-16";7.1x="23";7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o"R":F=A;1f;o"3b":F=G;1f;o"1R":F=(7.13["k"+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h("R",A)},3d:8(A){c 7.h("3b",A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h("1R",A)}});1c.44.r={17:8(B){9 A=7.1n("r");b(A){A.Z()}c 7.3e("r").1Z("r:a",$1Y({2C:"Z"},B))},2D:8(A){b(A||!7.1n("r")){b(A||!7.1n("r:a")){7.17("r",A)}7.1Z("r",f 11.36(7,7.1n("r:a")))}c 7.1n("r")}};1c.1o({r:8(D,E){D=D||"1R";9 B=7.2D("r"),A;1Q(D){o"2A":B.2A(E);1f;o"2B":B.2B(E);1f;o"1R":9 C=7.1n("r:2E",B.1w);B[(C)?"3d":"3c"](E);7.1Z("r:2E",!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e("r:2E")}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!="e"){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P("h",8(){C.P("2F",D)},n);7.P("1v",8(){C.18("2F",D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])=="2G")?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h("1A",j)},4b:8(){c 7.h(j,"1B")},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F[B]=7.Q(A[B],E[B],I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F[B]);A[B]=E.4g;G[B]=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:"4i",1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:"16",y:"15"}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A=="4l"||A=="4m")?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?"4o":"2b";7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P("2b",7.v.h);c 7},4p:8(){7.2O.18("2b",7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u("4q",7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B--;B){b($1z(A[D][B])){7.m[D][B]=$2Q(A[D][B])()}}}}b($10(7.a.1g)=="2G"){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u("h",7.e).u("1p",7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U[B]){3m}7.p.l[B]=7.19.l[B]-7.19.2P[B];b(7.a.29){7.p.l[B]*=-1}b(7.a.m&&7.m[B]){b($1z(7.m[B][1])&&(7.p.l[B]>7.m[B][1])){7.p.l[B]=7.m[B][1]}s{b($1z(7.m[B][0])&&(7.p.l[B]<7.m[B][0])){7.p.l[B]=7.m[B][0]}}}b(7.a.1g[B]){7.p.l[B]-=(7.p.l[B]%7.a.1g[B])}b(7.a.2M){7.e.1d(7.a.U[B],7.p.l[B]+7.a.2I)}s{7.e[7.a.U[B]]=7.p.l[B]}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u("4x",[7.e,7.1s])}b(A){7.1s=A;7.u("4y",[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u("4z",[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A=="{}"){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A[B]=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C="1G";B=1y.2i(Y,0,3)}s{b(4J B=="4K"){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||"1G";1Q(C){o"q":9 A=B;B=B.1T();B.q=A;1f;o"2V":B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())=="2G")?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J[B]=7.1J[B]||{};7.1I[B]=7.1I[B]||[];b(7.1I[B].3B(A)){c j}s{7.1I[B].26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C][B]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u("3U",7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n<0):(A.2n>0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u("3V",[A.x+D.x,A.y+D.y])}}});',62,339,'|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client'.split('|'),0,{}))

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[

/*
This file is part of JonDesign's SmoothGallery v2.1beta1.

JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
       - Nitrix (bugfix)
       - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
       - Archie Cowan for helping me find a bugfix on carousel inner width problem.
       - Tomocchino from #mootools for the preloader class
       Many thanks to:
       - The mootools team for the great mootools lib, and it's help and support throughout the project.
       - Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/

/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
       return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
       getPosition: function(relative){
               if (isBody(this)) return {x: 0, y: 0};
               var el = this, position = {x: 0, y: 0};
               while (el){
                       position.x += el.offsetLeft;
                       position.y += el.offsetTop;
                       el = el.offsetParent;
               }
               var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
               return {x: position.x - rpos.x, y: position.y - rpos.y};
       }
});

// declaring the class
var gallery = {
       Implements: [Events, Options],
       options: {
               showArrows: true,
               showCarousel: true,
               showInfopane: true,
               embedLinks: true,
               fadeDuration: 500,
               timed: false,
               delay: 9000,
               preloader: true,
               preloaderImage: true,
               preloaderErrorImage: true,
               /* Data retrieval */
               manualData: [],
               populateFrom: false,
               populateData: true,
               destroyAfterPopulate: true,
               elementSelector: "div.imageElement",
               titleSelector: "h3",
               subtitleSelector: "p",
               linkSelector: "a.open",
               imageSelector: "img.full",
               thumbnailSelector: "img.thumbnail",
               defaultTransition: "fade",
               /* InfoPane options */
               slideInfoZoneOpacity: 0.7,
               slideInfoZoneSlide: true,
               /* Carousel options */
               carouselMinimizedOpacity: 0.4,
               carouselMinimizedHeight: 20,
               carouselMaximizedOpacity: 0.9,
               thumbHeight: 75,
               thumbWidth: 100,
               thumbSpacing: 10,
               thumbIdleOpacity: 0.2,
               textShowCarousel: 'Pictures',
               showCarouselLabel: true,
               thumbCloseCarousel: true,
               useThumbGenerator: false,
               thumbGenerator: 'resizer.php',
               useExternalCarousel: false,
               carouselElement: false,
               carouselHorizontal: true,
               activateCarouselScroller: true,
               carouselPreloader: true,
               textPreloadingCarousel: 'Loading...',
               /* CSS Classes */
               baseClass: 'jdGallery',
               withArrowsClass: 'withArrows',
               /* Plugins: HistoryManager */
               useHistoryManager: false,
               customHistoryKey: false,
               /* Plugins: ReMooz */
               useReMooz: false
       },
       initialize: function(element, options) {
               this.setOptions(options);
               this.fireEvent('onInit');
               this.currentIter = 0;
               this.lastIter = 0;
               this.maxIter = 0;
               this.galleryElement = element;
               this.galleryData = this.options.manualData;
               this.galleryInit = 1;
               this.galleryElements = Array();
               this.thumbnailElements = Array();
               this.galleryElement.addClass(this.options.baseClass);

               if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
                       this.options.defaultTransition="crossfade";

               this.populateFrom = element;
               if (this.options.populateFrom)
                       this.populateFrom = this.options.populateFrom;
               if (this.options.populateData)
                       this.populateData();
               element.style.display="block";

               if (this.options.useHistoryManager)
                       this.initHistory();

               if ((this.options.embedLinks)|(this.options.useReMooz))
               {
                       this.currentLink = new Element('a').addClass('open').setProperties({
                               href: '#',
                               title: ''
                       }).injectInside(element);
                       if ((!this.options.showArrows) && (!this.options.showCarousel))
                               this.galleryElement = element = this.currentLink;
                       else
                               this.currentLink.setStyle('display', 'none');
               }

               this.constructElements();
               if ((this.galleryData.length>1)&&(this.options.showArrows))
               {
                       var leftArrow = new Element('a').addClass('left').addEvent(
                               'click',
                               this.prevItem.bind(this)
                       ).injectInside(element);
                       var rightArrow = new Element('a').addClass('right').addEvent(
                               'click',
                               this.nextItem.bind(this)
                       ).injectInside(element);
                       this.galleryElement.addClass(this.options.withArrowsClass);
               }
               this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
               if (this.options.showInfopane) this.initInfoSlideshow();
               if (this.options.showCarousel) this.initCarousel();
               this.doSlideShow(1);
       },
       populateData: function() {
               currentArrayPlace = this.galleryData.length;
               options = this.options;
               var data = $A(this.galleryData);
               data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
               this.galleryData = data;
               this.fireEvent('onPopulated');
       },
       populateGallery: function(element, startNumber) {
               var data = [];
               options = this.options;
               currentArrayPlace = startNumber;
               element.getElements(options.elementSelector).each(function(el) {
                       elementDict = $H({
                               image: el.getElement(options.imageSelector).getProperty('src'),
                               number: currentArrayPlace,
                               transition: this.options.defaultTransition
                       });
                       if ((options.showInfopane) | (options.showCarousel))
                               elementDict.extend({
                                       title: el.getElement(options.titleSelector).innerHTML,
                                       description: el.getElement(options.subtitleSelector).innerHTML
                               });
                       if ((options.embedLinks) | (options.useReMooz))
                               elementDict.extend({
                                       link: el.getElement(options.linkSelector).href||false,
                                       linkTitle: el.getElement(options.linkSelector).title||false,
                                       linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
                               });
                       if ((!options.useThumbGenerator) && (options.showCarousel))
                               elementDict.extend({
                                       thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
                               });
                       else if (options.useThumbGenerator)
                               elementDict.extend({
                                       thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
                               });

                       data.extend([elementDict]);
                       currentArrayPlace++;
                       if (this.options.destroyAfterPopulate)
                               el.dispose();
               });
               return data;
       },
       constructElements: function() {
               el = this.galleryElement;
               if (this.options.embedLinks && (!this.options.showArrows))
                       el = this.currentLink;
               this.maxIter = this.galleryData.length;
               var currentImg;
               for(i=0;i<this.galleryData.length;i++)
               {
                       var currentImg = new Fx.Morph(
                               new Element('div').addClass('slideElement').setStyles({
                                       'position':'absolute',
                                       'left':'0px',
                                       'right':'0px',
                                       'margin':'0px',
                                       'padding':'0px',
                                       'backgroundPosition':"center center",
                                       'opacity':'0'
                               }).injectInside(el),
                               {duration: this.options.fadeDuration}
                       );
                       if (this.options.preloader)
                       {
                               currentImg.source = this.galleryData[i].image;
                               currentImg.loaded = false;
                               currentImg.load = function(imageStyle, i) {
                                       if (!imageStyle.loaded)        {
                                               this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
                                           'onload'  : function(img, i){
                                                                                                       img.element.setStyle(
                                                                                                       'backgroundImage',
                                                                                                       "url('" + img.source + "')")
                                                                                                       img.loaded = true;
                                                                                                       img.width = this.galleryData[i].imgloader.width;
                                                                                                       img.height = this.galleryData[i].imgloader.height;
                                                                                               }.pass([imageStyle, i], this)
                                               });
                                       }
                               }.pass([currentImg, i], this);
                       } else {
                               currentImg.element.setStyle('backgroundImage',
                                                                       "url('" + this.galleryData[i].image + "')");
                       }
                       this.galleryElements[parseInt(i)] = currentImg;
               }
       },
       destroySlideShow: function(element) {
               var myClassName = element.className;
               var newElement = new Element('div').addClass('myClassName');
               element.parentNode.replaceChild(newElement, element);
       },
       startSlideShow: function() {
               this.fireEvent('onStart');
               this.loadingElement.style.display = "none";
               this.lastIter = this.maxIter - 1;
               this.currentIter = 0;
               this.galleryInit = 0;
               this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
               if (this.options.showInfopane)
                       this.showInfoSlideShow.delay(1000, this);
               if (this.options.useReMooz)
                       this.makeReMooz.delay(1000, this);
               var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
               if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
                       this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
               this.prepareTimer();
               if (this.options.embedLinks)
                       this.makeLink(this.currentIter);
       },
       nextItem: function() {
               this.fireEvent('onNextCalled');
               this.nextIter = this.currentIter+1;
               if (this.nextIter >= this.maxIter)
                       this.nextIter = 0;
               this.galleryInit = 0;
               this.goTo(this.nextIter);
       },
       prevItem: function() {
               this.fireEvent('onPreviousCalled');
               this.nextIter = this.currentIter-1;
               if (this.nextIter <= -1)
                       this.nextIter = this.maxIter - 1;
               this.galleryInit = 0;
               this.goTo(this.nextIter);
       },
       goTo: function(num) {
               this.clearTimer();
               if(this.options.preloader)
               {
                       this.galleryElements[num].load();
                       if (num==0)
                               this.galleryElements[this.maxIter - 1].load();
                       else
                               this.galleryElements[num - 1].load();
                       if (num==(this.maxIter - 1))
                               this.galleryElements[0].load();
                       else
                               this.galleryElements[num + 1].load();

               }
               if (this.options.embedLinks)
                       this.clearLink();
               if (this.options.showInfopane)
               {
                       this.slideInfoZone.clearChain();
                       this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
               } else
                       this.currentChangeDelay = this.changeItem.delay(500, this, num);
               if (this.options.embedLinks)
                       this.makeLink(num);
               this.prepareTimer();
               /*if (this.options.showCarousel)
                       this.clearThumbnailsHighlights();*/
       },
       changeItem: function(num) {
               this.fireEvent('onStartChanging');
               this.galleryInit = 0;
               if (this.currentIter != num)
               {
                       for(i=0;i<this.maxIter;i++)
                       {
                               if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
                       }
                       gallery.Transitions[this.galleryData[num].transition].pass([
                               this.galleryElements[this.currentIter],
                               this.galleryElements[num],
                               this.currentIter,
                               num], this)();
                       this.currentIter = num;
                       if (this.options.useReMooz)
                               this.makeReMooz();
               }
               var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
               if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
                       this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
               this.doSlideShow.bind(this)();
               this.fireEvent('onChanged');
       },
       clearTimer: function() {
               if (this.options.timed)
                       $clear(this.timer);
       },
       prepareTimer: function() {
               if (this.options.timed)
                       this.timer = this.nextItem.delay(this.options.delay, this);
       },
       doSlideShow: function(position) {
               if (this.galleryInit == 1)
               {
                       imgPreloader = new Image();
                       imgPreloader.onload=function(){
                               this.startSlideShow.delay(10, this);
                       }.bind(this);
                       imgPreloader.src = this.galleryData[0].image;
                       if(this.options.preloader)
                               this.galleryElements[0].load();
               } else {
                       if (this.options.showInfopane)
                       {
                               if (this.options.showInfopane)
                               {
                                       this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
                               } else
                                       if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
                                               this.centerCarouselOn(position);
                       }
               }
       },
       createCarousel: function() {
               var carouselElement;
               if (!this.options.useExternalCarousel)
               {
                       var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
                       this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
                       this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
                       this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
                       this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
                               title: this.options.textShowCarousel
                       }).injectInside(carouselContainerElement);
                       if(this.options.carouselPreloader)
                               this.carouselBtn.set('html', this.options.textPreloadingCarousel);
                       else
                               this.carouselBtn.set('html', this.options.textShowCarousel);
                       this.carouselBtn.addEvent(
                               'click',
                               function () {
                                       this.carouselContainer.cancel();
                                       this.toggleCarousel();
                               }.bind(this)
                       );
                       this.carouselActive = false;

                       carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
                       this.carousel = new Fx.Morph(carouselElement);
               } else {
                       carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
               }
               this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
               this.carouselElement.normalHeight = carouselElement.offsetHeight;
               if (this.options.showCarouselLabel)
                       this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
               carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
               this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
               this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
               this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
               if (this.options.activateCarouselScroller)
               {
                       this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
                               area: 100,
                               velocity: 0.2
                       })

                       this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
                               duration: 400,
                               onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
                               onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
                       });
               }
       },
       fillCarousel: function() {
               this.constructThumbnails();
               this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
               if (this.options.carouselHorizontal)
                       this.carouselInner.style.width = this.carouselInner.normalWidth;
       },
       initCarousel: function () {
               this.createCarousel();
               this.fillCarousel();
               if (this.options.carouselPreloader)
                       this.preloadThumbnails();
       },
       flushCarousel: function() {
               this.thumbnailElements.each(function(myFx) {
                       myFx.element.dispose();
                       myFx = myFx.element = null;
               });
               this.thumbnailElements = [];
       },
       toggleCarousel: function() {
               if (this.carouselActive)
                       this.hideCarousel();
               else
                       this.showCarousel();
       },
       showCarousel: function () {
               this.fireEvent('onShowCarousel');
               this.carouselContainer.start({
                       'opacity': this.options.carouselMaximizedOpacity,
                       'top': 0
               }).chain(function() {
                       this.carouselActive = true;
                       this.carouselWrapper.scroller.start();
                       this.fireEvent('onCarouselShown');
                       this.carouselContainer.options.onComplete = null;
               }.bind(this));
       },
       hideCarousel: function () {
               this.fireEvent('onHideCarousel');
               var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
               this.carouselContainer.start({
                       'opacity': this.options.carouselMinimizedOpacity,
                       'top': targetTop
               }).chain(function() {
                       this.carouselActive = false;
                       this.carouselWrapper.scroller.stop();
                       this.fireEvent('onCarouselHidden');
                       this.carouselContainer.options.onComplete = null;
               }.bind(this));
       },
       constructThumbnails: function () {
               element = this.carouselInner;
               for(i=0;i<this.galleryData.length;i++)
               {
                       var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
                                       backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
                                       backgroundPosition: "center center",
                                       backgroundRepeat: 'no-repeat',
                                       marginLeft: this.options.thumbSpacing + "px",
                                       width: this.options.thumbWidth + "px",
                                       height: this.options.thumbHeight + "px"
                               }).injectInside(element), {duration: 200}).start({
                                       'opacity': this.options.thumbIdleOpacity
                               });
                       currentImg.element.addEvents({
                               'mouseover': function (myself) {
                                       myself.cancel();
                                       myself.start({'opacity': 0.99});
                                       if (this.options.showCarouselLabel)
                                               $(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
                               }.pass(currentImg, this),
                               'mouseout': function (myself) {
                                       myself.cancel();
                                       myself.start({'opacity': this.options.thumbIdleOpacity});
                               }.pass(currentImg, this),
                               'click': function (myself) {
                                       this.goTo(myself.relatedImage.number);
                                       if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
                                               this.hideCarousel();
                               }.pass(currentImg, this)
                       });

                       currentImg.relatedImage = this.galleryData[i];
                       this.thumbnailElements[parseInt(i)] = currentImg;
               }
       },
       log: function(value) {
               if(console.log)
                       console.log(value);
       },
       preloadThumbnails: function() {
               var thumbnails = [];
               for(i=0;i<this.galleryData.length;i++)
               {
                       thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
               }
               this.thumbnailPreloader = new Preloader();
               if (!this.options.useExternalCarousel)
                       this.thumbnailPreloader.addEvent('onComplete', function() {
                               var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
                               this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
                       }.bind(this));
               this.thumbnailPreloader.load(thumbnails);
       },
       clearThumbnailsHighlights: function()
       {
               for(i=0;i<this.galleryData.length;i++)
               {
                       this.thumbnailElements[i].cancel();
                       this.thumbnailElements[i].start(0.2);
               }
       },
       changeThumbnailsSize: function(width, height)
       {
               for(i=0;i<this.galleryData.length;i++)
               {
                       this.thumbnailElements[i].cancel();
                       this.thumbnailElements[i].element.setStyles({
                               'width': width + "px",
                               'height': height + "px"
                       });
               }
       },
       centerCarouselOn: function(num) {
               if (!this.carouselWallMode)
               {
                       var carouselElement = this.thumbnailElements[num];
                       var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
                       var carouselWidth = this.carouselWrapper.element.offsetWidth;
                       var carouselInnerWidth = this.carouselInner.offsetWidth;
                       var diffWidth = carouselWidth / 2;
                       var scrollPos = position-diffWidth;
                       this.carouselWrapper.elementScroller.start(scrollPos,0);
               }
       },
       initInfoSlideshow: function() {
               /*if (this.slideInfoZone.element)
                       this.slideInfoZone.element.remove();*/
               this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
               var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
               var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
               this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
               this.slideInfoZone.element.setStyle('opacity',0);
       },
       changeInfoSlideShow: function()
       {
               this.hideInfoSlideShow.delay(10, this);
               this.showInfoSlideShow.delay(500, this);
       },
       showInfoSlideShow: function() {
               this.fireEvent('onShowInfopane');
               this.slideInfoZone.cancel();
               element = this.slideInfoZone.element;
               element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
               element.getElement('p').set('html', this.galleryData[this.currentIter].description);
               if(this.options.slideInfoZoneSlide)
                       this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
               else
                       this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
               if (this.options.showCarousel)
                       this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
               return this.slideInfoZone;
       },
       hideInfoSlideShow: function() {
               this.fireEvent('onHideInfopane');
               this.slideInfoZone.cancel();
               if(this.options.slideInfoZoneSlide)
                       this.slideInfoZone.start({'opacity': 0, 'height': 0});
               else
                       this.slideInfoZone.start({'opacity': 0});
               return this.slideInfoZone;
       },
       makeLink: function(num) {
               this.currentLink.setProperties({
                       href: this.galleryData[num].link,
                       title: this.galleryData[num].linkTitle
               })
               if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
                       this.currentLink.setStyle('display', 'block');
       },
       clearLink: function() {
               this.currentLink.setProperties({href: '', title: ''});
               if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
                       this.currentLink.setStyle('display', 'none');
       },
       makeReMooz: function() {
               this.currentLink.setProperties({
                       href: '#'
               });
               this.currentLink.setStyles({
                       'display': 'block'
               });

               this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
               this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
                       link: this.galleryData[this.currentIter].link,
                       shadow: false,
                       dragging: false,
                       addClick: false,
                       resizeOpacity: 1
               });
               var img = this.galleryElements[this.currentIter];
               var coords = img.element.getCoordinates();
               delete coords.right;
               delete coords.bottom;

               widthDiff = coords.width - img.width;
               heightDiff = coords.height - img.height;

               coords.width = img.width;
               coords.height = img.height;

               coords.left += Math.ceil(widthDiff/2)+1;
               coords.top += Math.ceil(heightDiff/2)+1;

               this.ReMooz.getOriginCoordinates = function(coords) {
                       return coords;
               }.bind(this, coords);
               this.currentLink.onclick = function () {
                       this.ReMooz.open.bind(this.ReMooz)();
                       return false;
               }.bind(this);
       },
       /* To change the gallery data, those two functions : */
       flushGallery: function() {
               this.galleryElements.each(function(myFx) {
                       myFx.element.dispose();
                       myFx = myFx.element = null;
               });
               this.galleryElements = [];
       },
       changeData: function(data) {
               this.galleryData = data;
               this.clearTimer();
               this.flushGallery();
               if (this.options.showCarousel) this.flushCarousel();
               this.constructElements();
               if (this.options.showCarousel) this.fillCarousel();
               if (this.options.showInfopane) this.hideInfoSlideShow();
               this.galleryInit=1;
               this.lastIter=0;
               this.currentIter=0;
               this.doSlideShow(1);
       },
       /* Plugins: HistoryManager */
       initHistory: function() {
               this.fireEvent('onHistoryInit');
               this.historyKey = this.galleryElement.id + '-picture';
               if (this.options.customHistoryKey)
                       this.historyKey = this.options.customHistoryKey;

               this.history = new History.Route({
                       defaults: [1],
                       pattern: this.historyKey + '\\((\\d+)\\)',
                       generate: function(values) {
                               return [this.historyKey, '(', values[0], ')'].join('')
                       }.bind(this),
                       onMatch: function(values, defaults) {
                               if (parseInt(values[0])-1 < this.maxIter)
                                       this.goTo(parseInt(values[0])-1);
                       }.bind(this)
               });
               this.addEvent('onChanged', function(){
                       this.history.setValue(0, this.currentIter+1);
                       this.history.defaults=[this.currentIter+1];
               }.bind(this));
               this.fireEvent('onHistoryInited');
       }
};
gallery = new Class(gallery);

gallery.Transitions = new Hash ({
       fade: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
               if (newPos > oldPos) newFx.start({opacity: 1});
               else
               {
                       newFx.set({opacity: 1});
                       oldFx.start({opacity: 0});
               }
       },
       crossfade: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
               newFx.start({opacity: 1});
               oldFx.start({opacity: 0});
       },
       fadebg: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
               oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
       }
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({

Implements: [Events, Options],

options: {
root        : '',
period      : 100
},

initialize: function(options){
this.setOptions(options);
},

load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;

this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);

this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},

progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},

complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},

cancel: function(){
$clear(this.timer);
}

});

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
       var num = arguments.length;
       var oStr = arguments[0];
       for (var i = 1; i < num; i++) {
               var pattern = "\\{" + (i-1) + "\\}";
               var re = new RegExp(pattern, "g");
               oStr = oStr.replace(re, arguments[i]);
       }
       return oStr;
}

//]]>
</script>
<style type='text/css'>
#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;}

.jdGallery a{outline:0;}

.jdGallery{overflow: hidden;position: relative;}

.jdGallery img{border: 0;margin: 0;}

.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url('');}

.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}

* html .jdGallery .slideInfoZone{bottom: -1px;}

.jdGallery .slideInfoZone h2
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;margin: 2px 5px;font-weight: bold;color: #ff9000 !important;}

.jdGallery .slideInfoZone h2 a
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;font-weight: bold;color: #ff9000 !important;}

.jdGallery .slideInfoZone p
{padding: 0;font-size: 12px;margin: 2px 5px;color: #eee;}

</style>
Not:Kod içerisinde kırmızı renkli olarak yazdığımız width:515px(genişlik) ve mavi renkle yazdığımız height:200px(yükseklik) değerlerini değiştirerek slayt alanını kendi isteğinize göre boyutlandırabilirsiniz,tabiki resim boyutunuzuda burdaki genişliğe göre seçmelisiniz.Gerekli düzenlemeleri yaptıktan sonra şablonumuzu kaydediyoruz.
2.Adım:Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.Aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıp kaydediyoruz.
"
<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-1</a></h3><p>Açıklama-1</p><a href="#" class="open"></a><img src="http://img406.imageshack.us/img406/6923/1kopya.png" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-2</a></h3><p>Açıklama-2</p><a href="#" class="open"></a><img src="http://img710.imageshack.us/img710/7937/2kopya.png" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-3</a></h3><p>Açıklama-3</p><a href="#" class="open"></a><img src="http://img641.imageshack.us/img641/9088/3kopya.png" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-4</a></h3><p>Açıklama-4</p><a href="#" class="open"></a><img src="http://img684.imageshack.us/img684/9356/4kopya.png" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-5</a></h3><p>Açıklama-5</p><a href="#" class="open"></a><img src="http://img204.imageshack.us/img204/3083/6kopya.png" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="http://blogokulu.blogspot.com">BAŞLIK-6</a></h3><p>Açıklama-6</p><a href="#" class="open"></a><img src="http://img842.imageshack.us/img842/5427/5kopya.png" class="full" alt="" /></div>

</div>
"
Kod içerisinde kırmızı renkle yazdığımız delay : 5000 değerini değiştirerek slayt geçiş hızını ayarlayabilirsiniz.
http://blogokulu.blogspot.com: Buraya başlığa tıklayınca açılmasını istediğiniz yazının linkini yazıyorsunuz.
BASLIK-1 : Resim üzerinde görünecek olan başlığınızı  yazıyorsunuz.
Aciklama:Resmin üzerinde görünecek olan kısa açıklmayı buraya yazıyorsunuz.
http://img406.imageshack.us/img406/6923/1kopya.png:Buraya slayt alanında görüntülemek istediğiniz resmin URL sini yazıyorsunuz.
Gerekli düzenlemeleri yaptıktan sonra,gadgetimizi kaydediyoruz ve Blog Kayıtlarının üzerine yada şablonumuzun en üstüne gelecek şekilde veya blogumuzda görünmesini istediğimiz yere sürükleyip bırakıyoruz.Yeni slayt alanımız kullanıma hazır.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

15 yorum:

  1. bır soru sorabılırmıyım

    YanıtlaSil
  2. blogumun bır kosesıne resımlerımı koymak ıstıyorum ancak RESIMLERIM dıye bır baslık atıp resımler ona tıkladıgında görünmesini istiyorum yardım

    YanıtlaSil
  3. Soru sorabilirmiyim diye sormanıza gerek yok,sorabilirsiniz tabiki.
    1-Resimlerinizi yeni bir sayfa açarak yada yeni bir yazı olarak blogunuza kaydedip yayınlayın.
    2-Görüntülemek istediğiniz resimlerin bulunduğu yazınıza ait linki kopyalayın.
    3-Kumanda Pnaeli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetin içine yapıştırın.
    <center><a href="http://blogokulu.blogspot.com"><span style="font-weight: bold;">RESİMLERİM</span></a></center>

    kod içerisine http://blogokulu.blogspot.com adresi yerine ikinci adımda kopyaladığınız resimlerinize ait linkinizi yapıştırın ve gadgeti görünmesini istediğiniz yere sürükleyip bırakın.
    bilmem anlatabildimmi?

    YanıtlaSil
  4.  evet anladım blog içeri ile ilgili ıkı sorum daha olcak yenı bır tema yukledım baslıkları soyle GÜNLÜK  KİŞİSEL  FİLM E-KİTAP  SOSYAL VS bunlara kendime göre nasıl  düzenleyebılırım daha yenı basladım da bu ıse

    YanıtlaSil
  5. blog adresinizi verin bir bakalım.

    YanıtlaSil
  6. cevap yokmu abı

    YanıtlaSil
  7. ANALDIM ORNEK İLETİŞİM BUNUN İÇİNE KENDI BILGILERIMI NASIL EKLEYECEGIM ONU OGRENMEK ISTIYORUM

    YanıtlaSil
  8.  PARDON AZ ÖNCE YANLIS SORDUM RESİMLE İLGİLİ BEN BLOGUMUN  SAG KOSESINE RESIM ALANI EKLEMEK ISTIYORUM KARE ICINDE GORUNECEK HEPSI NASILN YAPILDIGINI SOYLERMISINIZ

    YanıtlaSil
  9.  SON OLARAK BIR SORUM DAHA OLACAK SORDUGUM SORULARI CEVAPLARSANIZ COK SEVIRIM DAHA DA SORU SORMAM :) SON OLARAK HAREKETLI REKLAM YAYINLAMAK ISTIYORUM BLOGUMUN SAYFASINDA ONUN KODUNU NASIL BULABILRIM YADA NERDEN BULABILIRIM

    YanıtlaSil
  10. 1.resim eklentisi burdan
    2.resim eklentisinide burdanekliyebilirsin,hangisini beğenirsen ekle.

    YanıtlaSil
  11. Normalde reklamı veren şirketler bannerlarını kendileri yaparlar ve kodu kendileri verirler zaten.
     Bu soruyu tam anlamadım?
    Kendin hareketli reklam mı yapmak istiyorsun?

    YanıtlaSil
  12. dun kı sorum cevaplanmamıstı cevap atarmısın admın

    YanıtlaSil
  13. tekrar sorayım blogumda reklam yayınlıyorum ana sayfa da tam ıstedıgım gıbı yanya duruyor ancak sag kösede yayınladıgım reklamların aynısı cıkıyor onlar gorunsun ıstemıyorum mesela sizin popüler yayınlar baslık atmıssınız altına bır suru sey eklemıssınız bunu nasıl yapabılırım ben bunu ögrenmek ıstıyorum sızden cevap yazarsanız sevınırım

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...