PNG  IHDRQgAMA a cHRMz&u0`:pQ<bKGDgmIDATxwUﹻ& ^CX(J I@ "% (** BX +*i"]j(IH{~R)[~>h{}gy)I$Ij .I$I$ʊy@}x.: $I$Ii}VZPC)I$IF ^0ʐJ$I$Q^}{"r=OzI$gRZeC.IOvH eKX $IMpxsk.쒷/&r[޳<v| .I~)@$updYRa$I |M.e JaֶpSYR6j>h%IRز if&uJ)M$I vLi=H;7UJ,],X$I1AҒJ$ XY XzI@GNҥRT)E@;]K*Mw;#5_wOn~\ DC&$(A5 RRFkvIR}l!RytRl;~^ǷJj اy뷦BZJr&ӥ8Pjw~vnv X^(I;4R=P[3]J,]ȏ~:3?[ a&e)`e*P[4]T=Cq6R[ ~ޤrXR Հg(t_HZ-Hg M$ãmL5R uk*`%C-E6/%[t X.{8P9Z.vkXŐKjgKZHg(aK9ڦmKjѺm_ \#$5,)-  61eJ,5m| r'= &ڡd%-]J on Xm|{ RҞe $eڧY XYrԮ-a7RK6h>n$5AVڴi*ֆK)mѦtmr1p| q:흺,)Oi*ֺK)ܬ֦K-5r3>0ԔHjJئEZj,%re~/z%jVMڸmrt)3]J,T K֦OvԒgii*bKiNO~%PW0=dii2tJ9Jݕ{7"I P9JKTbu,%r"6RKU}Ij2HKZXJ,妝 XYrP ެ24c%i^IK|.H,%rb:XRl1X4Pe/`x&P8Pj28Mzsx2r\zRPz4J}yP[g=L) .Q[6RjWgp FIH*-`IMRaK9TXcq*I y[jE>cw%gLRԕiFCj-ďa`#e~I j,%r,)?[gp FI˨mnWX#>mʔ XA DZf9,nKҲzIZXJ,L#kiPz4JZF,I,`61%2s $,VOϚ2/UFJfy7K> X+6 STXIeJILzMfKm LRaK9%|4p9LwJI!`NsiazĔ)%- XMq>pk$-$Q2x#N ؎-QR}ᶦHZډ)J,l#i@yn3LN`;nڔ XuX5pF)m|^0(>BHF9(cզEerJI rg7 4I@z0\JIi䵙RR0s;$s6eJ,`n 䂦0a)S)A 1eJ,堌#635RIgpNHuTH_SԕqVe ` &S)>p;S$魁eKIuX`I4춒o}`m$1":PI<[v9^\pTJjriRŭ P{#{R2,`)e-`mgj~1ϣLKam7&U\j/3mJ,`F;M'䱀 .KR#)yhTq;pcK9(q!w?uRR,n.yw*UXj#\]ɱ(qv2=RqfB#iJmmL<]Y͙#$5 uTU7ӦXR+q,`I}qL'`6Kͷ6r,]0S$- [RKR3oiRE|nӦXR.(i:LDLTJjY%o:)6rxzҒqTJjh㞦I.$YR.ʼnGZ\ֿf:%55 I˼!6dKxm4E"mG_ s? .e*?LRfK9%q#uh$)i3ULRfK9yxm܌bj84$i1U^@Wbm4uJ,ҪA>_Ij?1v32[gLRD96oTaR׿N7%L2 NT,`)7&ƝL*꽙yp_$M2#AS,`)7$rkTA29_Iye"|/0t)$n XT2`YJ;6Jx".e<`$) PI$5V4]29SRI>~=@j]lp2`K9Jaai^" Ԋ29ORI%:XV5]JmN9]H;1UC39NI%Xe78t)a;Oi Ҙ>Xt"~G>_mn:%|~ޅ_+]$o)@ǀ{hgN;IK6G&rp)T2i୦KJuv*T=TOSV>(~D>dm,I*Ɛ:R#ۙNI%D>G.n$o;+#RR!.eU˽TRI28t)1LWϚ>IJa3oFbu&:tJ*(F7y0ZR ^p'Ii L24x| XRI%ۄ>S1]Jy[zL$adB7.eh4%%누>WETf+3IR:I3Xה)3אOۦSRO'ٺ)S}"qOr[B7ϙ.edG)^ETR"RtRݜh0}LFVӦDB^k_JDj\=LS(Iv─aTeZ%eUAM-0;~˃@i|l @S4y72>sX-vA}ϛBI!ݎߨWl*)3{'Y|iSlEڻ(5KtSI$Uv02,~ԩ~x;P4ցCrO%tyn425:KMlD ^4JRxSهF_}شJTS6uj+ﷸk$eZO%G*^V2u3EMj3k%)okI]dT)URKDS 7~m@TJR~荪fT"֛L \sM -0T KfJz+nإKr L&j()[E&I ߴ>e FW_kJR|!O:5/2跌3T-'|zX ryp0JS ~^F>-2< `*%ZFP)bSn"L :)+pʷf(pO3TMW$~>@~ū:TAIsV1}S2<%ޟM?@iT ,Eūoz%i~g|`wS(]oȤ8)$ ntu`өe`6yPl IzMI{ʣzʨ )IZ2= ld:5+請M$-ї;U>_gsY$ÁN5WzWfIZ)-yuXIfp~S*IZdt;t>KūKR|$#LcԀ+2\;kJ`]YǔM1B)UbG"IRߊ<xܾӔJ0Z='Y嵤 Leveg)$znV-º^3Ւof#0Tfk^Zs[*I꯳3{)ˬW4Ւ4 OdpbZRS|*I 55#"&-IvT&/윚Ye:i$ 9{LkuRe[I~_\ؠ%>GL$iY8 9ܕ"S`kS.IlC;Ҏ4x&>u_0JLr<J2(^$5L s=MgV ~,Iju> 7r2)^=G$1:3G< `J3~&IR% 6Tx/rIj3O< ʔ&#f_yXJiގNSz; Tx(i8%#4 ~AS+IjerIUrIj362v885+IjAhK__5X%nV%Iͳ-y|7XV2v4fzo_68"S/I-qbf; LkF)KSM$ Ms>K WNV}^`-큧32ŒVؙGdu,^^m%6~Nn&͓3ŒVZMsRpfEW%IwdǀLm[7W&bIRL@Q|)* i ImsIMmKmyV`i$G+R 0tV'!V)֏28vU7͒vHꦼtxꗞT ;S}7Mf+fIRHNZUkUx5SAJㄌ9MqμAIRi|j5)o*^'<$TwI1hEU^c_j?Е$%d`z cyf,XO IJnTgA UXRD }{H}^S,P5V2\Xx`pZ|Yk:$e ~ @nWL.j+ϝYb퇪bZ BVu)u/IJ_ 1[p.p60bC >|X91P:N\!5qUB}5a5ja `ubcVxYt1N0Zzl4]7­gKj]?4ϻ *[bg$)+À*x쳀ogO$~,5 زUS9 lq3+5mgw@np1sso Ӻ=|N6 /g(Wv7U;zωM=wk,0uTg_`_P`uz?2yI!b`kĸSo+Qx%!\οe|އԁKS-s6pu_(ֿ$i++T8=eY; צP+phxWQv*|p1. ά. XRkIQYP,drZ | B%wP|S5`~́@i޾ E;Չaw{o'Q?%iL{u D?N1BD!owPHReFZ* k_-~{E9b-~P`fE{AܶBJAFO wx6Rox5 K5=WwehS8 (JClJ~ p+Fi;ŗo+:bD#g(C"wA^ r.F8L;dzdIHUX݆ϞXg )IFqem%I4dj&ppT{'{HOx( Rk6^C٫O.)3:s(۳(Z?~ٻ89zmT"PLtw䥈5&b<8GZ-Y&K?e8,`I6e(֍xb83 `rzXj)F=l($Ij 2*(F?h(/9ik:I`m#p3MgLaKjc/U#n5S# m(^)=y=đx8ŬI[U]~SцA4p$-F i(R,7Cx;X=cI>{Km\ o(Tv2vx2qiiDJN,Ҏ!1f 5quBj1!8 rDFd(!WQl,gSkL1Bxg''՞^ǘ;pQ P(c_ IRujg(Wz bs#P­rz> k c&nB=q+ؔXn#r5)co*Ũ+G?7< |PQӣ'G`uOd>%Mctz# Ԫڞ&7CaQ~N'-P.W`Oedp03C!IZcIAMPUۀ5J<\u~+{9(FbbyAeBhOSܳ1 bÈT#ŠyDžs,`5}DC-`̞%r&ڙa87QWWp6e7 Rϫ/oY ꇅ Nܶըtc!LA T7V4Jsū I-0Pxz7QNF_iZgúWkG83 0eWr9 X]㾮݁#Jˢ C}0=3ݱtBi]_ &{{[/o[~ \q鯜00٩|cD3=4B_b RYb$óBRsf&lLX#M*C_L܄:gx)WΘsGSbuL rF$9';\4Ɍq'n[%p.Q`u hNb`eCQyQ|l_C>Lb꟟3hSb #xNxSs^ 88|Mz)}:](vbۢamŖ࿥ 0)Q7@0=?^k(*J}3ibkFn HjB׻NO z x}7p 0tfDX.lwgȔhԾŲ }6g E |LkLZteu+=q\Iv0쮑)QٵpH8/2?Σo>Jvppho~f>%bMM}\//":PTc(v9v!gոQ )UfVG+! 35{=x\2+ki,y$~A1iC6#)vC5^>+gǵ@1Hy٪7u;p psϰu/S <aʸGu'tD1ԝI<pg|6j'p:tպhX{o(7v],*}6a_ wXRk,O]Lܳ~Vo45rp"N5k;m{rZbΦ${#)`(Ŵg,;j%6j.pyYT?}-kBDc3qA`NWQū20/^AZW%NQ MI.X#P#,^Ebc&?XR tAV|Y.1!؅⨉ccww>ivl(JT~ u`ٵDm q)+Ri x/x8cyFO!/*!/&,7<.N,YDŽ&ܑQF1Bz)FPʛ?5d 6`kQձ λc؎%582Y&nD_$Je4>a?! ͨ|ȎWZSsv8 j(I&yj Jb5m?HWp=g}G3#|I,5v珿] H~R3@B[☉9Ox~oMy=J;xUVoj bUsl_35t-(ՃɼRB7U!qc+x4H_Qo֮$[GO<4`&č\GOc[.[*Af%mG/ ňM/r W/Nw~B1U3J?P&Y )`ѓZ1p]^l“W#)lWZilUQu`-m|xĐ,_ƪ|9i:_{*(3Gѧ}UoD+>m_?VPۅ15&}2|/pIOʵ> GZ9cmíتmnz)yߐbD >e}:) r|@R5qVSA10C%E_'^8cR7O;6[eKePGϦX7jb}OTGO^jn*媓7nGMC t,k31Rb (vyܴʭ!iTh8~ZYZp(qsRL ?b}cŨʊGO^!rPJO15MJ[c&~Z`"ѓޔH1C&^|Ш|rʼ,AwĴ?b5)tLU)F| &g٣O]oqSUjy(x<Ϳ3 .FSkoYg2 \_#wj{u'rQ>o;%n|F*O_L"e9umDds?.fuuQbIWz |4\0 sb;OvxOSs; G%T4gFRurj(֍ڑb uԖKDu1MK{1^ q; C=6\8FR艇!%\YÔU| 88m)֓NcLve C6z;o&X x59:q61Z(T7>C?gcļxѐ Z oo-08jہ x,`' ҔOcRlf~`jj".Nv+sM_]Zk g( UOPyεx%pUh2(@il0ݽQXxppx-NS( WO+轾 nFߢ3M<;z)FBZjciu/QoF 7R¥ ZFLF~#ȣߨ^<쩡ݛкvџ))ME>ώx4m#!-m!L;vv#~Y[đKmx9.[,UFS CVkZ +ߟrY٧IZd/ioi$%͝ب_ֶX3ܫhNU ZZgk=]=bbJS[wjU()*I =ώ:}-蹞lUj:1}MWm=̛ _ ¾,8{__m{_PVK^n3esw5ӫh#$-q=A̟> ,^I}P^J$qY~Q[ Xq9{#&T.^GVj__RKpn,b=`żY@^՝;z{paVKkQXj/)y TIc&F;FBG7wg ZZDG!x r_tƢ!}i/V=M/#nB8 XxЫ ^@CR<{䤭YCN)eKOSƟa $&g[i3.C6xrOc8TI;o hH6P&L{@q6[ Gzp^71j(l`J}]e6X☉#͕ ׈$AB1Vjh㭦IRsqFBjwQ_7Xk>y"N=MB0 ,C #o6MRc0|$)ف"1!ixY<B9mx `,tA>)5ػQ?jQ?cn>YZe Tisvh# GMމȇp:ԴVuږ8ɼH]C.5C!UV;F`mbBk LTMvPʍϤj?ԯ/Qr1NB`9s"s TYsz &9S%U԰> {<ؿSMxB|H\3@!U| k']$U+> |HHMLޢ?V9iD!-@x TIî%6Z*9X@HMW#?nN ,oe6?tQwڱ.]-y':mW0#!J82qFjH -`ѓ&M0u Uγmxϵ^-_\])@0Rt.8/?ٰCY]x}=sD3ojަЫNuS%U}ԤwHH>ڗjܷ_3gN q7[q2la*ArǓԖ+p8/RGM ]jacd(JhWko6ڎbj]i5Bj3+3!\j1UZLsLTv8HHmup<>gKMJj0@H%,W΃7R) ">c, xixј^ aܖ>H[i.UIHc U1=yW\=S*GR~)AF=`&2h`DzT󑓶J+?W+}C%P:|0H܆}-<;OC[~o.$~i}~HQ TvXΈr=b}$vizL4:ȰT|4~*!oXQR6Lk+#t/g lԁߖ[Jڶ_N$k*". xsxX7jRVbAAʯKҎU3)zSNN _'s?f)6X!%ssAkʱ>qƷb hg %n ~p1REGMHH=BJiy[<5 ǁJҖgKR*倳e~HUy)Ag,K)`Vw6bRR:qL#\rclK/$sh*$ 6덤 KԖc 3Z9=Ɣ=o>X Ώ"1 )a`SJJ6k(<c e{%kϊP+SL'TcMJWRm ŏ"w)qc ef꒵i?b7b('"2r%~HUS1\<(`1Wx9=8HY9m:X18bgD1u ~|H;K-Uep,, C1 RV.MR5άh,tWO8WC$ XRVsQS]3GJ|12 [vM :k#~tH30Rf-HYݺ-`I9%lIDTm\ S{]9gOڒMNCV\G*2JRŨ;Rҏ^ڽ̱mq1Eu?To3I)y^#jJw^Ńj^vvlB_⋌P4x>0$c>K†Aļ9s_VjTt0l#m>E-,,x,-W)سo&96RE XR.6bXw+)GAEvL)͞K4$p=Ũi_ѱOjb HY/+@θH9޼]Nԥ%n{ &zjT? Ty) s^ULlb,PiTf^<À] 62R^V7)S!nllS6~͝V}-=%* ʻ>G DnK<y&>LPy7'r=Hj 9V`[c"*^8HpcO8bnU`4JȪAƋ#1_\ XϘHPRgik(~G~0DAA_2p|J묭a2\NCr]M_0 ^T%e#vD^%xy-n}-E\3aS%yN!r_{ )sAw ڼp1pEAk~v<:`'ӭ^5 ArXOI驻T (dk)_\ PuA*BY]yB"l\ey hH*tbK)3 IKZ򹞋XjN n *n>k]X_d!ryBH ]*R 0(#'7 %es9??ښFC,ՁQPjARJ\Ρw K#jahgw;2$l*) %Xq5!U᢯6Re] |0[__64ch&_}iL8KEgҎ7 M/\`|.p,~`a=BR?xܐrQ8K XR2M8f ?`sgWS%" Ԉ 7R%$ N}?QL1|-эټwIZ%pvL3Hk>,ImgW7{E xPHx73RA @RS CC !\ȟ5IXR^ZxHл$Q[ŝ40 (>+ _C >BRt<,TrT {O/H+˟Pl6 I B)/VC<6a2~(XwV4gnXR ϱ5ǀHٻ?tw똤Eyxp{#WK qG%5],(0ӈH HZ])ג=K1j&G(FbM@)%I` XRg ʔ KZG(vP,<`[ Kn^ SJRsAʠ5xՅF`0&RbV tx:EaUE/{fi2;.IAwW8/tTxAGOoN?G}l L(n`Zv?pB8K_gI+ܗ #i?ޙ.) p$utc ~DžfՈEo3l/)I-U?aԅ^jxArA ΧX}DmZ@QLےbTXGd.^|xKHR{|ΕW_h] IJ`[G9{).y) 0X YA1]qp?p_k+J*Y@HI>^?gt.06Rn ,` ?);p pSF9ZXLBJPWjgQ|&)7! HjQt<| ؅W5 x W HIzYoVMGP Hjn`+\(dNW)F+IrS[|/a`K|ͻ0Hj{R,Q=\ (F}\WR)AgSG`IsnAR=|8$}G(vC$)s FBJ?]_u XRvύ6z ŨG[36-T9HzpW̞ú Xg큽=7CufzI$)ki^qk-) 0H*N` QZkk]/tnnsI^Gu't=7$ Z;{8^jB% IItRQS7[ϭ3 $_OQJ`7!]W"W,)Iy W AJA;KWG`IY{8k$I$^%9.^(`N|LJ%@$I}ֽp=FB*xN=gI?Q{٥4B)mw $Igc~dZ@G9K X?7)aK%݅K$IZ-`IpC U6$I\0>!9k} Xa IIS0H$I H ?1R.Чj:4~Rw@p$IrA*u}WjWFPJ$I➓/6#! LӾ+ X36x8J |+L;v$Io4301R20M I$-E}@,pS^ޟR[/s¹'0H$IKyfŸfVOπFT*a$I>He~VY/3R/)>d$I>28`Cjw,n@FU*9ttf$I~<;=/4RD~@ X-ѕzἱI$: ԍR a@b X{+Qxuq$IЛzo /~3\8ڒ4BN7$IҀj V]n18H$IYFBj3̵̚ja pp $Is/3R Ӻ-Yj+L;.0ŔI$Av? #!5"aʄj}UKmɽH$IjCYs?h$IDl843.v}m7UiI=&=0Lg0$I4: embe` eQbm0u? $IT!Sƍ'-sv)s#C0:XB2a w I$zbww{."pPzO =Ɔ\[ o($Iaw]`E).Kvi:L*#gР7[$IyGPI=@R 4yR~̮´cg I$I/<tPͽ hDgo 94Z^k盇΄8I56^W$I^0̜N?4*H`237}g+hxoq)SJ@p|` $I%>-hO0eO>\ԣNߌZD6R=K ~n($I$y3D>o4b#px2$yڪtzW~a $I~?x'BwwpH$IZݑnC㧄Pc_9sO gwJ=l1:mKB>Ab<4Lp$Ib o1ZQ@85b̍ S'F,Fe,^I$IjEdù{l4 8Ys_s Z8.x m"+{~?q,Z D!I$ϻ'|XhB)=…']M>5 rgotԎ 獽PH$IjIPhh)n#cÔqA'ug5qwU&rF|1E%I$%]!'3AFD/;Ck_`9 v!ٴtPV;x`'*bQa w I$Ix5 FC3D_~A_#O݆DvV?<qw+I$I{=Z8".#RIYyjǪ=fDl9%M,a8$I$Ywi[7ݍFe$s1ՋBVA?`]#!oz4zjLJo8$I$%@3jAa4(o ;p,,dya=F9ً[LSPH$IJYЉ+3> 5"39aZ<ñh!{TpBGkj}Sp $IlvF.F$I z< '\K*qq.f<2Y!S"-\I$IYwčjF$ w9 \ߪB.1v!Ʊ?+r:^!I$BϹB H"B;L'G[ 4U#5>੐)|#o0aڱ$I>}k&1`U#V?YsV x>{t1[I~D&(I$I/{H0fw"q"y%4 IXyE~M3 8XψL}qE$I[> nD?~sf ]o΁ cT6"?'_Ἣ $I>~.f|'!N?⟩0G KkXZE]ޡ;/&?k OۘH$IRۀwXӨ<7@PnS04aӶp.:@\IWQJ6sS%I$e5ڑv`3:x';wq_vpgHyXZ 3gЂ7{{EuԹn±}$I$8t;b|591nءQ"P6O5i }iR̈́%Q̄p!I䮢]O{H$IRϻ9s֧ a=`- aB\X0"+5"C1Hb?߮3x3&gşggl_hZ^,`5?ߎvĸ%̀M!OZC2#0x LJ0 Gw$I$I}<{Eb+y;iI,`ܚF:5ܛA8-O-|8K7s|#Z8a&><a&/VtbtLʌI$I$I$I$I$I$IRjDD%tEXtdate:create2022-05-31T04:40:26+00:00!Î%tEXtdate:modify2022-05-31T04:40:26+00:00|{2IENDB` sh-3ll

HOME


sh-3ll 1.0
DIR:/home/digitalprisma/domains/digitalprisma.com/public_html/protfolios/docs/
Upload File :
Current File : /home/digitalprisma/domains/digitalprisma.com/public_html/protfolios/docs/index.html
<!DOCTYPE>
<html lang="en">

<!-- Mirrored from plugins.gravitysign.com/colio/docs/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 16 Oct 2020 05:40:37 GMT -->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>Colio - jQuery Portfolio Content Expander Plugin | Documentation</title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
	<script language="javascript" src="js/shCore.js"></script>
	<script language="javascript" src="js/shBrushCSharp.js"></script>
	<script language="javascript" src="js/shBrushJScript.js"></script>
	<script language="javascript" src="js/shBrushCss.js"></script>
	<script language="javascript" src="js/shBrushXml.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
			dp.SyntaxHighlighter.HighlightAll('code');
		});
	</script>
</head>
<body>
<div class="center-wrapper">


<!-------------- HEADER -------------->

<div class="header">
	<h1>Colio - jQuery Portfolio Content Expander Plugin</h1>
	<p>You just purchased <strong>Colio - jQuery Portfolio Content Expander Plugin</strong>! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://codecanyon.net/user/flGravity">here</a></p> 
	<p class="right"><em>Thank you. flGravity</em></p>
    <br class="clear">
</div>

<div class="clear"></div>

<!---------------- TABLE OF CONTENTS ---------------->

<div class="contents">
	<h3 class="contents-header">Documentation</h3>
	<ul class="menu">
		<li><a href="#about">1. About</a></li>
		<li><a href="#install">2. Installation</a></li>
		<li><a href="#options">3. Plugin Options</a></li>
		<li><a href="#placement">4. Placement</a></li>
		<li><a href="#classes">5. Classes</a></li>
		<li><a href="#api">6. API</a></li>
		<li><a href="#isotope">7. Isotope and Quicksand</a></li>
	</ul>
</div>


<!-------------- SECTION --------------->


<h2 id="about">1. About</h2>

<p>Colio plugin was designed to display details about your portfolio items in expandable viewport that can be positioned above, below or inside portfolio grid. This makes Colio a great choice for one page sites! But it can be used with multipage sites as well. Using AJAX feature Colio can load content from any URL and then extract only specific portion of a page to display in viewport.</p>

<p>Along with other features Colio includes black and white theme. It can be easily integrated with any existing portfolio and is compatible with isotope and quicksand filtering plugins. Finally it's responsive and mobile optimized!</p>


<!-------------- SECTION --------------->


<h2 id="install">2. Installation</h2>

<p>Colio plugin works on container with a list of similar child items, like UL list</p>

<pre name="code" class="html">
<ul id="my_portfolio" class="portfolio">
	<li class="item">...</li>
	<li class="item">...</li>
	...
</ul>
</pre>

<p>So first of all you need to add "colio-link" class to all links inside your portfolio item, that normally would open the page with details about your work or project. Basically any element that has "colio-link" class when clicked will open Colio viewport for the containing item (you can change selector for links using "expandLink" plugin option).</p>

<p>The next step is to add "data-content" attribute to every portfolio item with the content that Colio plugin has to display. The "data-content" attribute can accept 3 types of content: inline html, URL and finally "#id" of an element in document with the some content inside.</p>

<p>Let's take a look on every option separately. If "data-content" attribute starts with #, like in example below</p>

<pre name="code" class="html">
<li class="item" data-content="#content_1"></li>
</pre>

<p>then Colio will look for element with ID "content_1" and will simply extract its contents. Such elements for example can be placed before closing &lt;/body&gt; tag and should have class "colio-content" what will make them hidden</p>

<pre name="code" class="html">
<div id="content_1" class="colio-content">
	<p>Here is description of your portfolio item</p>
</div>
</pre>

<p>Next, if "data-content" attribute starts with /, ./, ../ or http(s):// Colio will consider this as an URL and will try to load content with AJAX. This can be handy if you are adding Colio plugin to multipage portfolio site, like a site for Wordpress, where every portfolio item has corresponding page. In this case you can extract content for Colio directly from pages and simply strip off header, menu, footer and all other page stuff and get only description of your work/project. To accomplish this task there is "contentFilter" plugin option that accepts jQuery selector to filter/search received html.</p>

<p>And finally, if none of above works, value of "data-content" attribute is considered inline html and will be inserted as is.</p>

<p>Ok. At this moment your portfolio should be ready for Colio, so it's time to add css and js files as well as plugin init code. So first you need to copy css/colio.css and js/jquery.colio.min.js files to the corresponding folders under your site, then link these files in head of your page (jquery library and jquery-easing should be already there)</p>

<pre name="code" class="html">
&lt;link rel="stylesheet" href="css/colio.css" media="screen"&gt;
&lt;script type="text/javascript" src="js/jquery.colio.min.js"&gt;&lt;/script&gt;
</pre>

<p>next add plugin init code</p>

<pre name="code" class="js">
&lt;script type="text/javascript"&gt;
	$(document).ready(function(){
		$('#my_portfolio').colio({
			id: 'colio_1'
		});
	});
&lt;/script&gt;
</pre>

<p>Now plugin is installed and you can reload page to test it! Please click any portfolio item with "colio-link" and you should see that Colio viewport expands above your portfolio grid with the description for clicked item. But as you will notice it looks a bit raw. That's because by default Colio comes with only the basic styles to giving you the opportunity to style everything on your own.</p>

<p>But don't worry, if you have no time to play with the styles! Colio plugin includes two themes - black and white, that you can use right away! Theme files are located inside "colio-white/" and "colio-black/" folders. Every folder has readme.txt file with instructions how to install a theme and what markup you should use for content. So, what you just need to do is 1) decide what theme you want 2) copy corresponding theme folder into the root of your site 3) open readme.txt file and follow the steps to complete theme installation.</p>


<!-------------- SECTION --------------->


<h2 id="options">3. Plugin Options</h2>

<p>Below you will find plugin options with description what they do</p>

<pre name="code" class="js">
// default settings
var s = $.extend({
	id: 'colio',						// "id" attribute to be assigned to colio viewport
	theme: '',							// colio theme - "black" or "white"
	placement: 'before',				// viewport placement - "before", "after", "inside" or "#id"
	beforeLastRow: false,				// if true, place viewport before last row of items ("inside" only)
	expandLink: '.colio-link',			// selector for elements that will expand colio viewport
	expandDuration: 500,				// duration of expand animation, ms
	expandEasing: 'swing',				// easing for expand animation
	collapseDuration: 300,				// duration of collapse animation, ms
	collapseEasing: 'swing',			// easing for collapse animation
	scrollPage: true,					// whether to scroll page to colio viewport
	syncScroll: false,					// sync page scroll with expand/collapse animation
	scrollDuration: 300,				// page scroll duration, ms
	scrollEasing: 'swing',				// page scroll easing
	scrollOffset: 10,					// viewport offset from top of the page, px
	contentFadeIn: 500,					// content fade-in duration, ms
	contentFadeOut: 200,				// content fade-out duration, ms
	contentDelay: 200,					// content fade-in delay, ms
	navigation: true,					// whether to show next/previous controls
	closeText: '<span>Close</span>',	// text/html for close button
	nextText: '<span>Next</span>',		// text/html for next button
	prevText: '<span>Prev</span>',		// text/html for previous button
	contentFilter: '',					// selector to filter content that is to be loaded
	hiddenItems: '.hidden',				// selector to exclude hidden portfolio items
	onExpand: function(){},				// viewport expand callback
	onCollapse: function(){},			// viewport collapse callback
	onContent: function(){}				// content load callback
}, c);
</pre>

<p>Few words about callback functions. onCollapse() and onExpand() callback functions execute whenever Colio viewport collapses or expands. A "this" keyword inside callback functions refers to Colio viewport DOM element. onExpand() callback accepts single argument - id of active content. </p>

<p>The onContent() callback executes only once when Colio loads content for portfolio item. It accepts single argument - DOM of a content that was loaded. So if you need to initialize any jQuery plugins on loaded content use this callback like so</p>

<pre name="code" class="js">
&lt;script type="text/javascript"&gt;
	$(document).ready(function(){
		$('#my_portfolio').colio({
			id: 'colio_1',
			onContent: function(content) {
				$(content).find('.fancybox').fancybox()
			}
		});
	});
&lt;/script&gt;
</pre>

<p>Finally, if you are loading content via AJAX you may want to filter it using "contentFilter" plugin option, which accepts jQuery selector. Since version 1.4 of Colio plugin it's possible to append #element selector directly to the URL in "data-content" attribute. In this case "contentFilter" expression will be automatically preceded by #element to target specific element by ID.</p>

<!-------------- SECTION --------------->


<h2 id="placement">4. Placement</h2>

<p>Colio plugin has an option called "placement". This option controls where Colio viewport will appear in relation to portfolio list that plugin is initialized with. Basically there is 4 options available - "before", "inside", "after" and #id. The "before" placement option will put Colio viewport right above portfolio list. The "inside" placement will dynamically insert viewport inside the grid. The "after" placement option will position viewport right below portfolio list. And finally if you will set "placement" option to something like "#colio_wrapper", Colio viewport will be put inside element with "colio_wrapper" id that can be anywhere in document.</p>

<!-------------- SECTION --------------->


<h2 id="classes">5. Classes</h2>

<p>Although Colio comes with two themes, its basic installation does not have any styling except necessary ones. It was made intentionally to give you opportunity to style everything on your own. Here are some classes that you can use for own styling</p>

<code><strong>.colio</strong> - class is added to colio viewport
<strong>.colio-expanded</strong> - class is added to expanded viewport
<strong>.colio-placement-before|after|inside|element</strong> - classes are added to colio viewport depending on selected placement option
<strong>.colio-content</strong> - class for divs with loaded content for portfolio items
<strong>.colio-container</strong> - container for all "colio-content" divs
<strong>.colio-close</strong> - colio close button
<strong>.colio-navigation</strong> - wrapper for next/previous navigation buttons
<strong>.colio-next</strong> - colio next button
<strong>.colio-prev</strong> - colio previous button
<strong>.colio-no-next</strong> - class is added to next button on last item
<strong>.colio-no-prev</strong> - class is added to previous button on first item
<strong>.colio-theme-white|black</strong> - classes added to colio viewport to support themes
<strong>.colio-item</strong> - class is added to every portfolio item on plugin init
<strong>.colio-active-item</strong> - class is added to active portfolio item
</code>

<p>Also as far as Colio viewport is created dynamically you can assign it some unique id. Default id that's assigned to viewport is "colio", but you can change it using "id" plugin option.</p>


<!-------------- SECTION --------------->


<h2 id="api">6. API</h2>

<p>Colio plugin provides following API methods</p>

<code><strong>expand(n)</strong> - method to expand Colio viewport for portfolio item on position "n" (zero-based)
<strong>collapse()</strong> - method to collapse Colio viewport
<strong>excludeHidden()</strong> - method to update item list to exclude those items that match selector provided by "hiddenItems" plugin options. This method should be called every time when you apply some filtering to portfolio items with, for example isotope plugin.
</code>

<p>Any of these API methods can be invoke in two ways. You can use jQuery $.trigger() or $.triggerHandler() functions to send "colio" custom event with API method name to the portfolio list, like so</p>

<pre name="code" class="js">
$('#my_portfolio').trigger("colio", "excludeHidden");
</pre>

<p>or in case of argument</p>

<pre name="code" class="js">
$('#my_portfolio').trigger("colio", ["expand", 2]); 
</pre>

<p>Or, you can receive object containing API methods with jQuery $.data() and then call API methods directly. For example</p>

<pre name="code" class="js">
var colio_api = $('#my_portfolio').data('colio');  
colio_api.collapse();
</pre>



<!-------------- SECTION --------------->


<h2 id="isotope">7. Isotope and Quicksand</h2>

<p>Colio plugin can work together with <a href="http://isotope.metafizzy.co/">isotope</a> and <a href="http://razorjack.net/quicksand/">quicksand</a> filtering plugins and this section is meant to provide working examples how this can be done in practice.</p>

<p>So, first let's assume your are using classes to filter your portfolio items and you have a set of filtering links that look like this</p>

<pre name="code" class="html">
<div id="filters">
	<a href="#" class="filter-active">All</a>
	<a href="#design">Web Design</a>
	<a href="#inspiration">Inspiration</a>
</div>
</pre>

<p>When you click filter link, portfolio items that have certain class (that goes after #) will be shown, while the others will be hidden.</p>

<p>So, here is Javascript code that binds Colio and Isotope plugins together</p>

<pre name="code" class="js">
&lt;script type="text/javascript">
	$(document).ready(function(){
	
		// "colio" plugin
		$('#my_portfolio').colio({
			id: 'demo_1',
			placement: 'inside',
			hiddenItems: '.isotope-hidden',
			onContent: function(content){
				// init plugins on loaded content
				$(content).find('.fancybox').fancybox();
			}
		});
		
		// "isotope" plugin
		var filter = '*', isotope_run = function(f) {
			$('#my_portfolio').
			isotope({layoutMode : 'fitRows', filter: f}).
			trigger('colio','excludeHidden');
		};
		
		$('#filters a').click(function(){
			$(this).addClass('filter-active').siblings().removeClass('filter-active');
			// take class name from href attr and then run isotope to filter items in portfolio
			var href = $(this).attr('href').substr(1);
			filter = href ? '.' + href : '*';
			isotope_run(filter);
			return false;
		});
		
		// run isotope with "*" filter to show all items
		isotope_run(filter);
		
	});
&lt;/script>
</pre>

<p>Please pay attention to the fact that in code above 'hiddenItems' plugin option is set to '.isotope-hidden' and whenever isotope is executed to filter items a trigger('colio','excludeHidden') is called also to make Colio plugin aware about hidden items.</p>

<p>Now, here is Javascript code that binds Colio with another popular filter plugin called Quicksand</p>

<pre name="code" class="js">
&lt;script type="text/javascript">
	$(document).ready(function(){
		
		// "colio" plugin
		var run_colio = function(){
			$('#demo_1').remove();
			$('#my_portfolio').colio({
				id: 'demo_1',
				placement: 'before',
				onContent: function(content){
					// init plugins on loaded content
					$(content).find('.fancybox').fancybox();
				}
			});
		};
		
		// init "colio" first time
		run_colio();
			
		/* "quicksand" plugin */		
		var quicksand_run = function(items){
			$('#my_portfolio').quicksand(items, {
				retainExisting: false, adjustWidth:false, duration: 500
			}, run_colio);
		};
		
		// assign uniq ID to every portfolio item (required by quicksand)
		$('#my_portfolio li').each(function(n){
			$(this).attr('data-id', n);
		});
		
		// then make a copy
		var copy = $('#my_portfolio li').clone();
		
		// assign click handler to filter links
		$('#filters a').click(function(){
			$(this).addClass('filter-active').siblings().removeClass('filter-active');
			var href = $(this).attr('href').substr(1);
			filter = href ? '.' + href : '*';
			// run quicksand and pass in new set of filtered items
			quicksand_run(copy.filter(filter));
			return false;
		});
		
	});
&lt;/script>
</pre>

<p>Here "quicksand" plugin uses "retainExisting:false" option and a copy of portfolio items is made without events/data to make it possible to initialized Colio plugin from scratch on a new set of items.</p>

<p>In both examples JS code has comments, but if something isn't clear please contact me and I will be happy to answer any questions!</p>


<!-------------- DON'T EDIT AFTER THIS LINE -------------->

<br>
<p>
	<em>Thanks for reading!</em>
</p>

<div class="footer">
	<ul>
		<li><a class="top" href="#">Top</a></li>
		<li>flGravity &copy; 2013</li>
	</ul>
</div>
<script type="text/javascript">
        $(function(){
                var hash = '';
                
             	function scroll(name){
                	var anchor = document.getElementById(name);
                	if(anchor !== null){
                		$('html,body').animate({scrollTop: $(anchor).offset().top}, 'slow');
						anchor.id="tmp_"+name;
						hash='#'+name; 
						window.location.hash=name; 
						anchor.id=name;
					}
                }
                
                function hashchange(){
                	if(hash != window.location.hash){
						scroll(window.location.hash.substr(1));
                	}
                	
                }
                
               	$('a[href^="#"]').each(function(){
                        $(this).click(function(e){
							scroll($(this).attr('href').substr(1));
							e.preventDefault();
                        });
                });
                                
                setInterval(hashchange,500);
                
                $('.top').click(function(){
                	$('html, body').animate({scrollTop: 0}, 'slow')
            	});
        });
</script>

</body>

<!-- Mirrored from plugins.gravitysign.com/colio/docs/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 16 Oct 2020 05:40:41 GMT -->
</html>