diff --git a/archives/jquery.chocolat0.2.zip b/archives/jquery.chocolat0.2.zip deleted file mode 100644 index 0df60cf..0000000 Binary files a/archives/jquery.chocolat0.2.zip and /dev/null differ diff --git a/archives/jquery.chocolat0.3.zip b/archives/jquery.chocolat0.3.zip deleted file mode 100644 index d4825c2..0000000 Binary files a/archives/jquery.chocolat0.3.zip and /dev/null differ diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e09bca6 --- /dev/null +++ b/bower.json @@ -0,0 +1,20 @@ +{ + "name": "chocolat", + "version": "0.4.1", + "main": [ + "css/chocolat.css", + "js/jquery.chocolat.js", + ], + "license" : "CC-BY-2.0", + "dependencies": { + "jquery": "1.11.0" + }, + "authors": [ + { "name": "Nicolas Turlais", "email": "nicolas@insipi.de"," homepage": "http://nicolasturlais.com" } + ], + "homepage" : "http://chocolat.insipi.de", + "repository": { + "type": "git", + "url": "git://github.com/nicolas-t/Chocolat.git" + } +} \ No newline at end of file diff --git a/css/chocolat.css b/css/chocolat.css index e15f8e2..923a62b 100644 --- a/css/chocolat.css +++ b/css/chocolat.css @@ -1,112 +1,169 @@ -body{ - margin:0; - padding:0; -} -#Choco_overlay{ - background: #fff; - position: fixed; - top: 0; - left: 0; - z-index: 1000; - width: 100%; - height: 100%; - display:none; - padding:0; - margin:0; -} -#Choco_content{ - display:none; - width:800px; - height:600px; - z-index:1001; - position:fixed; - left:50%; - top:50%; - margin-left:-400px; - margin-top:-300px; - border-top:1px solid transparent;/*Yes, adjust image perfectly at the center of a box, don't know why.*/ -} -#Choco_left_arrow{ - float:left; - background-image:url(../images/left.gif); - background-position:12%; - left:-14%; -} -#Choco_right_arrow{ - float:right; - background-image:url(../images/right.gif); - background-position:88%; - left:14%; -} -.Choco_arrows{ - background-repeat:no-repeat; - display:none; - position:relative; - cursor:pointer; - width:49%; - top:-100%; - height:100%; - margin-top:-30px; -} -#Choco_container_photo{ - text-align:center; - width:800px; - height:600px; - /*background:url(../images/ajax-loader.gif) center center no-repeat;*/ -} -#Choco_container_description{ - padding:0; - height:26px; - width:100%; - color:#505050; - font-family:Tahoma; - clear:both; - position:relative; - font-size:12px; - margin-top:-5px; - overflow:hidden; - visibility:hidden; -} -#Choco_container_title{ - float:left; - padding:5px; -} -#Choco_container_via{ - padding:5px; - float:right; -} -#Choco_container_via a{ - color:gray; -} -#Choco_container_via a:hover{ - color:white; - background:gray; -} -#Choco_close{ - width:30px; - height:25px; - background-image:url(../images/close.gif); - background-repeat:no-repeat; - z-index:1002; - cursor:pointer; - margin-top:-20px; - display:none; -} -#Choco_loading{ - width:9px; - height:11px; - background-image:url(../images/loading.gif); - background-repeat:no-repeat; - z-index:1002; - cursor:pointer; - float:right; - margin-top:-20px; - display:none; -} -#Choco_bigImage{ - display:none; - position:relative; - width:100%; - height:100%; - margin-top:-5px; +/* + CSS RESET +*/ + +html, body, div, span{ + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} +.chocolat-open{ + overflow: hidden; +} +.chocolat-overlay{ + height:100%; + width:100%; + position:fixed; + left:0; + top:0; + z-index:10; + background-color:#fff; + display:none; + opacity: 0.8; +} +.chocolat-loader{ + height:32px; + width:32px; + position:fixed; + left:50%; + top:50% ; + margin-left:-32px; + margin-top:-32px; + z-index:11; + background:url(../images/loader.gif); + display:none; +} +.chocolat-content{ + position:fixed; + width:0px; + height:0px; + left:50%; + top:50%; + z-index:14; +} + +.chocolat-content .chocolat-img{ + opacity:0; + position:absolute; + width:100%; + height:100%; +} +.chocolat-content .chocolat-left{ + position:absolute; + left:-50px; + width:50%; + height:100%; + padding-right:50px; + cursor:pointer; + background:url(../images/left.png) 4% 50% no-repeat; +} +.chocolat-content .chocolat-right{ + position:absolute; + right:-50px; + width:50%; + height:100%; + padding-left:50px; + cursor:pointer; + background:url(../images/right.png) 96% 50% no-repeat; +} + +.chocolat-content .chocolat-top{ + position:absolute; + top:-40px; + width:100%; + line-height:40px; + height:40px; + font-size:12px; +} +.chocolat-content .chocolat-close{ + width:40px; + height:40px; + cursor:pointer; + float:left; + background:url(../images/close.png) 0% center no-repeat; +} +.chocolat-content .chocolat-bottom{ + position:absolute; + bottom:-40px; + width:100%; + line-height:40px; + height:40px; + font-size:12px; +} +.chocolat-content .chocolat-pagination{ + float:right; + display: inline-block; +} +.chocolat-content .chocolat-description{ + display: inline-block; +} + +/* compact view */ +.chocolat-cover .chocolat-content .chocolat-left, +.chocolat-cover .chocolat-content .chocolat-right{ + position: fixed; + height: 100%; + top: 0; + padding: 0px; +} +.chocolat-cover .chocolat-content .chocolat-right{ + right:0px; + background:url(../images/right-compact.png) 100% 50% no-repeat; +} +.chocolat-cover .chocolat-content .chocolat-left{ + left:0; + background:url(../images/left-compact.png) 0% 50% no-repeat; +} +.chocolat-cover .chocolat-content .chocolat-top{ + top: 0; + left: 0; + position: fixed; + z-index: 1; +} +.chocolat-cover .chocolat-content .chocolat-close{ + background:url(../images/close-compact.png) 0% center no-repeat; +} +.chocolat-cover .chocolat-content .chocolat-bottom{ + bottom: 0; + left: 0; + position: fixed; + background: rgba(255,255,255,0.75); + z-index: 1; +} +.chocolat-cover .chocolat-content .chocolat-pagination, +.chocolat-cover .chocolat-content .chocolat-description{ + padding: 0 10px; +} + +/* mobile view */ +.chocolat-mobile .chocolat-content .chocolat-left{ + left:0; + padding-right: 10px; + background:url(../images/left-compact.png) 4% 96% no-repeat; +} +.chocolat-mobile .chocolat-content .chocolat-right{ + right:0px; + padding-left: 10px; + background:url(../images/right-compact.png) 96% 96% no-repeat; +} + +/* no container mode*/ +body.chocolat-open>.chocolat-overlay{ + z-index:15; +} +body.chocolat-open>.chocolat-loader{ + z-index:16; +} +body.chocolat-open>.chocolat-content{ + z-index:17; +} + +/* container mode*/ +.chocolat-in-container .chocolat-content, +.chocolat-in-container .chocolat-overlay{ + position: absolute; +} +.chocolat-in-container{ + position: relative; } diff --git a/demo.html b/demo.html deleted file mode 100644 index 2190ae6..0000000 --- a/demo.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - Chocolat Responsive Lightbox Demo - - - - - - - - - - -
Exemple 1. Default
-

- - - - - - - - - -

- -
Exemple 2. linkImages : false
-

- - - - - - - - - -

- -
Exemple 3. displayAsALink : true, + title set in params
-

- - - -

- -
Exemple 4. In a container. overlayColor & overlayOpacity
-

- - - - - - - - - -

-
- -
Exemple 5. displayAsALink : true, + links appended in a specific ul (id:containerLinks)
-

- - - -

-

- - - -

- -
Exemple 6. Black Template
-

- - - - - - - - - -

- Learn more - - diff --git a/images/ban3.png b/images/ban3.png deleted file mode 100644 index 06c20b2..0000000 Binary files a/images/ban3.png and /dev/null differ diff --git a/images/close-compact.png b/images/close-compact.png new file mode 100644 index 0000000..9a16e11 Binary files /dev/null and b/images/close-compact.png differ diff --git a/images/close.gif b/images/close.gif deleted file mode 100644 index 77933f7..0000000 Binary files a/images/close.gif and /dev/null differ diff --git a/images/close.png b/images/close.png new file mode 100644 index 0000000..8adc2b1 Binary files /dev/null and b/images/close.png differ diff --git a/images/closew.gif b/images/closew.gif deleted file mode 100644 index 30df8c2..0000000 Binary files a/images/closew.gif and /dev/null differ diff --git a/images/left-compact.png b/images/left-compact.png new file mode 100644 index 0000000..ef64cb1 Binary files /dev/null and b/images/left-compact.png differ diff --git a/images/left.gif b/images/left.gif deleted file mode 100644 index 51f6ad6..0000000 Binary files a/images/left.gif and /dev/null differ diff --git a/images/left.png b/images/left.png new file mode 100644 index 0000000..0259902 Binary files /dev/null and b/images/left.png differ diff --git a/images/leftw.gif b/images/leftw.gif deleted file mode 100644 index bd831a6..0000000 Binary files a/images/leftw.gif and /dev/null differ diff --git a/images/loader.gif b/images/loader.gif new file mode 100644 index 0000000..3c2f7c0 Binary files /dev/null and b/images/loader.gif differ diff --git a/images/loading.gif b/images/loading.gif deleted file mode 100644 index c0bb352..0000000 Binary files a/images/loading.gif and /dev/null differ diff --git a/images/loadingw.gif b/images/loadingw.gif deleted file mode 100644 index 50695c0..0000000 Binary files a/images/loadingw.gif and /dev/null differ diff --git a/images/right-compact.png b/images/right-compact.png new file mode 100644 index 0000000..bf1ff2e Binary files /dev/null and b/images/right-compact.png differ diff --git a/images/right.gif b/images/right.gif deleted file mode 100644 index 9c6f329..0000000 Binary files a/images/right.gif and /dev/null differ diff --git a/images/right.png b/images/right.png new file mode 100644 index 0000000..76e6428 Binary files /dev/null and b/images/right.png differ diff --git a/images/rightw.gif b/images/rightw.gif deleted file mode 100644 index dda82ad..0000000 Binary files a/images/rightw.gif and /dev/null differ diff --git a/img/1.jpg b/img/1.jpg new file mode 100644 index 0000000..56c0604 Binary files /dev/null and b/img/1.jpg differ diff --git a/img/2.jpg b/img/2.jpg new file mode 100644 index 0000000..1913ce8 Binary files /dev/null and b/img/2.jpg differ diff --git a/img/a.jpg b/img/a.jpg new file mode 100644 index 0000000..3c28aa6 Binary files /dev/null and b/img/a.jpg differ diff --git a/img/b.jpg b/img/b.jpg new file mode 100644 index 0000000..690226a Binary files /dev/null and b/img/b.jpg differ diff --git a/img/c.jpg b/img/c.jpg new file mode 100644 index 0000000..8edaaf5 Binary files /dev/null and b/img/c.jpg differ diff --git a/img/d.jpg b/img/d.jpg new file mode 100644 index 0000000..dd87f01 Binary files /dev/null and b/img/d.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..59f7142 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + + Chocolat + + + +
+ TEST API +
+ + +

+ + A + + + B + +

+ +

+ + 1 + + + 2 + +

+ +

+ + C + + + D + +

+
+
+
+ + + \ No newline at end of file diff --git a/js/jquery.chocolat.js b/js/jquery.chocolat.js index 664a44a..318555f 100644 --- a/js/jquery.chocolat.js +++ b/js/jquery.chocolat.js @@ -1,294 +1,508 @@ -/* - Inspired by the lightbox plugin adapted to jquery by Leandro Vieira Pinho (http://leandrovieira.com) - - @author : Nicolas Turlais : nicolas-at-insipi.de - @version : V0.3.1 - June 2012 - @license : Licensed under CCAttribution-ShareAlike - @website : http://chocolat.insipi.de - -*/ -(function($) { - images = []; - var calls = 0; - $.fn.Chocolat = function(settings) { - settings = $.extend({ - container : $('body'), - displayAsALink : false, - linkImages : true, - linksContainer : 'Choco_links_container', - overlayOpacity : 0.9, - overlayColor : '#fff', - fadeInOverlayduration : 500, - fadeInImageduration : 500, - fadeOutImageduration : 500, - vache : true, - separator1 : ' | ', - separator2 : '/', - leftImg : 'images/left.gif', - rightImg : 'images/right.gif', - closeImg : 'images/close.gif', - loadingImg : 'images/loading.gif', - currentImage : 0, - setIndex : 0, - setTitle : '', - lastImage : 0 - },settings); - - calls++; - settings.setIndex = calls; - images[settings.setIndex] = []; - - //images: - this.each(function(index){ - if(index == 0 && settings.linkImages && settings.setTitle == ''){ - settings.setTitle = isSet($(this).attr('rel'), ' '); - } - $(this).each(function() { - images[settings.setIndex]['displayAsALink'] = settings.displayAsALink; - images[settings.setIndex][index] = []; - images[settings.setIndex][index]['adress'] = isSet($(this).attr('href'), ' '); - images[settings.setIndex][index]['caption'] = isSet($(this).attr('title'), ' '); - if(!settings.displayAsALink){ - $(this).unbind('click').bind('click', { - id : settings.setIndex, - nom : settings.setTitle, - i : index - }, _initialise); - } - }) - }); - - //setIndex: - for(var i = 0; i < images[settings.setIndex].length; i++) - { - if(images[settings.setIndex]['displayAsALink']){ - if($('#'+settings.linksContainer).size() == 0){ - this.filter(":first").before(''); - } - $('#'+settings.linksContainer).append('
  • '+settings.setTitle+'
    • '); - e = this.parent(); - $(this).remove(); - if($.trim(e.html()) == ""){//If parent empty : remove it - e.remove(); - } - return $('#Choco_numsetIndex_'+settings.setIndex).unbind('click').bind('click', {id: settings.setIndex, nom : settings.setTitle, i : settings.currentImage}, _initialise); - } - } - - function _initialise(event) { - - settings.currentImage = event.data.i; - settings.setIndex = event.data.id; - settings.setTitle = event.data.nom; - settings.lastImage = images[settings.setIndex].length - 1; - showChocolat(); - return false; - } - function _interface(){ - //html - clear(); - settings.container.append('
    '); - $('#Choco_left_arrow').css('background-image', 'url('+settings.leftImg+')'); - $('#Choco_right_arrow').css('background-image', 'url('+settings.rightImg+')'); - $('#Choco_close').css('background-image', 'url('+settings.closeImg+')'); - $('#Choco_loading').css('background-image', 'url('+settings.loadingImg+')'); - if(settings.container.get(0).nodeName.toLowerCase() !== 'body'){ - settings.container.css({'position':'relative','overflow':'hidden','line-height':'normal'});//yes, yes - $('#Choco_content').css('position','relative'); - $('#Choco_overlay').css('position', 'absolute'); - } - //events - $(document).unbind('keydown').bind('keydown', function(e){ - switch(e.keyCode){ - case 37: - changePageChocolat(-1); - break; - case 39: - changePageChocolat(1); - break; - case 27: - close(); - break; - }; - }); - if(settings.vache){ - $('#Choco_overlay').click(function(){ - close(); - return false; - }); - } - $('#Choco_left_arrow').unbind().bind('click', function(){ - changePageChocolat(-1); - return false; - }); - $('#Choco_right_arrow').unbind().bind('click', function(){ - changePageChocolat(1); - return false; - }); - $('#Choco_close').unbind().bind('click', function(){ - close(); - return false; - }); - $(window).resize(function() { - load(settings.currentImage,true); - }); - - } - function showChocolat(){ - _interface(); - load(settings.currentImage, false); - $('#Choco_overlay') - .css({ - 'background-color' : settings.overlayColor, - 'opacity' : settings.overlayOpacity - }) - .fadeIn(settings.fadeInOverlayduration); - $('#Choco_content').fadeIn(settings.fadeInImageduration,function(){}); - - } - function load(image,resize){ - settings.currentImage = image; - $('#Choco_loading').fadeIn(settings.fadeInImageduration); - var imgPreloader = new Image(); - imgPreloader.onload = function(){ - $('#Choco_bigImage').attr('src',images[settings.setIndex][settings.currentImage]['adress']); - var ajustees = iWantThePerfectImageSize(imgPreloader.height,imgPreloader.width); - ChoColat(ajustees['hauteur'],ajustees['largeur'],resize); - $('#Choco_loading').stop().fadeOut(settings.fadeOutImageduration); - }; - imgPreloader.src = images[settings.setIndex][settings.currentImage]['adress']; - preload(); - upadteDescription(); - } - function changePageChocolat(signe){ - if(!settings.linkImages || (settings.currentImage == 0 && signe == -1) || (settings.currentImage == settings.lastImage && signe == 1)) - { - return false; - } - else{ - //$('#Choco_container_description').fadeTo(settings.fadeOutImageduration,0); making a weird bug with firefox 17 - $('#Choco_container_description').css('visibility','hidden'); - $('#Choco_bigImage').fadeTo(settings.fadeOutImageduration, 0, function(){ - load(settings.currentImage + parseInt(signe), false); - }); - } - } - function ChoColat(hauteur_image,largeur_image,resize){ - - if(resize){ - $('#Choco_container_photo, #Choco_content, #Choco_bigImage').stop(true,false).css({'overflow':'visible'}); - $('#Choco_bigImage').animate({ - 'height' : hauteur_image+'px', - 'width' : largeur_image+'px' - },settings.fadeInImageduration); - } - $('#Choco_container_photo').animate({ - 'height' : hauteur_image, - 'width' : largeur_image - },settings.fadeInImageduration); - $('#Choco_content').animate({ - 'height' : hauteur_image, - 'width' : largeur_image, - 'marginLeft' : -largeur_image/2, - 'marginTop' : -(hauteur_image)/2 - },settings.fadeInImageduration, 'swing', function(){ - $('#Choco_bigImage').fadeTo(settings.fadeInImageduration, 1).height(hauteur_image).width(largeur_image); - if(!resize) - { - arrowsManaging(); - //$('#Choco_container_description').fadeTo(settings.fadeInImageduration,1); making a weird bug with firefox 17 - $('#Choco_container_description').css('visibility','visible'); - $('#Choco_close').fadeIn(settings.fadeInImageduration); - } - }). - css('overflow', 'visible'); - } - function arrowsManaging(){ - if(settings.linkImages){ - var what = ['Choco_right_arrow','Choco_left_arrow']; - for(var i=0; i < what.length; i++){ - hide = false; - if(what[i] == 'Choco_right_arrow' && settings.currentImage == settings.lastImage){ - hide = true; - $('#'+what[i]).fadeOut(300); - } - else if(what[i] == 'Choco_left_arrow' && settings.currentImage == 0){ - hide = true; - $('#'+what[i]).fadeOut(300); - } - if(!hide){ - $('#'+what[i]).fadeIn(settings.fadeOutImageduration); - } - } - } - } - function preload(){ - if(settings.currentImage !== settings.lastImage){ - i = new Image; - z = settings.currentImage + 1; - i.src = images[settings.setIndex][z]['adress']; - } - } - function upadteDescription(){ - var current = settings.currentImage + 1; - var last = settings.lastImage + 1; - $('#Choco_container_title').html(images[settings.setIndex][settings.currentImage]['caption']); - $('#Choco_container_via').html(settings.setTitle+settings.separator1+current +settings.separator2+last); - } - function isSet(variable,defaultValue){ - // return variable === undefined ? defaultValue : variable; ? - if (variable === undefined) { - return defaultValue; - } - else{ - return variable; - } - } - function iWantThePerfectImageSize(himg,limg){ - //28% = 14% + 14% margin - var lblock = limg + (limg*28/100); - var heightDescAndClose = $('#Choco_container_description').height()+$('#Choco_close').height(); - var hblock = himg + heightDescAndClose; - var k = limg/himg; - var kk = himg/limg; - if(settings.container.get(0).nodeName.toLowerCase() == 'body'){ - windowHeight = $(window).height(); - windowWidth = $(window).width(); - } - else{ - windowHeight = settings.container.height(); - windowWidth = settings.container.width(); - } - notFitting = true; - while (notFitting){ - var lblock = limg + (limg*28/100); - var hblock = himg + heightDescAndClose; - if(lblock > windowWidth){ - limg = windowWidth*100/128; - - himg = kk * limg; - }else if(hblock > windowHeight){ - himg = (windowHeight - heightDescAndClose); - limg = k * himg; - }else{ - notFitting = false; - }; - }; - return { - largeur:limg, - hauteur:himg - }; - - } - function clear(){ - $('#Choco_overlay').remove(); - $('#Choco_content').remove(); - } - function close(){ - $('#Choco_overlay').fadeOut(900, function(){$('#Choco_overlay').remove()}); - $('#Choco_content').fadeOut(500, function(){$('#Choco_content').remove()}); - settings.currentImage = 0; - } - -}; -})(jQuery); +/* +** @author : Nicolas Turlais : nicolas-at-insipi.de +** @version : V0.4.1 - 16 April 2014 +** @license : Licensed under CCAttribution-ShareAlike +** @website : http://chocolat.insipi.de +**/ + +; (function($, window, document, undefined) { + var calls = 0; + var defaults = { + container : window, + linksContainer : '.chocolat-links', + imageSelector : '.chocolat-image', + fullWindow : false, // false, 'contain', or 'cover' + fullScreen : false, + displayAsALink : false, + loop : false, + linkImages : true, + setTitle : '', + separator1 : '|', + separator2 : '/', + mobileBreakpoint : 480, + setIndex : 0, + firstImage : 0, + lastImage : false, + currentImage : false, + initialized : false, + timer : false, + timerDebounce : false, + images : [] + }; + + function Chocolat(element, settings) { + var that = this; + + this.settings = settings; + this._defaults = defaults; + this.elems = {}; + + element.find(this.settings.imageSelector).each(function () { + that.settings.images.push({ + title : $(this).attr('title'), + src : $(this).attr('href'), + height : false, + width : false + }); + }); + + if(settings.displayAsALink){ + this.createLink().off('click').on('click', function(e){ + that.init(that.settings.firstImage); + e.preventDefault(); + }); + + element.hide(); + } + else{ + element.find(this.settings.imageSelector).each(function (i) { + $(this).off('click').on('click', function(event){ + that.init(i); + event.preventDefault(); + }); + }); + } + + //return an API YEAH! + return { + open : function(i){ + var i = i || 0; + that.init(i); + }, + + close : function(){ + that.close(); + }, + + next : function(){ + that.change(1); + }, + + prev : function(){ + that.change(-1); + }, + + goto : function(i){ // open alias + that.init(i); + }, + current : function(){ + return that.currentImage; + } + }; + } + + Chocolat.prototype = { + init : function(i) { + if(!this.settings.initialized){ + this.setDomContainer(); + this.markup(); + this.events(); + this.settings.lastImage = this.settings.images.length - 1; + this.settings.initialized = true; + } + + this.load(i); + }, + + preload : function(i, callback) { + callback = this.optFuncParam(callback); + imgLoader = new Image(); + imgLoader.onload = $.proxy(callback, this, i, imgLoader); + imgLoader.src = this.settings.images[i].src; + }, + + load : function(i) { + + if(this.settings.fullScreen){ + this.openFullScreen(); + } + + if(this.settings.currentImage === i){ + return; + } + + this.elems.overlay.fadeIn(800); + + this.settings.timer = setTimeout(function(){ + $.proxy(this.elems.loader.fadeIn(), this) + },400); + this.preload(i,this.place); + }, + + place : function(i, imgLoader) { + var that = this; + + this.settings.currentImage = i; + this.description(); + this.pagination(); + this.breakpoint(); + + this.elems.img.fadeTo(200,0, function() { + that.storeImgSize(imgLoader, i); + fitting = that.fit( + that.settings.images[i].height, + that.settings.images[i].width, + $(that.settings.container).height(), + $(that.settings.container).width(), + that.getOutMarginH(), + that.getOutMarginW() + ); + that.center( + fitting.width, + fitting.height, + fitting.left, + fitting.top, + 150, + that.appear(i) + ); + that.arrows(); + }); + }, + + appear : function(i) { + var that = this; + clearTimeout(this.settings.timer); + + this.elems.loader.stop().fadeOut(300, function() { + that.elems.img + .attr('src', that.settings.images[i].src) + .fadeTo(400,1); + }); + }, + + fit : function(imgHeight, imgWidth, holderHeight, holderWidth, holderOutMarginH, holderOutMarginW) { + var holderGlobalWidth = holderWidth-holderOutMarginW; + var holderGlobalHeight = holderHeight-holderOutMarginH; + var holderGlobalRatio = (holderGlobalHeight / holderGlobalWidth); + var holderRatio = (holderHeight / holderWidth); + var imgRatio = (imgHeight / imgWidth); + + if(this.settings.fullWindow == 'cover') { + if(imgRatio < holderRatio) { + height = holderHeight; + width = height / imgRatio; + + } + else { + width = holderWidth; + height = width * imgRatio; + } + } + else { + if(imgRatio>holderGlobalRatio) { + height = holderGlobalHeight; + width = height / imgRatio; + } + else { + width = holderGlobalWidth; + height = width * imgRatio; + } + if(!this.settings.fullWindow && (width >= imgWidth || height >= imgHeight)) { + width=imgWidth; + height=imgHeight; + } + } + + return { + 'height' : height, + 'width' : width, + 'top' : (holderHeight - height)/2, + 'left' : (holderWidth - width)/2 + } + }, + + center : function(width, height, left, top, duration, callback) { + callback = this.optFuncParam(callback); + this.elems.content.animate({ + 'width' :width, + 'height' :height, + 'left' :left, + 'top' :top + }, duration, $.proxy(callback(), this)) + .css('overflow', 'visible'); + }, + + change : function(signe) { + var requestedImage = this.settings.currentImage + parseInt(signe); + if(requestedImage > this.settings.lastImage) { + if(this.settings.loop){ + this.load(0); + } + } + else if(requestedImage < 0) { + if(this.settings.loop) { + this.load(this.settings.lastImage); + } + } + else { + this.load(requestedImage); + } + }, + + arrows: function() { + if(this.settings.loop) { + $([this.elems.left[0],this.elems.right[0]]) + .css('display','block'); + } + else if(this.settings.linkImages) { + // right + if(this.settings.currentImage == this.settings.lastImage) { + this.elems.right.fadeOut(300); + } + else { + this.elems.right.fadeIn(300); + } + // left + if(this.settings.currentImage == 0) { + this.elems.left.fadeOut(300); + } + else { + this.elems.left.fadeIn(300); + } + } + else { + $([this.elems.left[0],this.elems.right[0]]) + .css('display','none'); + } + }, + + description : function() { + var that = this; + this.elems.description.fadeTo(200, 0, function() { + $(this) + .html(that.settings.images[that.settings.currentImage].title) + .fadeTo(400,1); + }); + }, + + pagination : function() { + 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.fadeTo(200, 0, function() { + $(this) + .html(that.settings.setTitle + ' ' + + separator + ' ' + + position + + that.settings.separator2 + + last) + .fadeTo(400,1); + }); + }, + + breakpoint : function() { + if($(this.settings.container).width() < this.settings.mobileBreakpoint) { + this.elems.domContainer.addClass('chocolat-mobile'); + } + else { + this.elems.domContainer.removeClass('chocolat-mobile'); + } + }, + + storeImgSize : function(img, i) { + if(!this.settings.images[i].height || !this.settings.images[i].width){ + this.settings.images[i].height = img.height; + this.settings.images[i].width = img.width; + } + }, + + close : function() { + var els = [ + this.elems.overlay[0], + this.elems.loader[0], + this.elems.content[0] + ]; + var that = this; + $.when($(els).fadeOut(200)).then(function () { + that.elems.domContainer.removeClass('chocolat-open chocolat-mobile chocolat-in-container chocolat-cover'); + }); + this.settings.currentImage = false; + this.settings.initialized = false; + }, + + getOutMarginW : function() { + var left = this.elems.left.outerWidth() - this.elems.left.width(); + var right = this.elems.right.outerWidth() - this.elems.right.width(); + return left + right; + }, + + getOutMarginH : function() { + return this.elems.top.outerHeight() + this.elems.bottom.outerHeight(); + }, + + markup : function() { + this.elems.domContainer.addClass('chocolat-open'); + if(this.settings.fullWindow == 'cover') { + this.elems.domContainer.addClass('chocolat-cover'); + } + if(this.settings.container !== window) { + this.elems.domContainer.addClass('chocolat-in-container'); + } + var that = this; + + this.elems.overlay = $('
    ', { + 'class' : 'chocolat-overlay' + }).appendTo(this.elems.domContainer); + + this.elems.loader = $('
    ', { + 'class' : 'chocolat-loader' + }).appendTo(this.elems.domContainer); + + this.elems.content = $('
    ', { + 'class' : 'chocolat-content', + 'id' : 'chocolat-content-' + this.settings.setIndex + }).appendTo(this.elems.domContainer); + + this.elems.img = $('', { + 'class' : 'chocolat-img', + 'src' : '' + }).appendTo(this.elems.content); + + this.elems.top = $('
    ', { + 'class' : 'chocolat-top' + }).appendTo(this.elems.content); + + this.elems.left = $('
    ', { + 'class' : 'chocolat-left' + }).appendTo(this.elems.content); + + this.elems.right = $('
    ', { + 'class' : 'chocolat-right' + }).appendTo(this.elems.content); + + this.elems.bottom = $('
    ', { + 'class' : 'chocolat-bottom' + }).appendTo(this.elems.content); + + this.elems.description = $('', { + 'class' : 'chocolat-description' + }).appendTo(this.elems.bottom); + + this.elems.pagination = $('', { + 'class' : 'chocolat-pagination' + }).appendTo(this.elems.bottom); + + this.elems.close = $('', { + 'class' : 'chocolat-close' + }).appendTo(this.elems.top); + }, + + createLink : function() { + var li = $('
  • ').appendTo(this.settings.linksContainer); + + return $('', { + 'id' : 'chocolat-set-'+this.settings.setIndex, + 'class' : 'chocolat-link', + 'href' : '#' + }) + .html(this.settings.setTitle) + .appendTo(li); + }, + + openFullScreen : function() { + var docElm = document.documentElement; + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } + else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } + else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } + }, + + events : function() { + var that = this; + + $(document).off('keydown').on('keydown', function(e) { + if(e.keyCode == 37) { + that.change(-1); + } + else if(e.keyCode == 39) { + that.change(1); + } + else if(e.keyCode == 27) { + that.close(); + } + }); + $(this.elems.content).find('.chocolat-right') + .off('click') + .on('click', function() { + that.change(+1); + }); + + $(this.elems.content).find('.chocolat-left') + .off('click') + .on('click', function() { + that.change(-1); + }); + + $([this.elems.overlay[0], this.elems.close[0]]) + .off('click') + .on('click', function() { + that.close(); + }); + + $(window).on('resize', function() { + if(!that.settings.initialized){ + return; + } + that.debounce(50, function() { + that.breakpoint(); + fitting = that.fit( + that.settings.images[that.settings.currentImage].height, + that.settings.images[that.settings.currentImage].width, + $(that.settings.container).height(), + $(that.settings.container).width(), + that.getOutMarginH(), + that.getOutMarginW() + ); + that.center(fitting.width, fitting.height, fitting.left, fitting.top, 150); + }); + }); + }, + + setDomContainer : function() { + // if container == window + // domContainer = body + + if(typeof this.settings.container === 'object') { + this.elems.domContainer = $('body'); + } + else { + this.elems.domContainer = $(this.settings.container); + } + + }, + + debounce: function(duration, callback) { + clearTimeout(this.settings.timerDebounce); + this.settings.timerDebounce = setTimeout(function() { + callback(); + }, duration); + }, + + optFuncParam: function(f) { + if(!$.isFunction(f)){return function(){};} + else{return f;} + } + }; + + $.fn['Chocolat'] = function (options) { + return this.each(function() { + + calls++; + + var settings = $.extend(true, {}, defaults, options, {setIndex:calls} ); + + if (!$.data(this, 'api-chocolat')) { + $.data(this, 'api-chocolat', + new Chocolat($(this), settings) + ); + } + }); + } +})( jQuery, window, document ); \ No newline at end of file diff --git a/readme.md b/readme.md index 43f96f7..692b579 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ -The new version is finished, you can test it here : ------------ -https://github.com/nicolas-t/Chocolat/tree/V0.4 ------------ +##Contribute +----------- +You are viewing the branch v0.4 of chocolat, it's an under development branch of the plugin. +Feel free to contribute by forking then making a pull request. ##Chocolat ----------- @@ -17,100 +17,126 @@ IE 7+, Safari, Firefox & Chrome. ##Demo ----------- -http://chocolat.insipi.de/en/Demonstration/ +Dev version, clone it to see a demo ##Markup ----------- ```html -

    - - - - - - - - - -

    + ``` ```js $(document).ready(function(){ - $('#example1 a').Chocolat(); + $('#example1').Chocolat(); }); ``` ##Documentation ----------- -http://chocolat.insipi.de/en/Documentation/ -###### General -**container:** `default:$('body')` -Sets whether viewer will open and fill the whole page (`default`) , or whether it should open in a particular block of the page. For example ` $('# container')` in this case the height and width of the block must be defined. - -**displayAsALink :** `default:false` -Used to group images, from the same call, in a single link that replaces the html code links to the images (`true`). Otherwise (`false`) the html code is not changed and the images of the series may be called individually. In this case the links can be thumbnails or text. +### Parameters +**container:** `default:window` +Sets whether viewer will open and fill the whole page (`default`) , or whether it should open in a particular block of the page. For example ` #container2` in this case the height and width of the block must be defined. **linkImages :** `default : true ` Sets whether we can switch from one image to another, within the same call, without closing the viewer (`true`) , or if the images remain independent (`false`). -Warning: if `LinkImage`: is `false` then `displayAsALink` must be worth `false` too. Otherwise we can only view the first image in the set. - -**linksContainer :** `default : Choco_links_container` -This parameter must be the id of an element `ul` . When `displayAsALink`: is set to `true` this parameter define in which element the link calling the series will be created. If not set the link will be created before the element on which chocolat is called. - -###### Appearance -**overlayOpacity :** `default : 0.9` - Opacity of the background that covers the surface of the `container` (the whole page in most cases). - -**overlayColor :** `default : #fff` -Css value of the background color, ( `rgb ()` , `hexadecimal` , or `name` ). - -**fadeInOverlayduration :** `default : 500` -Background fade in duration, in `milliseconds`, or `slow` , `fast`. - -**fadeInImageduration :** `default : 500` -Background fade in duration, in `milliseconds`, or `slow` , `fast`. - -**fadeInImageduration :** `default : 500` -Image fade in duration, in `milliseconds`, or `slow` , `fast`. - -**fadeOutImageduration :** `default : 500` -Image fade out duration, in `milliseconds`, or `slow` , `fast`. - -**vache :** `default : true` -Sets whether a click on the background closes (`true`) or not (`false`) the viewer. - +Warning: if `LinkImage`: is `false` then `displayAsALink` must be worth `false` too. Otherwise we can only view the first image in the set. + +**displayAsALink :** `default:false` +Used to group images, from the same call, in a single link that replaces the html code links to the images (`true`). Otherwise (`false`) the html code is not changed and the images of the series may be called individually. In this case the links can be thumbnails or text. + +**linksContainer :** `default : .chocolat-links` +This parameter must be the selector of an element `ul` . When `displayAsALink`: is set to `true` this parameter define in which element the link calling the series will be created. If not set the link will be created before the element on which chocolat is called. + +**setTitle :** `default : ""` +title of the set. + +**fullWindow :** `default : false` +Can be `false`, `'contain'`, or `'cover'`. +`false` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions +`'contain'` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window +`'cover'` : the image cover the window, no white space are displayed. (only if container == window) +more informations & exemple about contain/cover : http://www.w3schools.com/cssref/css3_pr_background-size.asp + +**fullScreen :** `default : false` +HTML5 new feature. Hides the browser. + +**loop :** `default : false` +Last image + 1 leads to first image & first image - 1 leads to last image. + +**mobileBreakpoint :** `default : 480` +pixels. width of the container when activating the compact view. + +**firstImage :** `default : 0` +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. - -###### Images -**leftImg :** `default : "images/left.gif"` - Path to image: left arrow. - -**rightImg :** `default : "images/right.gif"` - Path to image: right arrow. - -**closeImg :** `default : "images/close.gif"` - Path to image: close cross. - -**loadingImg :** `default : "images/loading.gif"` - Path to image: loading indicator. - -###### parameters -**currentImage :** `default : 0` -Rank of the image that you want to start the series. - + +**image :** `default : 0` +Array of object representing the set images `[{title, src, height, width}, {}, ...]` + **setIndex :** `default : 0` Set index. yes. - -**setTitle :** `default : ""` - Sets the title of the set. The default title is the value of the `rel` attribute of the first image of the set. + +### API +###### Syntax +Call chocolat like this : +```js +$(document).ready(function(){ + var instance = $('#example1').Chocolat().data('api-chocolat'); +}); +``` +Then API calls can be made like this (open for exemple): +```js +instance.open(); +``` + +###### Methods +**open :** `param (optionnal) : i` +Open the lightbox on the image whose index is `i`. +By default on the first image (i=0). + +**close :** +Close the lightbox. + +**prev :** +Change image backward. + +**next :** +Change image forward. + +**goto :** `param : i` +(Alias of open) go to image whose index is `i` on an already opened ligthbox. + +**current :** +Returns the index of the current image. - - \ No newline at end of file +### CSS Classes + +**.chocolat-open :** +Set to the container when the lightbox is open. + +**.chocolat-mobile :** +Set to the container when its width is inferior to `480px` (or `mobileBreakpoint`) + +**.chocolat-in-container :** +Set to the container when chocolat is open in a block (`container != window`) + +**.chocolat-cover :** +Set to the container when chocolat `fullWindow` is set to `'cover'` \ No newline at end of file diff --git a/series/gouttes/1.jpg b/series/gouttes/1.jpg deleted file mode 100644 index 14e685f..0000000 Binary files a/series/gouttes/1.jpg and /dev/null differ diff --git a/series/gouttes/2.jpg b/series/gouttes/2.jpg deleted file mode 100644 index d7d3d73..0000000 Binary files a/series/gouttes/2.jpg and /dev/null differ diff --git a/series/gouttes/3.jpg b/series/gouttes/3.jpg deleted file mode 100644 index 6ec4971..0000000 Binary files a/series/gouttes/3.jpg and /dev/null differ diff --git a/series/gouttes/mini/1.jpg b/series/gouttes/mini/1.jpg deleted file mode 100644 index 9b8dbde..0000000 Binary files a/series/gouttes/mini/1.jpg and /dev/null differ diff --git a/series/gouttes/mini/2.jpg b/series/gouttes/mini/2.jpg deleted file mode 100644 index 45fd0c8..0000000 Binary files a/series/gouttes/mini/2.jpg and /dev/null differ diff --git a/series/gouttes/mini/3.jpg b/series/gouttes/mini/3.jpg deleted file mode 100644 index 9a3fd90..0000000 Binary files a/series/gouttes/mini/3.jpg and /dev/null differ diff --git a/series/gouttes/mini/Thumbs.db b/series/gouttes/mini/Thumbs.db deleted file mode 100644 index 14d0ef6..0000000 Binary files a/series/gouttes/mini/Thumbs.db and /dev/null differ