jQuery.bind = function(object, method) { var args = Array.prototype.slice.call(arguments, 2); return function() { var args2 = [this].concat(args, $.makeArray(arguments)); return method.apply(object, args2) } }; (function($) { SexyLightbox = { getOptions: function() { return { name: 'SLB', zIndex: 65555, color: 'black', find: 'sexylightbox', imagesdir: 'sexyimages', background: 'bgSexy.png', backgroundIE: 'bgSexy.gif', closeButton: 'SexyClose.png', displayed: 0, modal: 0, showDuration: 200, showEffect: 'linear', closeDuration: 400, closeEffect: 'linear', moveDuration: 800, moveEffect: 'easeOutBack', resizeDuration: 800, resizeEffect: 'easeOutBack', shake: { distance: 10, duration: 100, transition: 'easeInOutBack', loops: 2 }, BoxStyles: { 'width': 486, 'height': 320 }, Skin: { 'white': { 'hexcolor': '#FFFFFF', 'captionColor': '#000000', 'background-color': '#000', 'opacity': 0.6 }, 'black': { 'hexcolor': '#000000', 'captionColor': '#FFFFFF', 'background-color': '#fff', 'opacity': 0.6}}} }, initialize: function(options) { this.options = $.extend(this.getOptions(), options); this.options.OverlayStyles = $.extend(this.options.Skin[this.options.color], this.options.OverlayStyles || {}); var strBG = this.options.imagesdir + '/' + this.options.color + '/' + ((((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))) ? this.options.backgroundIE : this.options.background); var name = this.options.name; $('body').append('<div id="' + name + '-Overlay"></div><div id="' + name + '-Wrapper"><div id="' + name + '-Background"></div><div id="' + name + '-Contenedor"><div id="' + name + '-Top" style="background-image: url(' + strBG + ')"><a id="' + name + '-CloseButton" href="#"><img src="' + this.options.imagesdir + '/' + this.options.color + '/' + this.options.closeButton + '" alt="Close"></a><div id="' + name + '-TopLeft" style="background-image: url(' + strBG + ')"></div></div><div id="' + name + '-Contenido"></div><div id="' + name + '-Bottom" style="background-image: url(' + strBG + ')"><div id="' + name + '-BottomRight" style="background-image: url(' + strBG + ')"><div id="' + name + '-Navegador"><strong id="' + name + '-Caption"></strong></div></div></div></div></div>'); this.Overlay = $('#' + name + '-Overlay'); this.Wrapper = $('#' + name + '-Wrapper'); this.Background = $('#' + name + '-Background'); this.Contenedor = $('#' + name + '-Contenedor'); this.Top = $('#' + name + '-Top'); this.CloseButton = $('#' + name + '-CloseButton'); this.Contenido = $('#' + name + '-Contenido'); this.bb = $('#' + name + '-Bottom'); this.innerbb = $('#' + name + '-BottomRight'); this.Nav = $('#' + name + '-Navegador'); this.Descripcion = $('#' + name + '-Caption'); this.Overlay.css({ 'position': 'absolute', 'top': 0, 'left': 0, 'opacity': this.options.OverlayStyles['opacity'], 'height': $(document).height(), 'width': $(document).width(), 'z-index': this.options.zIndex, 'background-color': this.options.OverlayStyles['background-color'] }).hide(); this.Wrapper.css({ 'z-index': this.options.zIndex, 'top': (-this.options.BoxStyles['height'] - 280) + 'px', 'left': (($(document).width() - this.options.BoxStyles['width']) / 2) }).hide(); this.Background.css({ 'z-index': this.options.zIndex + 1 }); this.Contenedor.css({ 'position': 'absolute', 'width': this.options.BoxStyles['width'] + 'px', 'z-index': this.options.zIndex + 2 }); this.Contenido.css({ 'height': this.options.BoxStyles['height'] + 'px', 'border-left-color': this.options.Skin[this.options.color].hexcolor, 'border-right-color': this.options.Skin[this.options.color].hexcolor }); this.Nav.css({ 'color': this.options.Skin[this.options.color].captionColor }); this.Descripcion.css({ 'color': this.options.Skin[this.options.color].captionColor }); this.CloseButton.bind('click', $.bind(this, function() { this.close(); return false })); this.Overlay.bind('click', $.bind(this, function() { if (!this.options.modal) { this.close() } })); $(document).bind('keydown', $.bind(this, function(obj, event) { if (this.options.displayed == 1) { if (event.keyCode == 27) { this.close() } if (event.keyCode == 37) { if (this.prev) { this.prev.trigger('click', event) } } if (event.keyCode == 39) { if (this.next) { this.next.trigger('click', event) } } } })); $(window).bind('resize', $.bind(this, function() { if (this.options.displayed == 1) { this.replaceBox() } else { this.Overlay.css({ 'height': '0px', 'width': '0px' }) } })); $(window).bind('scroll', $.bind(this, function() { if (this.options.displayed == 1) { this.replaceBox() } })); this.refresh() }, hook: function(enlace) { enlace = $(enlace); enlace.blur(); this.show((enlace.attr("title") || enlace.attr("name") || ""), enlace.attr("href"), (enlace.attr('rel') || false)) }, close: function() { this.display(0); this.modal = 0 }, refresh: function() { var self = this; this.anchors = []; $("a, area").each(function() { if ($(this).attr('rel') && new RegExp("^" + self.options.find).test($(this).attr('rel'))) { $(this).click(function(event) { event.preventDefault(); event.stopImmediatePropagation(); self.hook(this) }); if (!($(this).attr('id') == self.options.name + "Left" || $(this).attr('id') == self.options.name + "Right")) { self.anchors.push(this) } } }) }, display: function(option) { if (this.options.displayed == 0 && option != 0 || option == 1) { $('embed, object, select').css({ 'visibility': 'hidden' }); if (this.options.displayed == 0) { this.Wrapper.css({ 'top': (-this.options.BoxStyles['height'] - 280) + 'px', 'height': (this.options.BoxStyles['height'] - 80) + 'px', 'width': this.options.BoxStyles['width'] + 'px' }).hide() } this.options.displayed = 1; this.Overlay.stop(); this.Overlay.fadeIn(this.options.showDuration, $.bind(this, function() { this.Wrapper.show(); this.Overlay.css({ 'opacity': this.options.OverlayStyles['opacity'] }) })) } else { $('embed, object, select').css({ 'visibility': 'visible' }); this.Wrapper.css({ 'top': (-this.options.BoxStyles['height'] - 280) + 'px', 'height': (this.options.BoxStyles['height'] - 80) + 'px', 'width': this.options.BoxStyles['width'] + 'px' }).hide(); this.options.displayed = 0; this.Overlay.stop(); this.Overlay.fadeOut(this.options.closeDuration, $.bind(this, function() { if (this.Image) this.Image.remove(); this.Overlay.css({ 'height': 0, 'width': 0 }) })) } }, replaceBox: function(data) { data = $.extend({ 'width': this.ajustarWidth, 'height': this.ajustarHeight, 'resize': 0 }, data || {}); if (this.MoveBox) this.MoveBox.stop(); this.MoveBox = this.Wrapper.animate({ left: ($(window).scrollLeft() + (($(window).width() - data.width) / 2)), top: ($(window).scrollTop() + ($(window).height() - (data.height + ((this.MostrarNav) ? 80 : 48))) / 2) }, { duration: 1, easing: this.options.moveEffect }).fadeIn('slow'); if (data.resize) { if (this.ResizeBox2) this.ResizeBox2.stop(); this.ResizeBox2 = this.Contenido.animate({ height: data.height }, { duration: this.options.resizeDuration, easing: this.options.resizeEffect }); if (this.ResizeBox) this.ResizeBox.stop(); this.ResizeBox = this.Contenedor.animate({ width: data.width }, { duration: this.options.resizeDuration, easing: this.options.resizeEffect, complete: $.bind(this, function() { this.Wrapper.css({ 'width': data.width }); this.ResizeBox.trigger('onComplete') }) }) } if (window.opera) { this.Overlay.css({ 'height': 0, 'width': 0 }) } this.Overlay.css({ 'height': $(document).height(), 'width': $(window).width() }) }, getInfo: function(image, id) { image = $(image); IEuta = $('<a id="' + this.options.name + id + '" title="' + image.attr('title') + '" rel="' + image.attr('rel') + '"><img class="bt' + id + '" src="' + this.options.imagesdir + '/' + this.options.color + '/SexyBt' + id + '.png' + '" /></a>'); IEuta.attr('href', image.attr('href')); return IEuta }, show: function(caption, url, rel) { this.MostrarNav = false; this.showLoading(); var baseURL = url.match(/(.+)?/)[1] || url; var imageURL = /\.(jpe?g|png|gif|bmp)/gi; if (this.ResizeBox) { this.ResizeBox.unbind('onComplete') } if (caption) { this.MostrarNav = true } if (baseURL.match(imageURL)) { this.imgPreloader = new Image(); this.imgPreloader.onload = $.bind(this, function() { this.imgPreloader.onload = function() { }; var x = $(window).width() - 100; var y = $(window).height() - 100; var imageWidth = this.imgPreloader.width; var imageHeight = this.imgPreloader.height; if (imageWidth > x) { imageHeight = imageHeight * (x / imageWidth); imageWidth = x; if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y } } else if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y; if (imageWidth > x) { imageHeight = imageHeight * (x / imageWidth); imageWidth = x } } if (this.MostrarNav || caption) { this.ajustarHeight = (imageHeight - 21) } else { this.ajustarHeight = (imageHeight - 35) }; this.ajustarWidth = (imageWidth + 14); this.replaceBox({ 'width': this.ajustarWidth, 'height': this.ajustarHeight, 'resize': 1 }); this.ResizeBox.bind('onComplete', $.bind(this, function() { this.showImage(this.imgPreloader.src, { 'width': imageWidth, 'height': imageHeight }) })) }); this.imgPreloader.onerror = $.bind(this, function() { this.show('', this.options.imagesdir + '/' + this.options.color + '/404.png', this.options.find) }); this.imgPreloader.src = url } else { var queryString = url.match(/\?(.+)/)[1]; var params = this.parseQuery(queryString); params['width'] = parseInt(params['width']); params['height'] = parseInt(params['height']); params['modal'] = params['modal']; this.options.modal = params['modal']; this.ajustarHeight = parseInt(params['height']) + (window.opera ? 2 : 0); this.ajustarWidth = parseInt(params['width']) + 14; this.replaceBox({ 'width': this.ajustarWidth, 'height': this.ajustarHeight, 'resize': 1 }); if (url.indexOf('TB_inline') != -1) { this.ResizeBox.bind('onComplete', $.bind(this, function() { this.showContent(strHTML, { 'width': params['width'] + 14, 'height': this.ajustarHeight }, params['background']) })) } else if (url.indexOf('TB_iframe') != -1) { var urlNoQuery = url.split('TB_'); this.ResizeBox.bind('onComplete', $.bind(this, function() { this.showIframe(urlNoQuery[0], { 'width': params['width'] + 14, 'height': params['height'] }, params['background']) })) } else { this.ResizeBox.bind('onComplete', $.bind(this, function() { $.ajax({ url: url, type: "GET", cache: false, error: $.bind(this, function() { this.show('', this.options.imagesdir + '/' + this.options.color + '/404html.png', this.options.find) }), success: $.bind(this, this.handlerFunc) }) })) } } this.next = false; this.prev = false; if (rel.length > this.options.find.length) { this.MostrarNav = true; var foundSelf = false; var exit = false; var self = this; $.each(this.anchors, function(index) { if ($(this).attr('rel') == rel && !exit) { if ($(this).attr('href') == url) { foundSelf = true } else { if (foundSelf) { self.next = self.getInfo(this, "Right"); exit = true } else { self.prev = self.getInfo(this, "Left") } } } }) } this.addButtons(); this.showNav(caption); this.display(1) }, handlerFunc: function(obj, html) { this.showContent(html, { 'width': this.ajustarWidth, 'height': this.ajustarHeight }) }, showLoading: function() { this.Background.empty().removeAttr('style').css({ 'width': 'auto', 'height': 'auto' }); this.Contenido.empty().css({ 'background-color': 'transparent', 'padding': '0px', 'width': 'auto' }); this.Contenedor.css({ 'background-color': 'white' }); this.Contenido.empty().css({ 'background-color': 'white', 'padding': '0px', 'width': 'auto' }); this.replaceBox({ 'width': this.options.BoxStyles.width, 'height': this.options.BoxStyles.height, 'resize': 1 }) }, addButtons: function() { if (this.prev) this.prev.bind('click', $.bind(this, function(obj, event) { event.preventDefault(); this.hook(this.prev) })); if (this.next) this.next.bind('click', $.bind(this, function(obj, event) { event.preventDefault(); this.hook(this.next) })) }, showNav: function(caption) { if (this.MostrarNav || caption) { this.bb.addClass("SLB-bbnav"); this.Nav.empty(); this.innerbb.empty(); this.innerbb.append(this.Nav); this.Descripcion.html(caption); this.Nav.append(this.prev); this.Nav.append(this.next); this.Nav.append(this.Descripcion) } else { this.bb.removeClass("SLB-bbnav"); this.innerbb.empty() } }, showImage: function(image, size) { this.Background.empty().removeAttr('style').css({ 'width': 'auto', 'height': 'auto' }).append('<img id="' + this.options.name + '-Image"/>'); this.Image = $('#' + this.options.name + '-Image'); this.Image.attr('src', image).css({ 'width': size['width'], 'height': size['height'] }); this.Contenedor.css({ 'background': 'none' }); this.Contenido.empty().css({ 'background-color': 'transparent', 'padding': '0px', 'width': 'auto' }) }, showContent: function(html, size, bg) { this.Background.empty().css({ 'width': size['width'] - 14, 'height': size['height'] + 35, 'background-color': bg || '#ffffff' }); this.Contenido.empty().css({ 'width': size['width'] - 14, 'background-color': bg || '#ffffff' }).append('<div id="' + this.options.name + '-Image"/>'); this.Image = $('#' + this.options.name + '-Image'); this.Image.css({ 'width': size['width'] - 14, 'height': size['height'], 'overflow': 'auto', 'background': bg || '#ffffff' }).append(html); this.Contenedor.css({ 'background': 'none' }); var wId = $(this.Wrapper).attr('id'); $('#' + wId + ' select, #' + wId + ' object, #' + wId + ' embed').css({ 'visibility': 'visible' }) }, showIframe: function(src, size, bg) { this.Background.empty().css({ 'width': size['width'] - 14, 'height': size['height'] + 35, 'background-color': bg || '#ffffff' }); var id = "if_" + new Date().getTime() + "-Image"; this.Contenido.empty().css({ 'width': size['width'] - 14, 'background-color': bg || '#ffffff', 'padding': '0px' }).append('<iframe id="' + id + '" frameborder="0"></iframe>'); this.Image = $('#' + id); this.Image.css({ 'width': size['width'] - 14, 'height': size['height'], 'background': bg || '#ffffff' }).attr('src', src); this.Contenedor.css({ 'background': 'none' }) }, parseQuery: function(query) { if (!query) return {}; var params = {}; var pairs = query.split(/[;&]/); for (var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); if (!pair || pair.length != 2) continue; params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' ') } return params }, shake: function() { var d = this.options.shake.distance; var l = this.Wrapper.position(); l = l.left; for (x = 0; x < this.options.shake.loops; x++) { this.Wrapper.animate({ left: l + d }, this.options.shake.duration, this.options.shake.transition).animate({ left: l - d }, this.options.shake.duration, this.options.shake.transition) } this.Wrapper.animate({ "left": l + d }, this.options.shake.duration, this.options.shake.transition).animate({ "left": l }, this.options.shake.duration, this.options.shake.transition) } } })(jQuery);