From c6e3c89b7c05c2f630eaac1cd736b9b3da6c597a Mon Sep 17 00:00:00 2001 From: bugron Date: Mon, 14 Sep 2015 21:10:28 +0400 Subject: [PATCH] adds ability to 1-click expand images --- public/js/lib/lightbox2/dist/css/lightbox.css | 210 ++++++++++++++++++ public/js/lib/lightbox2/dist/images/close.png | Bin 0 -> 280 bytes .../js/lib/lightbox2/dist/images/loading.gif | Bin 0 -> 8476 bytes public/js/lib/lightbox2/dist/images/next.png | Bin 0 -> 1350 bytes public/js/lib/lightbox2/dist/images/prev.png | Bin 0 -> 1360 bytes .../js/lib/lightbox2/dist/js/lightbox.min.js | 13 ++ seed/challenges/bootstrap.json | 8 +- seed/challenges/html5-and-css.json | 4 +- server/views/coursewares/showHTML.jade | 2 + 9 files changed, 231 insertions(+), 6 deletions(-) create mode 100644 public/js/lib/lightbox2/dist/css/lightbox.css create mode 100644 public/js/lib/lightbox2/dist/images/close.png create mode 100644 public/js/lib/lightbox2/dist/images/loading.gif create mode 100644 public/js/lib/lightbox2/dist/images/next.png create mode 100644 public/js/lib/lightbox2/dist/images/prev.png create mode 100644 public/js/lib/lightbox2/dist/js/lightbox.min.js diff --git a/public/js/lib/lightbox2/dist/css/lightbox.css b/public/js/lib/lightbox2/dist/css/lightbox.css new file mode 100644 index 0000000000..e48791aa26 --- /dev/null +++ b/public/js/lib/lightbox2/dist/css/lightbox.css @@ -0,0 +1,210 @@ +/* Preload images */ +body:after { + content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png); + display: none; +} + +.lightboxOverlay { + position: absolute; + top: 0; + left: 0; + z-index: 9999; + background-color: black; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + opacity: 0.8; + display: none; +} + +.lightbox { + position: absolute; + left: 0; + width: 100%; + z-index: 10000; + text-align: center; + line-height: 0; + font-weight: normal; +} + +.lightbox .lb-image { + display: block; + height: auto; + max-width: inherit; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; +} + +.lightbox a img { + border: none; +} + +.lb-outerContainer { + position: relative; + background-color: white; + *zoom: 1; + width: 250px; + height: 250px; + margin: 0 auto; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} + +.lb-outerContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-container { + padding: 4px; +} + +.lb-loader { + position: absolute; + top: 43%; + left: 0; + height: 25%; + width: 100%; + text-align: center; + line-height: 0; +} + +.lb-cancel { + display: block; + width: 32px; + height: 32px; + margin: 0 auto; + background: url(../images/loading.gif) no-repeat; +} + +.lb-nav { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 10; +} + +.lb-container > .nav { + left: 0; +} + +.lb-nav a { + outline: none; + background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); +} + +.lb-prev, .lb-next { + height: 100%; + cursor: pointer; + display: block; +} + +.lb-nav a.lb-prev { + width: 34%; + left: 0; + float: left; + background: url(../images/prev.png) left 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; +} + +.lb-nav a.lb-prev:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-nav a.lb-next { + width: 64%; + right: 0; + float: right; + background: url(../images/next.png) right 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; +} + +.lb-nav a.lb-next:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-dataContainer { + margin: 0 auto; + padding-top: 5px; + *zoom: 1; + width: 100%; + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.lb-dataContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-data { + padding: 0 4px; + color: #ccc; +} + +.lb-data .lb-details { + width: 85%; + float: left; + text-align: left; + line-height: 1.1em; +} + +.lb-data .lb-caption { + font-size: 13px; + font-weight: bold; + line-height: 1em; +} + +.lb-data .lb-number { + display: block; + clear: left; + padding-bottom: 1em; + font-size: 12px; + color: #999999; +} + +.lb-data .lb-close { + display: block; + float: right; + width: 30px; + height: 30px; + background: url(../images/close.png) top right no-repeat; + text-align: right; + outline: none; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + opacity: 0.7; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.lb-data .lb-close:hover { + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} diff --git a/public/js/lib/lightbox2/dist/images/close.png b/public/js/lib/lightbox2/dist/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..20baa1db5fdf9e22655a0f851c4401d36b9e7ef9 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i3?z4Pv7`ejn*g5>*Z=?j1DSvS{%vY%YG`Nx zvLV3R+Z)1I1qQoz?eg;S^6>Bg3hv&$d*{xbK#iaC4$A=f!X-g|!3vbDHnnh5Xg#OL;K8su!;fw4MC7hH<+BPou~5EnOggc)I$z JtaD0e0ssdsYEA$E literal 0 HcmV?d00001 diff --git a/public/js/lib/lightbox2/dist/images/loading.gif b/public/js/lib/lightbox2/dist/images/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..5087c2a644223a95984baefdb74f39a287fdfd9a GIT binary patch literal 8476 zcmai(X;@SD*7mdaPWF^(CxkH}*_lX!K*CT(AL|K8(1566s6|hY4TvpP+s4^C)C7Wr zL1l;vYGn`*XPj}MhDk+1K~T|Jjbp7%Dcb>C}3 z!uZ(H86=IQy^NqeeE9IjjT=2ZJ*Q5cI(qcz{{8z8A3l8I#EH(%&c43B!NI}S*490H z_8dEQtgEZ5uCA`WzP_fW=FXivj~+dG`t<382M?YEiL{1{S6HbmoHzguC6|R{`|#@7q4Eu+TPy&`t|F_ zj~{!z-l3tP#>U2b_wH@lw5hVPa?6%2zyJO_?f>_Y{?42npO$Kjv&2V5=pcalzVx4T z453BP!ruJ$&EM3+zw0;J%yf*i*^*_PJLVsSSr1?0*w*y98GnCRe89U~uLuhBbEOTg z@7p~=dTHjkb%XNNFKtcNbOB#1n}fmhJOs}vi~u;Om;-`x4NmfXeFT01{{Df1a{y@m zlEopxMG<7MR-q;KGd|pD09Y$mvJX%BfFV+!oPxleu&Ql}n2sQ`u&&7xXkZ;jg>BIJ zgb6l(RsC7S9V;mZ)tDULP;q0ke-VywLqfLm+Hl6gMGc3O&1W5!{B{}_s}4_z%qtwh z?fW3?p--)>!vzj|uj@z101i2tbj5bOpU+q11w6DSNfYR&QI@&OW$*b&p893>gW~D3 zci+9Y)t+v7zyc9$y7gF7ZBGy*v{!E!Rojt2krp$}8Z_BxQ9Wn~39BLX%z$a9zDQ9@ z?Kz20jwGW#^goG4|C?waMU)2r?x}o3)U;)iqRlH3bv(4pTl%i}{M-(DDIY5Gr_T@n zcqX>b()UHFdDc%UuaY;$YDdi$T`U{GMN;V(pAihE7{kO6JcERV!dxdT|6~SQzC|dm zoZ%>E30dmu8KJCQb(Y3tKy=^$vM)u=IK~huk0djXGY)@kLg3)DRUJmSr)Tzg1N{Qr z(ictdhv`@PkbXMS+XvCv2m)S>7JrAx&>!SKA`paM1%8yhQvJaB1rF2qt{Fs@Gt4`%rI{Km*tiL*;Hc^7EmR+{xT*l@8#)?&5{9eQ|S=eyB^Wxcg|$$n!C z=)j*CY5#>$Z>KQUm_(suzV&B(}E_kh{2d7 z;?&pU!F!Hi2kOxyd-fko1>oQ|#{5&M7<}%W@=Pjv9zK1+1kvd*T{Vz`T%{v*H;f1y z`7ZOWfr2QrKcdN=$e=rqm@gq_^D_?gFTd9*qhut=1@1U34zIU^XgltRg2vR3k3 zOX){DN=}+oh)E2$9|g~x0q6q*p?zoM>;dG%!IPYCzrA{EFHdqu>rpG4D{pQf#oVR-UXLn2fqq~)Ut0$`mG%O2QyD;>Z zFuZupVxMJSNNaL)#;}*-3{HOO{be62P-hHUva2>^%(pYXlyV)SnQ0mXPFOxi$og`g zoy+5C<*AZ<7tEMMM^$n;hbhuJ9A#RkfrMasB`i~B$%9MEc%sDykiPE}xWtGO&1KMg z2*U10*0&kK(z3`%Nwi8PJBO%yQ&3(=6l2%*>yY?Xs!(f^L(iV={NcS6kO?uFk6yNk znQ3AAp>9ba7v(Rj{+QT;a5*B=Y%>Ee0bodqo6nQG*Q8pkNhMbQvr;9+HTllv zAFZz>;P%y}A1L%4jSFALEyU9=d~^cK8!78th|ed=-Ve*&|MKe@HF4IY;D8IO7dqOX zuD+=t7@0G1gzid!r>*#Om6jm5Qi?HzunQ6pF({X-P{t}pS-I0lh9WYglFn4ll*6Um zW*)<01o!OQr(S3jE1IdNffhkMknCW4%jsi0CwQR;yOfNc?cyOc5)DO}Ox2B)U~iX1 zgFb&Q`5{^E4G9seQL&gqA1rT^8d!mmFlzI9ow)*Nn~0387TZ^YQ5Oo#s%SC*zs#H!b?tK+bj6+&y?;(Z;(yN~;yhQvoIf$yOr}2UN;I6fRz?P)Ku( zB*(pe1G+t44okIlb&O;qhN5maHqR(NNN_u$#uHt8Jtnn+=-_H|F!7Zu%IFZYU}djTazrK;|<-oZ+fpg=U|(23?^9YS4pF( z8U6uIP7Q4!kD6uf2nsT#xPf)2Jwt*yt64#ZrvJLLW^Ve9tc#zliCY|AdSFiOTU`i! zi!z%3rLE)`@(s=)Ta3{8_>$#egrHwzE}1Jv|8Cs=cdLzX3=#LzS!MZS zmmPZ=HBty$GbCaZUA*L@<#R==>4cy4Q0W;+1T> zP%701CmS`O3IsXgviSziszVAb)5yoLlPBl38nFXf#pzu9{545$yjVLhAPdzg?f-()A*(`ctn`BWJm4HN$;WpYi6^}@tu7WFE+hN z|H1%oWq)+ml~LPj*-p(g?+&md#~)3zUe<4zQ@VRr&(_O37vtX?NjcKy%YUl^y0=6F z{~$^gsB`_~qE?44VCncbM2SYYHg|D?Zs~hf-wWLO#=Vn1-S)#1!I-V~r6`|#>Z*I* z^eX5ELqx|HEaGs)OF|Q-vDsfTN*xSkYB&ah`QidGCf6u24g!~nSVD#~zP18XalnjJ zCE^eXkHg6e<#Mc5y?cR9#n^FN7;5yzH8r&@od)a}#a+0YFS&{1{R0N^;58|v^9d)P z0C(;h*i!9Ft%SxO9;Q8um%lQX#6|-8yj9(Rm z6MbyJKS^g^c|e$zHd+C675itN%bNB?>GTbZ+MPbn(Xii$%H=1|CdA}k1bAiRz120d zQ@6#8Qm@hL+X=QME<{&4;KUHqrb{b$juG!qAD16nA#MM`aVV8ITM@_lj7K;8HNpOm z#@ATH9s0WITgG=b#=waRUQesnql_V{W~Y_$W5-_2+pwGrK=A_Twr2p;(cIzBg|Kmh+aQ{ChOaw(~8)<;TLua5VdyR@}WznV2dJ;P%* zd6<0Fs1+X^%ehxVSCAzYJ8BwMuZzf2*gXp#l%#A9oPU}as#ZG*Qw+Lhe|2^rII+lP z8}{l4Hu4(BG>1BkR}dcQnO^8IIS+>Hp0S8%eS8h|?&Xx+zS2S4YoPbO!^`B{3|Jt^ z8s0n#C?)@U?|M7LC}XwIk(lEH-nOBMos9#^+7`_W2OU|#P`!K_5E7N z$@j?)qaOk#@u7R}FGD_O)1k~%A3mR=wQRO(E;_@8(CLUKML^+k72&uvbkr0f^4v4jUSPK6>a&Cad;(~KcgwE33 z>M^=f=$0EE;I5m88(lBdO2=73YbYs}(e4-d3#a-`8!GE40;389WNUecWAYZmczr-3 z*oIX{u*TY(+@@XYQL%abaP)S2ed>p{@&eM}+`)y)^_r?}z)>1clM7n|j{?(iHcjQ@-~`zz`BD$?y||`S>j10}@R-xDs9EK%mJ} zC|VKuh5YL3@CjhK9ce_ICjUK~1qD7C63%vndYE|zirI)wetz?fn5>a91)P&DEgt_4 zlkzBhj_wS)9(3W-6zm*)2h{}`Z``yn@4&&q*6$vC-+w2V!2o}{g#7$7bGT#dixIuF zYLP&M+sxUzZdaaYq%J#P79E0xiWH}eoH?E&tRjb+TlHocY;X<|nVtlxe8x#MGWym; zNNYaJ+8=@jC(?xDhlLT0_BGke-F zQDtH7N*Nt80dsrrnd#M2ii_UaaRe+(k?ns;5*QJ%xHVlJruVIE!$qH=q2dos6s$!{ zW=&0;YyUiy$;3@TL9RstAD?B*ajXPoLiLl46@i6*3jlCiJ@qE@8!H!>4SL#R!tvO``9#Zh0)=0C+YjbuKo#ODDn;niL%f$wlyV+Z9C$uw) zcMouZf{hwuRH3pwDa?V z>q6OynV!j?gtQf|w0S={35FQvW|P%dw!BpY4J{0&SO)!R9o&}enxxPsKQ#?xS6Ob~ zPss{aRs@ zoMr@(RZ&Z#Om+sr&Rau!+2a0Wkm5>*u34~eVLJQv6eS(L4?i?2A3y)mfIWZwLL+7b z|APDz!O^hloEaDgVpdl#u|o#uxwg@R`cfb_=b=ScZ7$6P7m7zZz0E*eGY_88C^}YS zG^r7Isky|{4sr-{;|iY4IbqyXkqq@6_5yTNyYOqTE@wk=P5icTWX-|$2~+V*{rXKm zb>?ie&gj-fx*z8HBYU3?_u4b*KEhbhYvYKwORS0(hEPb~W-aAIbzNBz0sgbVMpjkt z$Gq9orYcAx?A%u~c9xHLxb3yM+1Mk1{8lAyOJVLADf`E6d^dw~J9Z#@{D`!P%d_N| z8U)GgY+nE`Tq9mvl1&y-TNR2`Zu)8~issZN9NEDqp+OttQTBiHB@jU9^-;D>G=JTm)+$DZq0rONEqwOVP7bg`dcDNojM znvJikbm^npayO4kIB7k$UysG8qmt0W1<~JK*dSzutw=FEwA7B0mh^rm{xfZ1h{nvctKZnvrLE(nY%`MiG{BQtQD*4N&2tJWGG5IprWZzt+90N6_ zQ}~(<8$oi@WRgOx;$XFtmD?$@HM@)?xDO4jJZMyln^5%$qa1BUIc)|F%Islw(Qqa- z0QKURWmmeCi0tM!Z6IIv+s$!H1wgNoo$poenkiFz`y+R#CSxeeArtfad3^I z3YXn_u>d5n#rlveQ*j_qW(#oC(*X`4AK8m|jKu+gseb7tpEw~pJW}VS@oNEwaa@Tx z@U~-00;>P;B)UJYA*lpTj7j!bGp1B=$+5(kL)pnN-8KdzWy&-@VMdkH-4IxoE{GwY zt#=OANMl*O$G2YrHgU~%k=@|8;ce$rD;G$Wsrb*%rv_En>6lH$^SWYW(Hof!3E|`F z{oX%3?9BXNH#X{)$SPkxakn8PO}xFcu0&*FSs z$uAo33%HaRUOpZu!K%VHoA~l75R}xKlubV+3@%)zPf3X;i;e`E*S5#-cofM%(v^|D33KBksBr7*mf5uP*cD^S_+1Oh@fm zzIpLsE)tM9*O&^Za+a*$AgNR;w;1^vs+8rm2L5(Tt=>rs-wPhzFFC9_ZdAeIJPn7^ z;=|gINFFN>6kk9waYzX7GPYQPUcau9T)xFv%waM^Ls62(9=L_h!l*z7G~lesX!N7{tMFj8;5?O=TGszc*SJBkRH*b)#~ zI}L(#Y$Drc)q7-ev%#)!%W_R%3j=IkOSL{}ZE$K>vc?kIuZ>G7~qnH6#+*GKi;S}bd&~FUT zW9jY581x(Sr(QPZaX91nT0?-kRl&%CWWTV}y{$J(1X9-5=H?6t;DSk*P3N^IxPBie z3f!MD(?tXanrpMFLmV)BGRM+uipw9hF?iJ3y0q$so-IgP<3heQu6J#@dQnq?-2(uA z_38i*5Zbq6Broh8NY)C1uzFg&PPXeWKM?iC&cYPSe+LBASs*NE-J3d1imIA42~J$E zeCN{amjyjDvexEUmv>jZzcHp&5S@4Wo^&{;HGO31iY!8M>4`u@%v?iDsW&5>UurhDaOIdSc57FB{akHgMa@=;5q)sw^U4Toc+ za&nEOjQK%2z1M#6Z%{bW*z`K10EB+E`8{kZ|85E|F1S03PXmzpq|L9!l3*i^cux>^ zcA9-&1-UNk}NlJ?8*{oz<g$3EnfLV6A71Ck3nJ6DNw>&ZFH6H`ejHnRMjllnjGh}57^wYXx$4XK+@cZ0 zvSqUiqDJ_yU%!q^lot30Z1wZgE+Yt6SwKX!K)_I}RWQq<1Yw5{BZ_0%-~&FiQ#2pd zajjHd;KTRTb^A!Py;>o?fKT$nulYnl(oUgp$|rnW0+3e?xKQd9iZ-W^)N$;U#5X?F z%VLQb4Ye!GCDslXU#Snkte$UAfk>hnv)^&j0J@L6#Ab?fuz$l{F(kOHg@=jAA+M+Q zO?0TxBzrR)9GFGK+VmZEJ-{S(XML}?8AczB=XWe#awlcNiQu@q8_ zyop*xApx#Q2vTg^D0hbh1#Jn^uB-VnFEH?{pg>`bR;qG0><zajkpMwZ*A zP9vzYjUqQ`sx0oDnNjhzgSTB-@AT-eHRcF38^6j>x>CQaV9vhp`PDXocy_P(g8#j8 z*@{I=S55e%hY2{(tRl2UgnaD;L{X`=Z7?yko0wmjgxUt_m)i`|-BRKDo$9^9L)d<` z=+L1ZJK^Ij=c*u65OjzoVy_MAR(FF!7NcLeD)4G|P$0k%^)qCv{Qa+9HH6;mhfhum z2)KK9M0|fR{HiHkAc*jL`lC^d4<4N0nd-)9Ax(qdflw)p4F{1nnxj2*M(*$OS>umGC4x8AN9i(uI@LxT1p%7k3CAz zZ2xz9$UtcS$DIb7+)+0_AuUE061db)NGLjUBYj?fq)4VQ|7=mRjpulmEe* zS)v;WmW+sXg7Hfenbg@Jk3b!Xlps0@1z4B}tx>EMmnTT1+BMowH<`e%wrcIQMj6F8 zc!voV9uyWd8AOMKWk;h~2U)Dfqo-IR5!MpTIMaRdD4lVMQQ5-mXDn#}8B|&ZD_ekD zUYJ=Pl!!i{)4P@i20b!K=f8 zdBn6d!UpU>C+xsRJkS-7#~%ph#U&iTNk2*E;TO?Z1q_f1j)KRCBftd=+M_*;A{yZU z$shxGK`uB+1nIM5AcgkYxR7!Y)=H0(L;#%Dbv4%BUA%!9D_VoK9zCVPRo5 zZdy}QQ-An;zMI%n44!2&PLfeBqLWAl$U`f=zO}Wr8~>k$D$V=-{tvP56%Ya*kj7JtgNhB$;{2o{p0m| zKgHfMCLJesvcM@2Ei5ej95R-bnVp^e+vD+k%qk-o0P@d~bl?RqfbwWG+P1W` zv|%MPHa0ek0q_xJ<`i(V%4n)YY#@oImk+!M%FD{i+Lo7>x2$9^0PZ3)x3IT_rkRJ! zsJd&}O)_UeMQLei=ic7lzLg9{^IfV;lw<@0K#qt;GEQnUKgnDuE-vm^U0q$XlEI-l zmz9-ui_4e?fIJZ)P7d zhM>*nQ5oK5+2#QtTZ9h)KAJ0VXtrVitP3g=V*?<>+Kgo6if|d;X8AM#66eguAp_th z_J+YzAd{Yb>_C$(!e#gXco|%ZL?T}Vo4BWsp z`#KhjS)Ma9Gc&&G_T!W{C$Om$v9Y}5(3pK6d^RvJ@K;>0`uqDk9S%o;zN=J3 z13LBi<8)4xgAeNJ>VDnX*|ECD?DzEae3O)v6wx&8pdt>X86k;dAQu#YYqhntKZ+{R z+1WXSeHXzQcBZHZJ5_?RK@x@Fa!pOm_acd|uC7t+yGqhIAOj>x7hw{-66e5`hK7dQ zB8j%Pwh?6FKq8O6Por1jIl?58nM4>=HZ?Vk2pslXTU&42Y_>}5Euiml2~Fk|g-c|z zOk8ekY#bFybaZt5fPGa=A`>KY30WfMUwk`7vBLWYPr6G2c6s@mJze?CNF zR2*!XZ&7$9?myU9#le;<;-p*c3Gfnl6Tu!ni7*3|Fw-@KcyLa-2$Qe?D}5!IlP{tG6==W)Qo$J_4J6UeScjC8CZYfn zuz=Gb1K5EZJW1r!wRDh3wMrD(BD{nOlEA|xP^_xzi<+ig0k7iwAg(2Zi$Ibcq z`ClU3SzcZaS*_LpY90frYyrp?VG_w82Y5h*)9Jj0-~PSGF=uyo_W)z|3hD|#I*F*V zL=qBmX`k1lUQG0->9#z z??7z{1>Po6gbOxxA}1&3gHR~+hd^Shw6ydS)CNHz$O4J7!mhARkVGM%!laV5P zu$e?K+6k;!U5UfP!=uW|%3jn~gY%q(*??y)L9j_8D=X_ZZgxw05*r&En|{B)2ep?- z!b#&~B?-kq5iZyyk)53#9jCBhoVH3zN;;?$=YWgr1W6bmq7&@$=s2Mh;W)wWM(xYs zJV~T+nZPkXL?_r42==Yn+1Y!7PV6AqQHhtR6VBr@VT1@D?A(}ON5@H5VsmqI+voFj zQYVTj*enw!fMc8plVIcIVZlZx!h&E&Z+4w56Kp$i!8S}p0cLOtWP-q&&e;Z1C(FHnC2RDl9;254NcrHQ0kEEd=B@NjQLa7IQ(en;)c;9XG8J}8O9 zZQN*CK#HO$c?k&#fq{X6FY&XZ<3#rN_m7&Intnw6d*C7{1ZOE@Do|vKm}Bl8&w$Il zy}e_i&NMbQev7&~;05_0gJdWp@?ltfNcod`os|*o- z0Wg^Y;8zso`q0qO-8hdkU*XC6GCls}fYVZ6EAW{inKDh&-WnVn{2|U$^CYsxo|aSO z{Ownq88;}UZ8k-jIoYojI2o0f0X2APo+O#$L@rS+iOB3oe3`5L{rz9#-@Xsnxj#NW zeg`@6QsCu}R-7k*d~gB(;p+DG_RmL0N9V`J#^&+;r#71{KyP@n<%d1~0!Rl=Pzas{ z&(T*8cmm{dAB*LR2xK%Go3p?U@(4R!OXmMbAzwuN8bYJ-NhXr$n&rVr(fJ!hydyMn S-YhKu0000').appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.containerTopPadding=parseInt(this.$container.css("padding-top"),10),this.containerRightPadding=parseInt(this.$container.css("padding-right"),10),this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10),this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10),this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return 0===b.currentImageIndex?b.changeImage(b.album.length-1):b.changeImage(b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.currentImageIndex===b.album.length-1?b.changeImage(0):b.changeImage(b.currentImageIndex+1),!1}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})},b.prototype.start=function(b){function c(a){d.album.push({link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;ij||e.height>i)&&(e.width/j>e.height/i?(h=j,g=parseInt(e.height/(e.width/h),10),d.width(h),d.height(g)):(g=i,h=parseInt(e.width/(e.height/g),10),d.width(h),d.height(g)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(window).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerLeftPadding+this.containerRightPadding,h=b+this.containerTopPadding+this.containerBottomPadding;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").stop(!0).hide(),this.$lightbox.find(".lb-image").fadeIn("slow"),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=this.options.alwaysShowNavOnTouchDevices?!0:!1}catch(b){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex1&&this.options.showImageNumberLabel){var c=this.imageCountLabel(this.currentImageIndex+1,this.album.length);this.$lightbox.find(".lb-number").text(c).fadeIn("fast")}else this.$lightbox.find(".lb-number").hide();this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var a=new Image;a.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var b=new Image;b.src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=27,c=37,d=39,e=a.keyCode,f=String.fromCharCode(e).toLowerCase();e===b||f.match(/x|o|c/)?this.end():"p"===f||e===c?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):("n"===f||e===d)&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"})},new b}); +//# sourceMappingURL=lightbox.min.map \ No newline at end of file diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json index 78116911dd..fb4f864474 100644 --- a/seed/challenges/bootstrap.json +++ b/seed/challenges/bootstrap.json @@ -347,7 +347,7 @@ "description": [ "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", "This image illustrates the difference between inline elements and block-level elements:", - "\"An", + "\"An", "Note that these buttons still need the btn class.", "Add Bootstrap's btn-block class to your Bootstrap button." ], @@ -700,7 +700,7 @@ "description": [ "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", - "\"an", + "\"an", "Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.", "In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.", "Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", @@ -895,7 +895,7 @@ "description": [ "You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?", "This image illustrates the difference between inline elements and block-level elements:", - "\"An", + "\"An", "By using the span element, you can put several elements together, and even style different parts of the same element differently.", "Nest the word \"love\" in your \"Things cats love\" element below within a span element. Then give that span the class text-danger to make the text red.", "Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" @@ -984,7 +984,7 @@ "We will make a simple heading for our Cat Photo App by putting them in the same row.", "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", - "\"an", + "\"an", "Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.", "In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.", "Nest your first image and your h2 element within a single <div class=\"row\"> element. Nest your h2 text within a <div class=\"col-xs-8\"> and your image in a <div class=\"col-xs-4\"> so that they are on the same line.", diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index fcd98e70f5..50cb7bce13 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -1060,7 +1060,7 @@ "description": [ "a elements, also known as anchor elements, are used to link to content outside of the current page.", "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", - "\"a", + "\"a", "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text." ], @@ -1130,7 +1130,7 @@ "difficulty": 1.23, "description": [ "Again, here's a diagram of an a element for your reference:", - "\"a", + "\"a", "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", "Nesting just means putting one element inside of another element.", "Now nest your existing a element within a new p element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text." diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 7b83db4168..3b95cb93e5 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -18,6 +18,8 @@ block content script(src='/js/lib/codemirror/mode/css/css.js') script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js') script(src='/js/lib/codemirror/addon/emmet/emmet.js') + script(src='/js/lib/lightbox2/dist/js/lightbox.min.js') + link(rel='stylesheet', href='/js/lib/lightbox2/dist/css/lightbox.css') .row.courseware-height .col-xs-12.col-sm-12.col-md-3.col-lg-3 .scroll-locker(id = "scroll-locker")