/* * lightcase - jquery plugin * @version 1.5.4 (02/11/2014) */ ;(function ($) { window.lightcase = { cache : {}, support : {}, labels : { 'errormessage' : 'source could not be found...', 'sequenceinfo.of' : ' of ', 'close' : 'close', 'navigator.prev' : 'prev', 'navigator.next' : 'next', 'navigator.play' : 'play', 'navigator.pause' : 'pause' }, /** * initializes the plugin * * @param {object} options * @return {object} */ init : function (options) { return this.each(function () { $(this).unbind('click').click(function (event) { event.preventdefault(); $(this).lightcase('start', options); }); }); }, /** * starts the plugin * * @param {object} options * @return {void} */ start : function (options) { lightcase.settings = $.extend({ idprefix : 'lightcase-', classprefix : 'lightcase-', transition : 'elastic', transitionin : null, transitionout : null, csstransitions : true, speedin : 350, speedout : 250, maxwidth : 800, maxheight : 500, forcewidth : false, forceheight : false, liveresize : true, fullscreenmodeformobile : true, mobilematchexpression : /(iphone|ipod|ipad|android|blackberry|symbian)/, disableshrink : false, shrinkfactor : .75, overlayopacity : .9, slideshow : false, timeout : 5000, swipe : true, usekeys : true, navigateendless : true, closeonoverlayclick : true, showtitle : true, showcaption : true, showsequenceinfo : true, inline : { width : 'auto', height : 'auto' }, ajax : { width : 'auto', height : 'auto', type : 'get', datatype : 'html', data : {} }, iframe : { width : 500, height : 500, frameborder : 0 }, flash : { width : 400, height : 205, wmode : 'transparent' }, video : { width : 400, height : 225, poster : '', preload : 'auto', controls : true, autobuffer : true, autoplay : true, loop : false }, type : null, typemapping : { 'image' : 'jpg,jpeg,gif,png,bmp', 'flash' : 'swf', 'video' : 'mp4,mov,ogv,ogg,webm', 'iframe' : 'html,php', 'ajax' : 'txt', 'inline' : '#' }, errormessage : function () { return '

' + lightcase.labels['errormessage'] + '

'; }, markup : function () { $('body').append( $overlay = $('
'), $loading = $('
'), $case = $('') ); $case.append( $content = $('
'), $info = $('
'), $close = $('' + lightcase.labels['close'] + '') ); $info.append( $sequenceinfo = $('
'), $title = $('

'), $caption = $('

') ); $content.append( $contentinner = $('
'), $nav = $('
') ); $nav.append( $prev = $('' + lightcase.labels['navigator.prev'] + '').hide(), $next = $('' + lightcase.labels['navigator.next'] + '').hide(), $play = $('' + lightcase.labels['navigator.play'] + '').hide(), $pause = $('' + lightcase.labels['navigator.pause'] + '').hide() ); }, oninit : function () {}, onstart : function () {}, onfinish : function () {} }, options); lightcase.objectdata = lightcase.getobjectdata(this); lightcase.dimensions = lightcase.getdimensions(); // call hook function on initialization lightcase.settings.oninit(); lightcase.addelements(); lightcase.lightcaseopen(); }, /** * gets the object data * * @param {object} $object * @return {object} objectdata */ getobjectdata : function ($object) { var objectdata = { $link : $object, title : $object.attr('title'), caption : $object.children('img').attr('alt'), url : lightcase.verifydataurl($object.attr('data-href') || $object.attr('href')), requesttype : lightcase.settings.ajax.type, requestdata : lightcase.settings.ajax.data, responsedatatype : lightcase.settings.ajax.datatype, rel : $object.attr('data-rel'), type : lightcase.settings.type || lightcase.verifydatatype($object.attr('data-href') || $object.attr('href')), ispartofsequence : lightcase.ispartofsequence($object.attr('data-rel'), ':'), ispartofsequencewithslideshow : lightcase.ispartofsequence($object.attr('data-rel'), ':slideshow'), currentindex : $('[data-rel="' + $object.attr('data-rel') + '"]').index($object), sequencelength : $('[data-rel="' + $object.attr('data-rel') + '"]').length }; // add sequence info to objectdata objectdata.sequenceinfo = (objectdata.currentindex + 1) + lightcase.labels['sequenceinfo.of'] + objectdata.sequencelength; return objectdata; }, /** * verifies if the link is part of a sequence * * @param {string} rel * @param {string} expression * @return {boolean} */ ispartofsequence : function (rel, expression) { var getsimilarlinks = $('[data-rel="' + rel + '"]'), regexp = new regexp(expression); if (regexp.test(rel) && getsimilarlinks.length > 1) { return true; } else { return false; } }, /** * verifies if the slideshow should be enabled * * @return {boolean} */ isslideshowenabled : function () { if (lightcase.objectdata.ispartofsequence && (lightcase.settings.slideshow === true || lightcase.objectdata.ispartofsequencewithslideshow === true)) { return true; } else { return false; } }, /** * loads the new content to show * * @return {void} */ loadcontent : function () { if (lightcase.cache.originalobject) { lightcase.restoreobject(); } lightcase.createobject(); }, /** * creates a new object * * @return {void} */ createobject : function () { var $object; // create object switch (lightcase.objectdata.type) { case 'image' : $object = $(new image()); $object.attr({ // the time expression is required to prevent the binding of an image load 'src' : lightcase.objectdata.url + '?random=' + (new date()).gettime(), 'alt' : lightcase.objectdata.title }); break; case 'inline' : $object = $('
'); $object.html(lightcase.cloneobject($(lightcase.objectdata.url))); // add custom attributes from lightcase.settings $.each(lightcase.settings.inline, function (name, value) { $object.attr('data-' + name, value); }); break; case 'ajax' : $object = $('
'); // add custom attributes from lightcase.settings $.each(lightcase.settings.ajax, function (name, value) { if (name !== 'data') { $object.attr('data-' + name, value); } }); break; case 'flash' : $object = $(''); // add custom attributes from lightcase.settings $.each(lightcase.settings.flash, function (name, value) { $object.attr(name, value); }); break; case 'video' : $object = $(''); $object.attr('src', lightcase.objectdata.url); // add custom attributes from lightcase.settings $.each(lightcase.settings.video, function (name, value) { $object.attr(name, value); }); break; default : $object = $(''); $object.attr({ 'src' : lightcase.objectdata.url }); // add custom attributes from lightcase.settings $.each(lightcase.settings.iframe, function (name, value) { $object.attr(name, value); }); } lightcase.addobject($object); lightcase.loadobject($object); }, /** * adds the new object to the markup * * @param {object} $object * @return {void} */ addobject : function ($object) { // add object to content holder $contentinner.html($object); // start loading lightcase.loading('start'); // call hook function on start lightcase.settings.onstart(); // add sequenceinfo to the content holder or hide if its empty if (lightcase.settings.showsequenceinfo === true && lightcase.objectdata.ispartofsequence) { $sequenceinfo.html(lightcase.objectdata.sequenceinfo); $sequenceinfo.show(); } else { $sequenceinfo.empty(); $sequenceinfo.hide(); } // add title to the content holder or hide if its empty if (lightcase.settings.showtitle === true && lightcase.objectdata.title !== undefined && lightcase.objectdata.title !== '') { $title.html(lightcase.objectdata.title); $title.show(); } else { $title.empty(); $title.hide(); } // add caption to the content holder or hide if its empty if (lightcase.settings.showcaption === true && lightcase.objectdata.caption !== undefined && lightcase.objectdata.caption !== '') { $caption.html(lightcase.objectdata.caption); $caption.show(); } else { $caption.empty(); $caption.hide(); } }, /** * loads the new object * * @param {object} $object * @return {void} */ loadobject : function ($object) { // load the object switch (lightcase.objectdata.type) { case 'inline' : if ($(lightcase.objectdata.url)) { lightcase.showcontent($object); } else { lightcase.error(); } break; case 'ajax' : $.ajax( $.extend({}, lightcase.settings.ajax, { url : lightcase.objectdata.url, type : lightcase.objectdata.requesttype, datatype : lightcase.objectdata.requestdatatype, data : lightcase.objectdata.requestdata, success : function (data, textstatus, jqxhr) { // unserialize if data is transeferred as json if (lightcase.objectdata.responsedatatype === 'json') { data = $.parsejson(data); } $object.html(data); lightcase.showcontent($object); }, error : function (jqxhr, textstatus, errorthrown) { lightcase.error(); } }) ); break; case 'flash' : lightcase.showcontent($object); break; case 'video' : if (typeof($object.get(0).canplaytype) === 'function' || $case.find('video').length === 0) { lightcase.showcontent($object); } else { lightcase.error(); } break; default : if (lightcase.objectdata.url) { $object.load(function () { lightcase.showcontent($object); }); $object.error(function () { lightcase.error(); }); } else { lightcase.error(); } } }, /** * throws an error message if something went wrong * * @return {void} */ error : function () { lightcase.objectdata.type = 'error'; var $object = $('
'); $object.html(lightcase.settings.errormessage); $contentinner.html($object); lightcase.showcontent($contentinner); }, /** * calculates the dimensions to fit content * * @param {object} $object * @return {void} */ calculatedimensions : function ($object) { lightcase.cleanupdimensions(); // set default dimensions var dimensions = { objectwidth : $object.attr('width') ? $object.attr('width') : $object.attr('data-width'), objectheight : $object.attr('height') ? $object.attr('height') : $object.attr('data-height'), maxwidth : parseint(lightcase.dimensions.windowwidth * lightcase.settings.shrinkfactor), maxheight : parseint(lightcase.dimensions.windowheight * lightcase.settings.shrinkfactor) }; if (!lightcase.settings.disableshrink) { // if the auto calculated maxwidth/maxheight greather than the userdefined one, use that. if (dimensions.maxwidth > lightcase.settings.maxwidth) { dimensions.maxwidth = lightcase.settings.maxwidth; } if (dimensions.maxheight > lightcase.settings.maxheight) { dimensions.maxheight = lightcase.settings.maxheight; } // calculate the difference between screen width/height and image width/height dimensions.differencewidthaspercent = parseint(100 / dimensions.maxwidth * dimensions.objectwidth); dimensions.differenceheightaspercent = parseint(100 / dimensions.maxheight * dimensions.objectheight); switch (lightcase.objectdata.type) { case 'image' : case 'flash' : case 'video' : if (dimensions.differencewidthaspercent > 100 && dimensions.differencewidthaspercent > dimensions.differenceheightaspercent) { dimensions.objectwidth = dimensions.maxwidth; dimensions.objectheight = parseint(dimensions.objectheight / dimensions.differencewidthaspercent * 100); } if (dimensions.differenceheightaspercent > 100 && dimensions.differenceheightaspercent > dimensions.differencewidthaspercent) { dimensions.objectwidth = parseint(dimensions.objectwidth / dimensions.differenceheightaspercent * 100); dimensions.objectheight = dimensions.maxheight; } if (dimensions.differenceheightaspercent > 100 && dimensions.differencewidthaspercent < dimensions.differenceheightaspercent) { dimensions.objectwidth = parseint(dimensions.maxwidth / dimensions.differenceheightaspercent * dimensions.differencewidthaspercent); dimensions.objectheight = dimensions.maxheight; } break; case 'error' : if (!isnan(dimensions.objectwidth) && dimensions.objectwidth > dimensions.maxwidth) { dimensions.objectwidth = dimensions.maxwidth; } break; default : if ((isnan(dimensions.objectwidth) || dimensions.objectwidth > dimensions.maxwidth) && !lightcase.settings.forcewidth) { dimensions.objectwidth = dimensions.maxwidth; } if (((isnan(dimensions.objectheight) && dimensions.objectheight !== 'auto') || dimensions.objectheight > dimensions.maxheight) && !lightcase.settings.forceheight) { dimensions.objectheight = dimensions.maxheight; } } } lightcase.adjustdimensions($object, dimensions); }, /** * adjusts the dimensions * * @param {object} $object * @param {object} dimensions * @return {void} */ adjustdimensions : function ($object, dimensions) { // adjust width and height $object.css({ 'width' : dimensions.objectwidth, 'height' : dimensions.objectheight, 'max-width' : $object.attr('data-max-width') ? $object.attr('data-max-width') : dimensions.maxwidth, 'max-height' : $object.attr('data-max-height') ? $object.attr('data-max-height') : dimensions.maxheight }); $contentinner.css({ 'width' : $object.outerwidth(), 'height' : $object.outerheight(), 'max-width' : '100%' }); $case.css({ 'width' : $contentinner.outerwidth() }); // adjust margin $case.css({ 'margin-top' : parseint(-($case.outerheight() / 2)), 'margin-left' : parseint(-($case.outerwidth() / 2)) }); }, /** * handles the loading * * @param {string} process * @return {void} */ loading : function (process) { if (process === 'start') { $case.addclass(lightcase.settings.classprefix + 'loading'); $loading.show(); } else if (process === 'end') { $case.removeclass(lightcase.settings.classprefix + 'loading'); $loading.hide(); } }, /** * gets the client screen dimensions * * @return {object} dimensions */ getdimensions : function () { return { windowwidth : $(window).innerwidth(), windowheight : $(window).innerheight() }; }, /** * verifies the url * * @param {string} dataurl * @return {string} dataurl clean url for processing content */ verifydataurl : function (dataurl) { if (!dataurl || dataurl === undefined || dataurl === '') { return false; } if (dataurl.indexof('#') > -1) { dataurl = dataurl.split('#'); dataurl = '#' + dataurl[dataurl.length - 1]; } return dataurl; }, /** * verifies the data type of the content to load * * @param {string} url * @return {string|boolean} array key if expression matched, else false */ verifydatatype : function (url) { var url = lightcase.verifydataurl(url), typemapping = lightcase.settings.typemapping; if (url) { for (var key in typemapping) { var suffixarr = typemapping[key].split(','); for (var i = 0; i < suffixarr.length; i++) { var suffix = suffixarr[i] ,regexp = new regexp('\.(' + suffix + ')$', 'i') // verify only the last 4 characters of the string ,str = url.split('?')[0].substr(-4); if (regexp.test(str) === true) { return key; } else if (key === 'inline' && (url.indexof(suffix) > -1 || !url)) { return key; } } } } // if no expression matched, return 'iframe'. return 'iframe'; }, /** * extends html markup with the essential tags * * @return {void} */ addelements : function () { if ($('[id^="' + lightcase.settings.idprefix + '"]').length) { return; } lightcase.settings.markup(); }, /** * shows the loaded content * * @param {object} $object * @return {void} */ showcontent : function ($object) { // adds class with the object type $case.attr('class', 'type-' + lightcase.objectdata.type); lightcase.cache.object = $object; lightcase.calculatedimensions($object); // call hook function on finish lightcase.settings.onfinish(); switch (lightcase.settings.transitionin) { case 'scrolltop' : case 'scrollright' : case 'scrollbottom' : case 'scrollleft' : case 'scrollhorizontal' : case 'scrollvertical' : lightcase.transition.scroll($case, 'in', lightcase.settings.speedin); lightcase.transition.fade($contentinner, 'in', lightcase.settings.speedin); break; case 'elastic' : if ($case.css('opacity') < 1) { lightcase.transition.zoom($case, 'in', lightcase.settings.speedin); lightcase.transition.fade($contentinner, 'in', lightcase.settings.speedin); } case 'fade' : case 'fadeinline' : lightcase.transition.fade($case, 'in', lightcase.settings.speedin); lightcase.transition.fade($contentinner, 'in', lightcase.settings.speedin); break; default : lightcase.transition.fade($case, 'in', 0); } // end loading lightcase.loading('end'); lightcase.busy = false; }, /** * processes the content to show * * @return {void} */ processcontent : function () { lightcase.busy = true; switch (lightcase.settings.transitionout) { case 'scrolltop' : case 'scrollright' : case 'scrollbottom' : case 'scrollleft' : case 'scrollvertical' : case 'scrollhorizontal' : if ($case.is(':hidden')) { lightcase.transition.fade($case, 'out', 0, 0, function () { lightcase.loadcontent(); }); lightcase.transition.fade($contentinner, 'out', 0); } else { lightcase.transition.scroll($case, 'out', lightcase.settings.speedout, function () { lightcase.loadcontent(); }); lightcase.transition.fade($contentinner, 'out', 0); } break; case 'fade' : if ($case.is(':hidden')) { lightcase.transition.fade($case, 'out', 0, 0, function () { lightcase.loadcontent(); }); } else { lightcase.transition.fade($case, 'out', lightcase.settings.speedout, 0, function () { lightcase.loadcontent(); }); } break; case 'fadeinline' : case 'elastic' : if ($case.is(':hidden')) { lightcase.transition.fade($case, 'out', 0, 0, function () { lightcase.loadcontent(); }); } else { lightcase.transition.fade($contentinner, 'out', lightcase.settings.speedout, 0, function () { lightcase.loadcontent(); }); } break; default : lightcase.transition.fade($case, 'out', 0, 0, function () { lightcase.loadcontent(); }); } }, /** * handles events for gallery buttons * * @return {void} */ handleevents : function () { lightcase.unbindevents(); $nav.children().hide(); // if slideshow is enabled, show play/pause and start timeout. if (lightcase.isslideshowenabled()) { $play.show(); $pause.show(); // only start the timeout if slideshow is not pausing if (!$nav.hasclass(lightcase.settings.classprefix + 'paused')) { lightcase.starttimeout(); } } if (lightcase.settings.liveresize) { $(window).resize(function () { if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } if (lightcase.open) { lightcase.dimensions = lightcase.getdimensions(); lightcase.calculatedimensions(lightcase.cache.object); } }); } $close.click(function (event) { event.preventdefault(); lightcase.lightcaseclose(); }); if (lightcase.settings.closeonoverlayclick === true) { $overlay.css('cursor', 'pointer').click(function (event) { event.preventdefault(); lightcase.lightcaseclose(); }); } if (lightcase.settings.usekeys === true) { lightcase.addkeyevents(); } if (lightcase.objectdata.ispartofsequence) { lightcase.nav = lightcase.setnavigation(); $prev.click(function (event) { event.preventdefault(); $prev.unbind('click'); lightcase.cache.action = 'prev'; lightcase.nav.$previtem.click(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } }); $next.click(function (event) { event.preventdefault(); $next.unbind('click'); lightcase.cache.action = 'next'; lightcase.nav.$nextitem.click(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } }); if (lightcase.isslideshowenabled()) { $play.click(function (event) { event.preventdefault(); lightcase.starttimeout(); }); $pause.click(function (event) { event.preventdefault(); lightcase.stoptimeout(); }); } // enable swiping if activated if (lightcase.settings.swipe === true) { if ($.isplainobject($.event.special.swipeleft)) { $case.on('swipeleft', function (event) { event.preventdefault(); $next.click(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } }); } if ($.isplainobject($.event.special.swiperight)) { $case.on('swiperight', function (event) { event.preventdefault(); $prev.click(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } }); } } } }, /** * adds the key events * * @return {void} */ addkeyevents : function () { $(document).keyup(function (event) { // do nothing if lightcase is in process if (lightcase.busy) { return; } switch (event.keycode) { // escape key case 27 : $close.click(); break; // backward key case 37 : if (lightcase.objectdata.ispartofsequence) { $prev.click(); } break; // forward key case 39 : if (lightcase.objectdata.ispartofsequence) { $next.click(); } break; } }); }, /** * starts the slideshow timeout * * @return {void} */ starttimeout : function () { $play.hide(); $pause.show(); lightcase.cache.action = 'next'; $nav.removeclass(lightcase.settings.classprefix + 'paused'); lightcase.timeout = settimeout(function () { lightcase.nav.$nextitem.click(); }, lightcase.settings.timeout); }, /** * stops the slideshow timeout * * @return {void} */ stoptimeout : function () { $play.show(); $pause.hide(); $nav.addclass(lightcase.settings.classprefix + 'paused'); cleartimeout(lightcase.timeout); }, /** * sets the navigator buttons (prev/next) * * @return {object} items */ setnavigation : function () { var $links = $('[data-rel="' + lightcase.objectdata.rel + '"]'), currentindex = lightcase.objectdata.currentindex, previndex = currentindex - 1, nextindex = currentindex + 1, sequencelength = lightcase.objectdata.sequencelength - 1, items = { $previtem : $links.eq(previndex), $nextitem : $links.eq(nextindex) }; if (currentindex > 0) { $prev.show(); } else { items.$previtem = $links.eq(sequencelength); } if (nextindex <= sequencelength) { $next.show(); } else { items.$nextitem = $links.eq(0); } if (lightcase.settings.navigateendless === true) { $prev.show(); $next.show(); } return items; }, /** * clones the object for inline elements * * @param {object} $object * @return {object} $clone */ cloneobject : function ($object) { var $clone = $object.clone(), objectid = $object.attr('id'); // if element is hidden, cache the object and remove if ($object.is(':hidden')) { lightcase.cacheobjectdata($object); $object.attr('id', lightcase.settings.idprefix + 'temp-' + objectid).empty(); } else { // prevent duplicated id's $clone.removeattr('id'); } return $clone.show(); }, /** * verifies if it is a mobile device * * @return {boolean} */ ismobiledevice : function () { var deviceagent = navigator.useragent.tolowercase(), agentid = deviceagent.match(lightcase.settings.mobilematchexpression); return agentid ? true : false; }, /** * verifies if css transitions are supported * * @return {string|boolean} the transition prefix if supported, else false. */ istransitionsupported : function () { var body = $('body').get(0), istransitionsupported = false, transitionmapping = { 'transition' : '', 'webkittransition' : '-webkit-', 'moztransition' : '-moz-', 'otransition' : '-o-', 'mstransition' : '-ms-' }; for (var key in transitionmapping) { if (transitionmapping.hasownproperty(key) && key in body.style) { lightcase.support.transition = transitionmapping[key]; istransitionsupported = true; } } return istransitionsupported; }, /** * transition types * */ transition : { /** * fades in/out the object * * @param {object} $object * @param {string} type * @param {number} speed * @param {number} opacity * @param {function} callback * @return {void} animates an object */ fade : function ($object, type, speed, opacity, callback) { var isintransition = type === 'in', starttransition = {}, startopacity = $object.css('opacity'), endtransition = {}, endopacity = opacity ? opacity : isintransition ? 1 : 0 if (!lightcase.open && isintransition) return; starttransition['opacity'] = startopacity; endtransition['opacity'] = endopacity; $object.css(starttransition).show(); // css transition if (lightcase.support.transitions) { endtransition[lightcase.support.transition + 'transition'] = speed + 'ms ease-out'; settimeout(function () { $object.css(endtransition); }, 15); settimeout(function () { $object.css(lightcase.support.transition + 'transition', ''); if (callback && (lightcase.open || !isintransition)) { callback(); } }, speed); } else { // fallback to js transition $object.stop(); $object.animate(endtransition, speed, callback); } }, /** * scrolls in/out the object * * @param {object} $object * @param {string} type * @param {number} speed * @param {function} callback * @return {void} animates an object */ scroll : function ($object, type, speed, callback) { var isintransition = type === 'in', transition = isintransition ? lightcase.settings.transitionin : lightcase.settings.transitionout, direction = 'left', starttransition = {}, startopacity = isintransition ? 0 : 1, startoffset = isintransition ? '-50%' : '50%', endtransition = {}, endopacity = isintransition ? 1 : 0, endoffset = isintransition ? '50%' : '-50%'; if (!lightcase.open && isintransition) return; switch (transition) { case 'scrolltop' : direction = 'top'; break; case 'scrollright' : startoffset = isintransition ? '150%' : '50%'; endoffset = isintransition ? '50%' : '150%'; break; case 'scrollbottom' : direction = 'top'; startoffset = isintransition ? '150%' : '50%'; endoffset = isintransition ? '50%' : '150%'; break; case 'scrollhorizontal' : startoffset = isintransition ? '150%' : '50%'; endoffset = isintransition ? '50%' : '-50%'; break; case 'scrollvertical' : direction = 'top'; startoffset = isintransition ? '-50%' : '50%'; endoffset = isintransition ? '50%' : '150%'; break; } if (lightcase.cache.action === 'prev') { switch (transition) { case 'scrollhorizontal' : startoffset = isintransition ? '-50%' : '50%'; endoffset = isintransition ? '50%' : '150%'; break; case 'scrollvertical' : startoffset = isintransition ? '150%' : '50%'; endoffset = isintransition ? '50%' : '-50%'; break; } } starttransition['opacity'] = startopacity; starttransition[direction] = startoffset; endtransition['opacity'] = endopacity; endtransition[direction] = endoffset; $object.css(starttransition).show(); // css transition if (lightcase.support.transitions) { endtransition[lightcase.support.transition + 'transition'] = speed + 'ms ease-out'; settimeout(function () { $object.css(endtransition); }, 0); settimeout(function () { $object.css(lightcase.support.transition + 'transition', ''); if (callback && (lightcase.open || !isintransition)) { callback(); } }, speed); } else { // fallback to js transition $object.stop(); $object.animate(endtransition, speed, callback); } }, /** * zooms in/out the object * * @param {object} $object * @param {string} type * @param {number} speed * @param {function} callback * @return {void} animates an object */ zoom : function ($object, type, speed, callback) { var isintransition = type === 'in', starttransition = {}, startopacity = $object.css('opacity'), startscale = isintransition ? 'scale(0.75)' : 'scale(1)', endtransition = {}, endopacity = isintransition ? 1 : 0, endscale = isintransition ? 'scale(1)' : 'scale(0.75)'; if (!lightcase.open && isintransition) return; starttransition['opacity'] = startopacity; starttransition[lightcase.support.transition + 'transform'] = startscale; endtransition['opacity'] = endopacity; $object.css(starttransition).show(); // css transition if (lightcase.support.transitions) { endtransition[lightcase.support.transition + 'transform'] = endscale; endtransition[lightcase.support.transition + 'transition'] = speed + 'ms ease-out'; settimeout(function () { $object.css(endtransition); }, 0); settimeout(function () { $object.css(lightcase.support.transition + 'transform', ''); $object.css(lightcase.support.transition + 'transition', ''); if (callback && (lightcase.open || !isintransition)) { callback(); } }, speed); } else { // fallback to js transition $object.stop(); $object.animate(endtransition, speed, callback); } } }, /** * caches the object data * * @param {object} $object * @return {void} */ cacheobjectdata : function ($object) { $.data($object, 'cache', { id : $object.attr('id'), content : $object.html() }); lightcase.cache.originalobject = $object; }, /** * restores the object from cache * * @return void */ restoreobject : function () { var $object = $('[id^="' + lightcase.settings.idprefix + 'temp-"]'); $object.attr('id', $.data(lightcase.cache.originalobject, 'cache').id); $object.html($.data(lightcase.cache.originalobject, 'cache').content); }, /** * enters into the lightcase view * * @return {void} */ lightcaseopen : function () { lightcase.open = true; lightcase.support.transitions = lightcase.settings.csstransitions ? lightcase.istransitionsupported() : false; lightcase.support.mobiledevice = lightcase.ismobiledevice(); if (lightcase.support.mobiledevice) { $('html').addclass(lightcase.settings.classprefix + 'ismobiledevice'); if (lightcase.settings.fullscreenmodeformobile) { lightcase.switchtofullscreenmode(); } } if (!lightcase.settings.transitionin) { lightcase.settings.transitionin = lightcase.settings.transition; } if (!lightcase.settings.transitionout) { lightcase.settings.transitionout = lightcase.settings.transition; } switch (lightcase.settings.transitionin) { case 'fade' : case 'fadeinline' : case 'elastic' : case 'scrolltop' : case 'scrollright' : case 'scrollbottom' : case 'scrollleft' : case 'scrollvertical' : case 'scrollhorizontal' : if ($case.is(':hidden')) { $overlay.css('opacity', 0); $case.css('opacity', 0); $contentinner.css('opacity', 0); } lightcase.transition.fade($overlay, 'in', lightcase.settings.speedin, lightcase.settings.overlayopacity, function () { lightcase.handleevents(); lightcase.processcontent(); }); break; default : lightcase.transition.fade($overlay, 'in', 0, lightcase.settings.overlayopacity, function () { lightcase.handleevents(); lightcase.processcontent(); }); } $('html').addclass(lightcase.settings.classprefix + 'open'); $case.attr('aria-hidden', 'false'); }, /** * escapes from the lightcase view * * @return {void} */ lightcaseclose : function () { lightcase.open = false; $loading.hide(); lightcase.unbindevents(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); } $('html').removeclass(lightcase.settings.classprefix + 'open'); $case.attr('aria-hidden', 'true'); switch (lightcase.settings.transitionout) { case 'fade' : case 'fadeinline' : case 'scrolltop' : case 'scrollright' : case 'scrollbottom' : case 'scrollleft' : case 'scrollvertical' : case 'scrollhorizontal' : lightcase.transition.fade($case, 'out', lightcase.settings.speedout, 0, function () { lightcase.transition.fade($overlay, 'out', lightcase.settings.speedout, 0, function () { lightcase.cleanup(); }); }); break; case 'elastic' : lightcase.transition.zoom($case, 'out', lightcase.settings.speedout, function () { lightcase.transition.fade($overlay, 'out', lightcase.settings.speedout, 0, function () { lightcase.cleanup(); }); }); break; default : lightcase.cleanup(); } }, /** * switches to the fullscreen mode * * @return {void} */ switchtofullscreenmode : function () { lightcase.settings.shrinkfactor = 1; lightcase.settings.overlayopacity = 1; if (lightcase.settings.transitionin !== 'none') { lightcase.settings.transitionin = 'fade'; } if (lightcase.settings.transitionout !== 'none') { lightcase.settings.transitionout = 'fade'; } $('html').addclass(lightcase.settings.classprefix + 'fullscreenmode'); }, /** * unbinds all given events * * @return {void} */ unbindevents : function () { // unbind overlay event $overlay.unbind('click'); // unbind key events $(document).unbind('keyup'); // unbind swipe events $case.unbind('swipeleft').unbind('swiperight'); // unbind navigator events $nav.children('a').unbind('click'); // unbind close event $close.unbind('click'); }, /** * cleans up the dimensions * * @return {void} */ cleanupdimensions : function () { var opacity = $contentinner.css('opacity'); $case.css({ 'width' : '', 'height' : '', 'top' : '', 'left' : '', 'margin-top' : '', 'margin-left' : '' }); $contentinner.removeattr('style').css('opacity', opacity); $contentinner.children().removeattr('style'); }, /** * cleanup after aborting lightcase * * @return {void} */ cleanup : function () { lightcase.cleanupdimensions(); if (lightcase.isslideshowenabled()) { lightcase.stoptimeout(); $nav.removeclass(lightcase.settings.classprefix + 'paused'); } $loading.hide(); $overlay.hide(); $case.hide().removeattr('class'); $contentinner.empty().hide(); $info.children().empty(); if (lightcase.cache.originalobject) { lightcase.restoreobject(); } // restore cache lightcase.cache = {}; } }; $.fn.lightcase = function (method) { // method calling logic if (lightcase[method]) { return lightcase[method].apply(this, array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return lightcase.init.apply(this, arguments); } else { $.error('method ' + method + ' does not exist on jquery.lightcase'); } }; })(jquery);