From 393f99dab44ac83923696c316444258cda175faf Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Sun, 12 Jul 2015 22:57:33 +0200 Subject: [PATCH] new skin, improved demo --- bower.json | 2 +- css/chocolat.css | 51 +++++++-- demo.html | 87 --------------- images/close-compact.png | Bin 526 -> 0 bytes images/close.png | Bin 477 -> 1119 bytes images/fullscreen.png | Bin 723 -> 663 bytes images/left-compact.png | Bin 273 -> 0 bytes images/left.png | Bin 228 -> 1237 bytes images/right-compact.png | Bin 356 -> 0 bytes images/right.png | Bin 255 -> 1224 bytes index.html | 201 +++++++++++++++++++++++++++++++--- js/jquery.chocolat.js | 25 +++-- package.json | 2 +- readme.md | 5 +- test/src/test.chocolat.coffee | 3 +- 15 files changed, 247 insertions(+), 129 deletions(-) delete mode 100644 demo.html delete mode 100644 images/close-compact.png delete mode 100644 images/left-compact.png delete mode 100644 images/right-compact.png diff --git a/bower.json b/bower.json index ba51609..76fe5bc 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "chocolat", - "version": "0.4.5", + "version": "0.4.6", "main": [ "css/chocolat.css", "js/jquery.chocolat.js" diff --git a/css/chocolat.css b/css/chocolat.css index 540ff92..3991176 100644 --- a/css/chocolat.css +++ b/css/chocolat.css @@ -32,6 +32,7 @@ html, body, div, span{ left:0; top:0; z-index:16; + color: #fff; } .chocolat-zoomable .chocolat-img{ cursor : zoom-in; @@ -55,6 +56,7 @@ html, body, div, span{ left:50%; top:50%; z-index:14; + text-align: left; } .chocolat-content .chocolat-img{ @@ -101,9 +103,7 @@ html, body, div, span{ line-height:50px; height:50px; overflow: hidden; - font-size:12px; z-index: 17; - background: rgba(255, 255, 255, 0.2); } .chocolat-wrapper .chocolat-close{ width:50px; @@ -119,29 +119,41 @@ html, body, div, span{ bottom:0; left: 0; right: 0; - line-height:40px; - height:40px; + line-height:50px; + height:50px; font-size:12px; z-index: 17; - padding-left: 5px; - padding-right: 5px; - background: rgba(255, 255, 255, 0.2); + padding-left: 15px; + padding-right: 15px; + background: rgba(0, 0, 0, 0.2); + text-align: right; +} +.chocolat-wrapper .chocolat-set-title{ + display: inline-block; + padding-right: 15px; + line-height: 1; + border-right: 1px solid rgba(255, 255, 255, 0.3); } .chocolat-wrapper .chocolat-pagination{ float: right; display: inline-block; padding-left: 15px; + padding-right: 15px; + margin-right: 15px; + /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/ } .chocolat-wrapper .chocolat-fullscreen{ - width: 55px; - height: 55px; + width: 16px; + height: 50px; background: url(../images/fullscreen.png) 50% 50% no-repeat; display: block; margin:auto; cursor: pointer; + float: right; } -.chocolat-content .chocolat-description{ +.chocolat-wrapper .chocolat-description{ display: inline-block; + float: left; } /* compact view */ @@ -202,3 +214,22 @@ body.chocolat-open>.chocolat-content{ .chocolat-in-container{ position: relative; } + +/* uncomment to hide controls when zoomed-in*/ +/* +.chocolat-zoomable .chocolat-top, +.chocolat-zoomable .chocolat-bottom, +.chocolat-zoomable .chocolat-right, +.chocolat-zoomable .chocolat-left { + transition: opacity .3s ease, visibility 0s .3s; + opacity: 1; +} + +.chocolat-zoomable.chocolat-zoomed .chocolat-top, +.chocolat-zoomable.chocolat-zoomed .chocolat-bottom, +.chocolat-zoomable.chocolat-zoomed .chocolat-right, +.chocolat-zoomable.chocolat-zoomed .chocolat-left { + visibility: hidden; + opacity: 0; +} +*/ \ No newline at end of file diff --git a/demo.html b/demo.html deleted file mode 100644 index 05e927f..0000000 --- a/demo.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - Chocolat — demo - - - -
- on github -
- -

- Open in window, in cover mode (= no whitespace), looping : -

-
- - C - - - D - -
- -

- Display in a container : -

- -

- - A - - - B - -

- -
-

- Open previous lightbox on the second image via API : -

-
- TEST API -
- -

- Full window, contain: -

-
- - 1 - - - 2 - -
- - - \ No newline at end of file diff --git a/images/close-compact.png b/images/close-compact.png deleted file mode 100644 index 1436a7daadf8a1dd72b5d9937f72d5c349f4297b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 526 zcmV+p0`dKcP)KLZ*U+zZK3<12uwt~|df*uJ3vUQf-iKjLrpU5Em_ z07>B+2Ydjl2MGdd0rZyZAfN>3t*4U#s3)K+{!su1b!g-2=2rB1nx@(m_0sF>wh>=8 z`m%C$40W{P3*dVL;3$i>)tN0ztCO>Ye>cnL`YXLpQGhzx?7AIy7w>=m>|DSnOB*;a z&P~yh0000WV@Og>004&y004{)00AET003vA002H%00Brx000h50000AoVJ}+0001$ zNklGv0s-2Q zIvszVl1*zvwCOdyqxoL2FmZej@mA5LXtWg^xAST9LcrM ztRuL}eXfPkG*{b?cK|%U+X{T8_=|v_-w=NQC$~Jm+v0qzN4a$%s=yO%rV)r|z^fN7 zcObq4Rl5^(K>PqU#w&VvMcct}1f@$rb-d8mf$Hu;H-M^6QVpd?K&lh1p>zyY&48Ad&)5nt0XF`S}LlV%VeWvHU42C1QP=9vRhzfhK z+@1KeTJ!N9JpFLmcjFDbe|Y-tas{Zs$?cVl70>Usyk+CH*&Gj_E-k$OpD)Tvzng*C zGuEV$k$&Ow!bxRxTqIH%XXB_A_)19CrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z z`{c01MAQiIQ7Gz20GU?V`^?9Mg`TI*47*Ot|)F34wi|x6(8{6_MexaS<7&X?p50<-Xg0iORCpPU1Ko z6@iGzFplGqwRYlD6hp0sm6asPi7{rJ2XO$#m~oOMCmvJo1i+gm>AO_fMFDC80L%m6 zZQWa?AY%Yy%%}#yU6Pv9uI7o`sIePqr1`sB_dd8qMWimsEcEe$Wl^v! zYAWa|&^+L6yy#@fL*(;DwQoqz`Z_;J`0X{#}cU)}H===sg<=es{ zh=ukATWda=De$GJFDeQB86nrg9168~7BQ>S1bmfg1{Ga$g0DjxP$AeqI Q2LJ#707*qoM6N<$f=@&B`2YX_ delta 398 zcmV;90dfA{2;BoAiBL{Q4GJ0x0000DNk~Le0000D0000D2m}BC0NCOz_mLqN0s!-o zIvszl&_7B8K^(>L??lutS_JF4fP!na<>U{GU=d=9Y^qFV2Mu9&huNQh_68oo<9LG< zf)`OzTc`v}!B6#g&4UN(*$n%m&M}mg#B5^nSw7c?8xGh50PC7y#^Wo1s;)f0DcHWD z0A5ecus`B&_FaeqyZ}kz8wY#+7}=UpD%(a&-)KwBifkdjsGoi?-F7ElaDDvxI*)%jfzly-!hqI@#>H z9d{S+fBx)Tz$Z%^I55sl(UOxK0xo(0WJyFpRCwBS&an}IAP_{+ul6NWy;uYRi5khk9d7!9{T&l67jl*nJb_+8WB`o`Bo>gPf)AG(031BbHLyf>0*0Sl sFEKwaP*x?ZSg%#Bpm<% delta 180 zcmbQvdYM(RGr-TCmrII^fq{Y7)59eQNQ;0l2OE&=?Ud!+sHnwMU+n4P7*cWT&6Gf{ z1_c3^`z_O7{A+*3R@w7X-CM`W#bZU|-^+>V^H=9w4i=tkx=(T2&F4E9^46IC)Nq`b z;_$XMl3}4~sNTyr%2(p5c)dbXJhctN=jtxJ9{lm0T3q#^Q(WW! fchkOyW(?^C4ij=O#0dl4!O7t1>gTe~DWM4f5@AJD diff --git a/images/left-compact.png b/images/left-compact.png deleted file mode 100644 index 698d83a54d77a4cbfd7e3e76ab29376ad034d939..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 273 zcmeAS@N?(olHy`uVBq!ia0vp^av;pX0wgC|rfC8x&H|6fVg?3oVGw3ym^DWND5#L^ z5#-Cj&<@nu!^^-Z_m_boeGvnLT?7N8hdToUpAS$C*PLy0LxJ>kPZ!6Kid#v4&O6v8 zBuQMgSv51{Y>&ZGve*xNQ zLqkwdXm50Hb7*gHAW1_*AaHVTW@&6?004N}osvy!Q$ZAlpGhQjQA?2sE(bRz7zM#i z6vTYgD3{@e+b)ve=Jw7sx!C)`WNvMDg8mHs2QIpD=RfcRDY*7Wh|9!9jHXH#?X!Ak z=DeKqat6xpypGx~Z9jGpDr!DfB&B^%1XbRf!Q+(+;qt;sWprF5QW22D&s^84hl#6;8x@KGr0NaO`3IE%&K1E_4m+p-Ws z9DjN6^542&szRBm5%h#P0000WV@Og>004&y004{)00AET003vAkxmwW0(D75K~#9! z#F#N`5@8g_e;lPPN2!=Lc2JZw4u;5p#xOK-sf;x3NY}r1957= zG+jCxXeguxJ#Mlp6EHb|)2lNJgt-x-1g?%)dl_1<^)%lCcnz5hEC`eXwx05UKO zOaW%#3}^y%Kmm?`W34ZLHED>EfCXR)n9%`z0vrMrpfw7F18@S<46jq*0I2DOFacMA zMT}Dg_y)AQADDXtn}O@VMU0gU%!wUo_k%DA06XWS8F9I*{UENL!w&QUv4{-%55fUl zVLXz7KO&`(I?~X|c;!^TuR<)0n1;h>TFpKcVu{JIO3Zm3D| zczih$iENchrPm&hCuz{Vn3Y639;j$EdN~%0JujEb@7!+pmVuXZ$^_ij5~(Q4w$*A~ z*7NpevstrPEcXU~QV2t09u%0#WS#_r!DsvX`>%F)ci(D(s8*|W4Pj?f!VwLG2!%o) z>~{NuwY9ZPuh(1h`~7$euIudlz)X0wl0S63hI?Cjh%2%;|O@qz$;zke^6 z%RLPQ0-LE+>W%>r$0kuHZs=WEC=|jjmuto0aNHje;*)BB?`{rLx((0?@KLS%-zU_- z4m-Q(58;Z(sZ(Ko|3S2bEgz>2)On<{KGcQLkjDT}>AV8nMe3(;+UM!Aegj_y%^kI2 zjgAKW0zP+-g}or!VlJ>4d^8oH)N3y7*E5cUEuYiUTLxso*M4O{>r}odOzA|X^0EA% b_&WdyjG~_qH;83$00000NkvXXu0mjfS3NTn delta 175 zcmcc0`GiriGr-TCmrII^fq{Y7)59eQNb`Z%94tW6`0Dg86BWfL%Q5NHGh}(XIEGZ* zO8Rr&f#*X~#nA&Tv8VbTN;~tFX$rUX^O)XPx{#!iA zc4JF#)8(n#ip;=LCyZmCwI)fh%r=3gqaqdA&^sYG%6?O?I@7uu2 a!w|YcVS_Vkek0Hc44$rjF6*2U7@Gk3(nE;= diff --git a/images/right-compact.png b/images/right-compact.png deleted file mode 100644 index d5f1e435b9b330ccf1f7b2ff121e41ed0f55520c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 356 zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{33dtTpz6=cQKt(;g42*Jr85q)m z;&u@Xj2`X`417L7HC%JH%?$<8oCO|{#S9GG!XV7ZFl&wkQ1F$fi(`m~_uFZTe1{xF zTy}f(H6BQ~$f2TWAtLUuz(6AJ0Pha&Cg%cX5e=RPr~afKZQ&`oo+J2s()4Hkr~a_b z3JSkodX;T%!5P2EIlY@Kr2p@}VR`+DV4mHk4=?3!OnyCGu;(GO-d~Y`*fl&iJ<>jK ziq|o%>Yl1NyFqvB(=x$L-MN1zA9#QD_`=`wq-GvAowMlsgUR_HLNyLv_4EF+WLJdb zCe9mc_q3^Lkyf-GlXHu_I r3K5UKw{ugVSo&g}b8g<jGpDr!DXaAos%1XbRf!Q+(+;qt;sWprF5QW22D&s^84hl#6;8x@KGr0NaO`3IE%&K1E_4m+p-Ws z9DjN6^542&szRBm5%h#Pks&UB0%%D@K~#9!#F$Tr5@8s|e>1v&nB8b|m-bL5L_$b{ z5aA){GI{#akhyd)34*|5hmbC<(jKJ6!mT!SZPzZ} zgqgWBj*idO@6#XO_r34)yh@nU3UC@wfMvi5IDjMI7tjHI0{g&$(Jz&M46KoXbzl=% zG6CEL_JAgEYz1Nsa081>u0voKXqknOfD6C|(^C`p1oVeLaEw^&04@P%n64CHRh&qF z9E2nQPB9xTiO2nQ9E4{ECol?RK~&H`5Np7B?2!VrMM)zMl%X4Y<<@^+hgi2*hLdPf zuRa}OllkbZ4zXgg6aIaFxr!q9dc9IUpT9n7wK&9)Ok9$^Uaubxhr6n(rad0dJ5AFX zW;?2W5|$JU2A@}})u-`zJe$pCeP&Hj7H()+e!u@otyX)HNF=s0nao8KTbE^F$5WBd z=i6#D8n08S)OIqNJZEs5Qv$9Uxc661r*q8=P`lmUQ55C2Aqo+HNF3u9rPJxVE|<&D zwMC=Rn_jQ?PN7hEXpr|v0`B9RA`O65@~6nbfL`++3-#APcGtyb%CyFG` z@22)HOsWgK*A47{^PCK9Z_q`*h*WH+4n_F=192>3xt-e8=aIoC)e%8Mu>qht_ymSK zB!HubyOZ2CASw qt_>KS$~QzPoy$~i%l{L<2LM=`px=AHQZ$udlO6O~2l8CpGE978mM zlmGnxZ_m8;fTMz5yMZUOpTi&74&wthLXGkQ{}~=-81%a^Tw=MzW7N_p*m1RC2KNy~ zrWU3`L4n^57V8@&M7At>u-d`Lgkfi%n1DTFlIjG8jSHkZ9M@fD``p1|>hMRf!}oxV zk|Uo$J#&(^LBGcVmLuyMZg8KGab`+c7RtuP@I_SV + Chocolat — demo -
+ + +

+ Full window, contain: +

+ +

+ Full window, cover, looping : +

+ + +

+ Display in a container, looping : +

+ + + +
+ +

+ Display in a container, cover, with thumbnails : +

+ + + +
+ +

+ API use, in container, see code source
+ Open console to have details abouts events +

+ + Open then try
+ Next + Prev +
+ Enter cover mode / + Enter contain mode + +
+
+ Close + +
+ + \ No newline at end of file diff --git a/js/jquery.chocolat.js b/js/jquery.chocolat.js index 252edb7..1f63501 100644 --- a/js/jquery.chocolat.js +++ b/js/jquery.chocolat.js @@ -1,6 +1,6 @@ /* ** @author : Nicolas Turlais : nicolas-at-insipi.de -** @version : V0.4.5 - 4th of July 2015 +** @version : V0.4.6 - 4th of July 2015 ** @license : Licensed under CCAttribution-ShareAlike ** @website : http://chocolat.insipi.de */ @@ -18,7 +18,6 @@ linkImages : true, duration : 300, setTitle : '', - separator1 : '|', separator2 : '/', setIndex : 0, firstImage : 0, @@ -274,12 +273,9 @@ var that = this; var last = this.settings.lastImage + 1; var position = this.settings.currentImage + 1; - var separator = (this.settings.setTitle == '') ? '' : this.settings.separator1; this.elems.pagination - .html(that.settings.setTitle + ' ' - + separator + ' ' - + position + .html(position + ' ' + that.settings.separator2 + last) }, @@ -362,10 +358,6 @@ 'class' : 'chocolat-top' }).appendTo(this.elems.wrapper); - this.elems.fullscreen = $('', { - 'class' : 'chocolat-fullscreen' - }).appendTo(this.elems.top); - this.elems.left = $('
', { 'class' : 'chocolat-left' }).appendTo(this.elems.wrapper); @@ -378,6 +370,10 @@ 'class' : 'chocolat-bottom' }).appendTo(this.elems.wrapper); + this.elems.fullscreen = $('', { + 'class' : 'chocolat-fullscreen' + }).appendTo(this.elems.bottom); + this.elems.description = $('', { 'class' : 'chocolat-description' }).appendTo(this.elems.bottom); @@ -386,6 +382,11 @@ 'class' : 'chocolat-pagination' }).appendTo(this.elems.bottom); + this.elems.setTitle = $('', { + 'class' : 'chocolat-set-title', + 'html' : this.settings.setTitle + }).appendTo(this.elems.bottom); + this.elems.close = $('', { 'class' : 'chocolat-close' }).appendTo(this.elems.top); @@ -634,7 +635,7 @@ }, close : function(){ - that.close(); + return that.close(); }, next : function(){ @@ -653,7 +654,7 @@ }, place : function(){ - that.place(that.settings.currentImage, that.settings.duration); + return that.place(that.settings.currentImage, that.settings.duration); }, set : function(property, value){ diff --git a/package.json b/package.json index 9139717..61e5200 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chocolat", - "version": "0.4.5", + "version": "0.4.6", "description": " Responsive jQuery Lightbox Plugin", "main": [ "css/chocolat.css", diff --git a/readme.md b/readme.md index 8546d45..8ebf3d3 100644 --- a/readme.md +++ b/readme.md @@ -73,9 +73,6 @@ Index of the image that you want to start the series. **lastImage :** `default : 0` Index of the image that you want to end the series. -**separator1 :** `default : '|'` -Text between the title of the set and its position within the set, does not matter. - **separator2 :** `default : '/'` Text between the number of the image and the number of images in the set, does not matter. @@ -163,7 +160,7 @@ Set to the container when chocolat is zoomed ##Contributing ----------- -You are viewing the version 0.4.5 of chocolat. +You are viewing the version 0.4.6 of chocolat. Feel free to contribute by forking then making a pull request. ##Testing diff --git a/test/src/test.chocolat.coffee b/test/src/test.chocolat.coffee index 60b0349..66cb565 100644 --- a/test/src/test.chocolat.coffee +++ b/test/src/test.chocolat.coffee @@ -30,10 +30,11 @@ describe "Chocolat", -> expect($('#container .chocolat-wrapper').find('.chocolat-bottom').length).to.equal(1) expect($('#container .chocolat-wrapper').find('.chocolat-left').length).to.equal(1) expect($('#container .chocolat-wrapper').find('.chocolat-right').length).to.equal(1) - expect($('#container .chocolat-top').find('.chocolat-fullscreen').length).to.equal(1) expect($('#container .chocolat-top').find('.chocolat-close').length).to.equal(1) expect($('#container .chocolat-bottom').find('.chocolat-pagination').length).to.equal(1) expect($('#container .chocolat-bottom').find('.chocolat-description').length).to.equal(1) + expect($('#container .chocolat-bottom').find('.chocolat-fullscreen').length).to.equal(1) + expect($('#container .chocolat-bottom').find('.chocolat-set-title').length).to.equal(1) expect($('#container .chocolat-content').find('.chocolat-img').length).to.equal(1) it "should add css classes to parent when in container", (done) ->