/*! * jQuery Lightbox Evolution - for jQuery 1.4+ * http://codecanyon.net/item/jquery-lightbox-evolution/115655?ref=aeroalquimia * * Copyright (c) 2013, Eduardo Daniel Sada * Released under CodeCanyon Regular License. * http://codecanyon.net/licenses/regular * * Version: 1.8.0 (August 17 2013) */ ;(function($, window, document, undefined) { var usearch = (function(u) {return function() {return u.search(arguments[0]);};})((navigator && navigator.userAgent) ? navigator.userAgent.toLowerCase() : ""); var is_smartphone = false; var is_ie = (function(){for(var a=3,b=document.createElement("b"),c=b.all||[];b.innerHTML="",c[0];);return 4 -1) { if (usearch("android") > -1 || usearch("googletv") > -1 || usearch("htc_flyer") > -1) { is_smartphone = true; } }; // detect opera mini and mobile; if (usearch("opera") > -1) { if (usearch("mini") > -1 && usearch("mobi") > -1) { is_smartphone = true; } }; // detect iOS; if (usearch("iphone") > -1) { is_smartphone = true; }; // detect windows 7 phones; if (usearch("windows phone os 7") > -1) { is_smartphone = true; }; $.extend($.easing, { easeOutBackMin: function (x, t, b, c, d, s) { if (s === undefined) s = 1; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }); // Para jQuery 1.9 if (typeof $.fn.live === "undefined") { $.fn.live = function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }; } $.extend({ LightBoxObject: { defaults: { name : 'jquery-lightbox', style : { zIndex : 99999, width : 470, height : 280 }, modal : false, overlay : { opacity: 0.6 }, animation: { show: { duration: 400, easing : "easeOutBackMin" }, close: { duration: 200, easing : "easeOutBackMin" }, move: { duration: 700, easing : "easeOutBackMin" }, shake: { duration : 100, easing : "easeOutBackMin", distance : 10, loops : 2 } }, flash : { width : 960, height : 540 }, iframe : { width : 960, height : 540 }, maxsize : { width : -1, height : -1 }, preload : true, emergefrom : "top", ajax : { type : "GET", cache : false, dataType : "html" } }, options : {}, animations : {}, gallery : {}, image : {}, esqueleto : { lightbox : [], buttons : { close : [], prev : [], max : [], next : [] }, background : [], image : [], title : [], html : [] }, visible : false, maximized : false, mode : "image", videoregs : { swf: { reg: /[^\.]\.(swf)\s*$/i }, youtu: { reg: /youtu\.be\//i, split: '/', index: 3, iframe: 1, url: "http://www.youtube.com/embed/%id%?autoplay=1&fs=1&rel=0&enablejsapi=1" }, youtube: { reg: /youtube\.com\/watch/i, split: '=', index: 1, iframe: 1, url: "http://www.youtube.com/embed/%id%?autoplay=1&fs=1&rel=0&enablejsapi=1" }, vimeo: { reg: /vimeo\.com/i, split: '/', index: 3, iframe: 1, url: "http://player.vimeo.com/video/%id%?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" }, metacafe: { reg: /metacafe\.com\/watch/i, split: '/', index: 4, url: "http://www.metacafe.com/fplayer/%id%/.swf?playerVars=autoPlay=yes" }, dailymotion: { reg: /dailymotion\.com\/video/i, split: '/', index: 4, iframe: true, url: "http://www.dailymotion.com/embed/video/%id%?autoPlay=1&forcedQuality=hd720" }, collegehumornew: { reg: /collegehumor\.com\/video\//i, split: 'video/', index: 1, iframe: true, url: "http://www.collegehumor.com/e/%id%" }, collegehumor: { reg: /collegehumor\.com\/video:/i, split: 'video:', index: 1, url: "http://www.collegehumor.com/moogaloop/moogaloop.swf?autoplay=true&fullscreen=1&clip_id=%id%" }, ustream: { reg: /ustream\.tv/i, split: '/', index: 4, url: "http://www.ustream.tv/flash/video/%id%?loc=%2F&autoplay=true&vid=%id%&disabledComment=true&beginPercent=0.5331&endPercent=0.6292&locale=en_US" }, twitvid: { reg: /twitvid\.com/i, split: '/', index: 3, url: "http://www.twitvid.com/player/%id%" }, wordpress: { reg: /v\.wordpress\.com/i, split: '/', index: 3, url: "http://s0.videopress.com/player.swf?guid=%id%&v=1.01" }, vzaar: { reg: /vzaar\.com\/videos/i, split: '/', index: 4, url: "http://view.vzaar.com/%id%.flashplayer?autoplay=true&border=none" }, youku: { reg: /v.youku.com\/v_show\//i, split: 'id_', index: 1, iframe: 1, url: "http://player.youku.com/embed/%id%&autoplay=1" } }, mapsreg: { bing: { reg: /bing\.com\/maps/i, split: '?', index: 1, url: "http://www.bing.com/maps/embed/?emid=3ede2bc8-227d-8fec-d84a-00b6ff19b1cb&w=%width%&h=%height%&%id%" }, streetview: { reg: /maps\.google\.(com|co.uk|ca|es)(.*)layer=c/i, // google.com / google.co.uk / google.ca / google.es split: '?', index: 1, url: "http://maps.google.com/?output=svembed&%id%" }, googlev2: { reg: /maps\.google\.(com|co.uk|ca|es)\/maps\/ms/i, split: '?', index: 1, url: "http://maps.google.com/maps/ms?output=embed&%id%" }, google: { reg: /maps\.google\.(com|co.uk|ca|es)/i, split: '?', index: 1, url: "http://maps.google.com/maps?%id%&output=embed" } }, imgsreg: /\.(?:jpg|png|jpeg|gif|bmp|tiff)/i, overlay : { create: function(options) { this.options = options; this.element = $(''); this.element.css($.extend({}, { 'position' : 'fixed', 'top' : 0, 'left' : 0, 'opacity' : 0, 'display' : 'none', 'z-index' : this.options.zIndex }, this.options.style)); this.element.bind("click", $.proxy(function(e) { if (!this.options.modal && !this.hidden) { if ($.isFunction(this.options.callback)) { this.options.callback(); } else { this.hide(); } } e.preventDefault(); }, this)); this.hidden = true; this.inject(); return this; }, inject: function() { this.target = $(document.body); this.target.append(this.element); }, resize: function(x, y) { this.element.css({ 'height': 0, 'width': 0 }); if (this.shim) { this.shim.css({ 'height': 0, 'width': 0 }); }; var win = { x: $(document).width(), y: $(document).height() }; this.element.css({ 'width' : '100%', 'height' : y || win.y }); if (this.shim) { this.shim.css({ 'height': 0, 'width': 0 }); this.shim.css({ 'position': 'absolute', 'left' : 0, 'top' : 0, 'width' : this.element.width(), 'height' : y || win.y }); } return this; }, show: function(callback) { if (!this.hidden) { return this; }; if (this.transition) { this.transition.stop(); }; if (this.shim) { this.shim.css('display', 'block'); }; this.element.css({'display':'block', 'opacity':0}); // this.target.bind('resize', $.proxy(this.resize, this)); this.resize(); this.hidden = false; this.transition = this.element.fadeTo(this.options.showDuration, this.options.style.opacity, $.proxy(function(){ if (this.options.style.opacity) { this.element.css(this.options.style) }; this.element.trigger('show'); if ($.isFunction(callback)) { callback(); }; }, this)); return this; }, hide: function(callback) { if (this.hidden) { return this; }; if (this.transition) { this.transition.stop(); }; if (this.shim) { this.shim.css('display', 'none'); }; // this.target.unbind('resize'); this.hidden = true; this.transition = this.element.fadeTo(this.options.closeDuration, 0, $.proxy(function(){ this.element.trigger('hide'); if ($.isFunction(callback)) { callback(); }; this.element.css({ 'height': 0, 'width': 0, 'display': 'none' }); }, this)); return this; } }, create: function(options) { this.options = $.extend(true, this.defaults, options); var name = this.options.name; var lightbox = $(''); var e = this.esqueleto; this.overlay.create({ name : name, style : this.options.overlay, modal : this.options.modal, zIndex : this.options.style.zIndex-1, callback : this.proxy(this.close), showDuration : (is_smartphone ? this.options.animation.show.duration / 2 : this.options.animation.show.duration), closeDuration : (is_smartphone ? this.options.animation.close.duration / 2 : this.options.animation.close.duration) }); e.lightbox = lightbox; e.navigator = $('.'+name+'-navigator', lightbox); e.buttons.div = $('.'+name+'-buttons', lightbox); e.buttons.close = $('.'+name+'-button-close', lightbox); e.buttons.prev = $('.'+name+'-button-left', lightbox); e.buttons.max = $('.'+name+'-button-max', lightbox); e.buttons.next = $('.'+name+'-button-right', lightbox); e.buttons.custom = $('.'+name+'-buttons-custom', lightbox); e.background = $('.'+name+'-background', lightbox); e.html = $('.'+name+'-html', lightbox); e.move = $('').css({ 'position' : 'absolute', 'z-index' : this.options.style.zIndex, 'top' : -999 }).append(lightbox); $('body').append(e.move); // this.win = (window!=window.top) ? window.top : window; this.win = $(window); this.addevents(); return lightbox; }, addevents: function() { var $win = this.win; $win[0].onorientationchange = function() { if (this.visible) { this.overlay.resize(); if (this.move && !this.maximized) { this.movebox(); } } }; $win.bind('resize', this.proxy(function() { if (this.visible && !is_smartphone) { this.overlay.resize(); if (this.move && !this.maximized) { this.movebox(); } } })); $win.bind('scroll', this.proxy(function() { if (this.visible && this.move && !this.maximized && !is_smartphone) { this.movebox(); } })); $(document).bind('keydown', this.proxy(function(e) { if (this.visible) { if (e.keyCode === 27 && this.options.modal === false) // esc { this.close(); } if (this.gallery.total > 1) { if (e.keyCode === 37) // left { this.esqueleto.buttons.prev.triggerHandler('click', e); } if (e.keyCode === 39) // right { this.esqueleto.buttons.next.triggerHandler('click', e); } } } })); this.esqueleto.buttons.close.bind('click touchend', {"fn": "close"}, this.proxy(this.fn)); this.esqueleto.buttons.max.bind('click touchend', {"fn": "maximinimize"}, this.proxy(this.fn)); // heredamos los eventos, desde el overlay: this.overlay.element.bind('show', this.proxy(function() { $(this).triggerHandler('show'); })); this.overlay.element.bind('hide', this.proxy(function() { $(this).triggerHandler('close'); })); }, fn: function(e) { this[e.data.fn].apply(this); e.preventDefault(); }, proxy: function(fn) { return $.proxy(fn, this); }, ex: function(ob, href, options) { var tmp = { type : "", width : "", height : "", href : "" }; $.each(ob, this.proxy(function(is, reg) { $.each(reg, this.proxy(function(i, e) { if ((is == "flash" && href.split('?')[0].match(e.reg)) || (is == "iframe" && href.match(e.reg))) { tmp.href = href; if (e.split) { var id = is == "flash" ? href.split(e.split)[e.index].split('?')[0].split('&')[0] : href.split(e.split)[e.index]; tmp.href = e.url.replace("%id%", id).replace("%width%", options.width).replace("%height%", options.height);; } tmp.type = e.iframe ? "iframe" : is; // Si el tamaño viene definido: if (options.width) { tmp.width = options.width; tmp.height = options.height; } else { // Si no viene definido, estableceremos el tamaño por defecto // definido en las opciones. Pero aún asi, el tamaño máximo será // el de la ventana. Esto permitirá ver videos al tamaño completo var calculatedSize = this.calculate(this.options[tmp.type].width, this.options[tmp.type].height); tmp.width = calculatedSize.width; tmp.height = calculatedSize.height; } return false; } } )); if (!!tmp.type) return false; } )); return tmp; }, create_gallery: function(collection, options) { var me = this; var $prev = me.esqueleto.buttons.prev; var $next = me.esqueleto.buttons.next; me.gallery.total = collection.length; if (collection.length > 1) { $prev.unbind('.lightbox'); $next.unbind('.lightbox'); $prev.bind('click.lightbox touchend.lightbox', function (e) { e.preventDefault(); collection.unshift(collection.pop()); me.show(collection); }); $next.bind('click.lightbox touchend.lightbox', function (e) { e.preventDefault(); collection.push(collection.shift()); me.show(collection); }); if (me.esqueleto.navigator.css("display") === "none") { me.esqueleto.buttons.div.show(); } $prev.show(); $next.show(); // Precargar las imagenes siguientes: if (this.options.preload) { // La siguiente: if (collection[1].href.match(this.imgsreg)) { (new Image()).src = collection[1].href; } // La anterior: if (collection[collection.length-1].href.match(this.imgsreg)) { (new Image()).src = collection[collection.length-1].href; } } } else { $prev.hide(); $next.hide(); } }, custombuttons: function(buttons, anchor) { var esqueleto = this.esqueleto; esqueleto.buttons.custom.empty(); $.each(buttons, this.proxy(function(i, button) { var $a = $(''+button['html']+''); $a.bind('click', this.proxy(function (e) { if ($.isFunction(button.callback)) { button.callback(this.esqueleto.image.src, this, anchor); } e.preventDefault(); } )); esqueleto.buttons.custom.append($a); } )); esqueleto.buttons.div.show(); }, show: function(collection, options, callback) { // Si collection esta vacio no tenemos nada mas que hacer: if (this.utils.isEmpty(collection)) { return false; } // Como siempre le pasaremos un array en collection, // solo queremos trabajar con el primer elemento: var me = collection[0]; var type = ''; var beforeopen = false; var href = me.href; var esqueleto = this.esqueleto; var size = { x: this.win.width(), y: this.win.height() }; var width, height; // Comprobacion especial para: lightbox($("
") if (collection.length === 1 && me.type === "element") { type = "element"; } this.loading(); beforeopen = this.visible; this.open(); if (beforeopen === false) { this.movebox(); } // Creamos, si es necesario, la galeria y mostramos los botones atras y adelante: this.create_gallery(collection, options); options = $.extend(true, { 'width' : 0, 'height' : 0, 'modal' : 0, 'force' : '', 'autoresize' : true, 'move' : true, 'maximized' : false, 'iframe' : false, 'flashvars' : '', 'cufon' : true, 'ratio' : 1, 'onOpen' : function() {}, 'onClose' : function() {} }, options || {}, me); // Eventos this.options.onOpen = options.onOpen; this.options.onClose = options.onClose; this.options.cufon = options.cufon; // A veces las opciones vienen en la URL: var urloptions = this.unserialize(href); options = $.extend({}, options, urloptions); // Calcular porcentajes si es que existen: if (options.width && (""+options.width).indexOf("p") > 0) { options.width = Math.round((size.x-20) * options.width.substring(0, options.width.indexOf("p")) / 100); } if (options.height && (""+options.height).indexOf("p") > 0) { options.height = Math.round((size.y-20) * options.height.substring(0, options.height.indexOf("p")) / 100); } this.overlay.options.modal = options.modal; var buttonMax = esqueleto.buttons.max; buttonMax.removeClass(this.options.name+'-button-min'); buttonMax.removeClass(this.options.name+'-button-max'); buttonMax.addClass(this.options.name+'-hide'); this.move = !!options.move; this.maximized = !!options.maximized; if ($.isArray(options.buttons)) { this.custombuttons(options.buttons, me.element); } if (esqueleto.buttons.custom.is(":empty") === false) { esqueleto.buttons.div.show(); } if (this.utils.isEmpty(options.force) === false) { type = options.force; } else if (options.iframe) { type = 'iframe'; } else if (href.match(this.imgsreg)) { type = 'image'; } else { // Detectar si es un flash o un mapa o un video: var zap = this.ex({"flash": this.videoregs, "iframe": this.mapsreg}, href, options); if (!!zap.type === true) { href = zap.href; type = zap.type; options.width = zap.width; options.height = zap.height; } // Si todavia no sabemos que es, lo mas probable es que sea una url ajax o un #inline: if (!!type === false) { if (href.match(/#/)) { var obj = href.substr(href.indexOf("#")); if ($(obj).length > 0) { type = 'inline'; href = obj; } else { type = 'ajax'; } } else { type = 'ajax'; } } } if (type === 'image') { esqueleto.image = new Image(); $(esqueleto.image).load(this.proxy(function() { var image = this.esqueleto.image; $(image).unbind('load'); if (this.visible === false) { return false } // Si el tamaño viene definido en los parametros: if (options.width) { width = parseInt(options.width, 10); height = parseInt(options.height, 10); options.autoresize = false; } // Si no sabemos el tamaño, entonces lo calcularemos: else { // Tamaño original de la imagen: image.width = parseInt(image.width * options.ratio, 10); image.height = parseInt(image.height * options.ratio, 10); if (options.maximized) { width = image.width; height = image.height; } else { var calculatedSize = this.calculate(image.width, image.height); width = calculatedSize.width; height = calculatedSize.height; } } // Si tenemos activdo el autoresize, o el tamaño calculado es igual al tamaño original, // mostraremos la botonera para "agrandar" imagen: if (options.autoresize) { if (options.maximized || (!options.maximized && image.width != width && image.height != height)) { esqueleto.buttons.div.show(); esqueleto.buttons.max.removeClass(this.options.name+'-hide'); esqueleto.buttons.max.addClass(this.options.name + (options.maximized ? '-button-min' : '-button-max')); } } esqueleto.title = (this.utils.isEmpty(options.title)) ? false : $('').html(options.title); this.loadimage(); this.resize(width, height); } )); this.esqueleto.image.onerror = this.proxy(function() { this.error("The requested image cannot be loaded. Please try again later."); }); this.esqueleto.image.src = href; } else if (type=='jwplayer' && typeof jwplayer !== "undefined") { if (options.width) { width = options.width; height = options.height; } else { this.error("You have to specify the size. Add ?lightbox[width]=600&lightbox[height]=400 at the end of the url."); return false; } var randomID = 'DV_'+(new Date().getTime()); var iframeHTML = ''; this.appendhtml($(iframeHTML).css({width: width, height: height}), width, height); this.esqueleto.background.bind('complete', this.proxy(function() { this.esqueleto.background.unbind('complete'); jwplayer(randomID).setup($.extend(true, { file : href, autostart : true }, options)); if (this.visible === false) { return false } })); } else if (type=='flash' || type=='inline' || type=='ajax' || type=='element') { if (type == 'inline') { var orig = $(href); var html = options.source == "original" ? orig : orig.clone(true).show(); width = options.width > 0 ? options.width : orig.outerWidth(true); height = options.height > 0 ? options.height : orig.outerHeight(true); this.appendhtml(html, width, height); } else if (type == 'ajax') { if (options.width) { width = options.width; height = options.height; } else { this.error("You have to specify the size. Add ?lightbox[width]=600&lightbox[height]=400 at the end of the url."); return false; } if (this.animations.ajax) { this.animations.ajax.abort(); } this.animations.ajax = $.ajax($.extend(true, {}, this.options.ajax, options.ajax || {}, { url : href, error : this.proxy(function (jqXHR, textStatus, errorThrown) { this.error("AJAX Error " + jqXHR.status + " " + errorThrown + ". Url: " + href); }), success: this.proxy(function(html) { this.appendhtml($("