/** * Copyright (c) 2010 Anders Ekdahl (http://coffeescripter.com/) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version: 1.2.4 * * Demo and documentation: http://coffeescripter.com/code/ad-gallery/ */ (function($) { $.fn.adGallery = function(options) { var defaults = { loader_image: '/site/site-slider/loader.gif', start_at_index: 0, description_wrapper: false, thumb_opacity: 0.7, animate_first_image: false, animation_speed: 400, width: false, height: false, display_next_and_prev: true, display_back_and_forward: true, scroll_jump: 0, // If 0, it jumps the width of the container slideshow: { enable: true, autostart: true, speed: 2000, start_label: 'Start', stop_label: 'Stop', stop_on_scroll: false, countdown_prefix: '(', countdown_sufix: ')', onStart: false, onStop: false }, effect: 'fade', // or 'slide-vert', 'slide-hori', 'fade', or 'resize', 'none' enable_keyboard_move: true, cycle: true, callbacks: { init: false, afterImageVisible: false, beforeImageVisible: false } }; var settings = $.extend(false, defaults, options); if(options && options.slideshow) { settings.slideshow = $.extend(false, defaults.slideshow, options.slideshow); }; if(!settings.slideshow.enable) { settings.slideshow.autostart = false; }; var galleries = []; $(this).each(function() { var gallery = new AdGallery(this, settings); galleries[galleries.length] = gallery; }); // Sorry, breaking the jQuery chain because the gallery instances // are returned so you can fiddle with them return galleries; }; function VerticalSlideAnimation(img_container, direction, desc) { var current_top = parseInt(img_container.css('top'), 10); if(direction == 'left') { var old_image_top = '-'+ this.image_wrapper_height +'px'; img_container.css('top', this.image_wrapper_height +'px'); } else { var old_image_top = this.image_wrapper_height +'px'; img_container.css('top', '-'+ this.image_wrapper_height +'px'); }; if(desc) { desc.css('bottom', '-'+ desc[0].offsetHeight +'px'); desc.animate({bottom: 0}, this.settings.animation_speed * 2); }; if(this.current_description) { this.current_description.animate({bottom: '-'+ this.current_description[0].offsetHeight +'px'}, this.settings.animation_speed * 2); }; return {old_image: {top: old_image_top}, new_image: {top: current_top}}; }; function HorizontalSlideAnimation(img_container, direction, desc) { var current_left = parseInt(img_container.css('left'), 10); if(direction == 'left') { var old_image_left = '-'+ this.image_wrapper_width +'px'; img_container.css('left',this.image_wrapper_width +'px'); } else { var old_image_left = this.image_wrapper_width +'px'; img_container.css('left','-'+ this.image_wrapper_width +'px'); }; if(desc) { desc.css('bottom', '-'+ desc[0].offsetHeight +'px'); desc.animate({bottom: 0}, this.settings.animation_speed * 2); }; if(this.current_description) { this.current_description.animate({bottom: '-'+ this.current_description[0].offsetHeight +'px'}, this.settings.animation_speed * 2); }; return {old_image: {left: old_image_left}, new_image: {left: current_left}}; }; function ResizeAnimation(img_container, direction, desc) { var image_width = img_container.width(); var image_height = img_container.height(); var current_left = parseInt(img_container.css('left'), 10); var current_top = parseInt(img_container.css('top'), 10); img_container.css({width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2}); return {old_image: {width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2}, new_image: {width: image_width, height: image_height, top: current_top, left: current_left}}; }; function FadeAnimation(img_container, direction, desc) { img_container.css('opacity', 0); return {old_image: {opacity: 0}, new_image: {opacity: 1}}; }; // Sort of a hack, will clean this up... eventually function NoneAnimation(img_container, direction, desc) { img_container.css('opacity', 0); return {old_image: {opacity: 0}, new_image: {opacity: 1}, speed: 0}; }; function AdGallery(wrapper, settings) { this.init(wrapper, settings); }; AdGallery.prototype = { // Elements wrapper: false, image_wrapper: false, gallery_info: false, nav: false, loader: false, preloads: false, thumbs_wrapper: false, scroll_back: false, scroll_forward: false, next_link: false, prev_link: false, slideshow: false, image_wrapper_width: 0, image_wrapper_height: 0, current_index: 0, current_image: false, current_description: false, nav_display_width: 0, settings: false, images: false, in_transition: false, animations: false, init: function(wrapper, settings) { var context = this; this.wrapper = $(wrapper); this.settings = settings; this.setupElements(); this.setupAnimations(); if(this.settings.width) { this.image_wrapper_width = this.settings.width; this.image_wrapper.width(this.settings.width); this.wrapper.width(this.settings.width); } else { this.image_wrapper_width = this.image_wrapper.width(); }; if(this.settings.height) { this.image_wrapper_height = this.settings.height; this.image_wrapper.height(this.settings.height); } else { this.image_wrapper_height = this.image_wrapper.height(); }; this.nav_display_width = this.nav.width(); this.current_index = 0; this.current_image = false; this.current_description = false; this.in_transition = false; this.findImages(); if(this.settings.display_next_and_prev) { this.initNextAndPrev(); }; // The slideshow needs a callback to trigger the next image to be shown // but we don't want to give it access to the whole gallery instance var nextimage_callback = function(callback) { return context.nextImage(callback); }; this.slideshow = new AdGallerySlideshow(nextimage_callback, this.settings.slideshow); this.controls.append(this.slideshow.create()); if(this.settings.slideshow.enable) { this.slideshow.enable(); } else { this.slideshow.disable(); }; if(this.settings.display_back_and_forward) { this.initBackAndForward(); }; if(this.settings.enable_keyboard_move) { this.initKeyEvents(); }; var start_at = parseInt(this.settings.start_at_index, 10); if(window.location.hash && window.location.hash.indexOf('#ad-image') === 0) { start_at = window.location.hash.replace(/[^0-9]+/g, ''); // Check if it's a number if((start_at * 1) != start_at) { start_at = this.settings.start_at_index; }; }; this.loading(true); this.showImage(start_at, function() { // We don't want to start the slideshow before the image has been // displayed if(context.settings.slideshow.autostart) { context.preloadImage(start_at + 1); context.slideshow.start(); }; } ); this.fireCallback(this.settings.callbacks.init); }, setupAnimations: function() { this.animations = { 'slide-vert': VerticalSlideAnimation, 'slide-hori': HorizontalSlideAnimation, 'resize': ResizeAnimation, 'fade': FadeAnimation, 'none': NoneAnimation }; }, setupElements: function() { this.controls = this.wrapper.find('.ad-controls'); this.gallery_info = $('

'); this.controls.append(this.gallery_info); this.image_wrapper = this.wrapper.find('.ad-image-wrapper'); this.image_wrapper.empty(); this.nav = this.wrapper.find('.ad-nav'); this.thumbs_wrapper = this.nav.find('.ad-thumbs'); this.preloads = $('
'); this.loader = $(''); this.image_wrapper.append(this.loader); this.loader.hide(); $(document.body).append(this.preloads); }, loading: function(bool) { if(bool) { this.loader.show(); } else { this.loader.hide(); }; }, addAnimation: function(name, fn) { if($.isFunction(fn)) { this.animations[name] = fn; }; }, findImages: function() { var context = this; this.images = []; var thumb_wrapper_width = 0; var thumbs_loaded = 0; var thumbs = this.thumbs_wrapper.find('a'); var thumb_count = thumbs.length; if(this.settings.thumb_opacity < 1) { thumbs.find('img').css('opacity', this.settings.thumb_opacity); }; thumbs.each( function(i) { var link = $(this); var image_src = link.attr('href'); var thumb = link.find('img'); // Check if the thumb has already loaded if(!context.isImageLoaded(thumb[0])) { thumb.load( function() { thumb_wrapper_width += this.parentNode.parentNode.offsetWidth; thumbs_loaded++; } ); } else{ thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth; thumbs_loaded++; }; link.addClass('ad-thumb'+ i); link.click( function() { context.showImage(i); context.slideshow.stop(); return false; } ).hover( function() { if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) { $(this).find('img').fadeTo(300, 1); }; context.preloadImage(i); }, function() { if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) { $(this).find('img').fadeTo(300, context.settings.thumb_opacity); }; } ); var link = false; if(thumb.data('ad-link')) { link = thumb.data('ad-link'); } else if(thumb.attr('longdesc') && thumb.attr('longdesc').length) { link = thumb.attr('longdesc'); }; var desc = false; if(thumb.data('ad-desc')) { desc = thumb.data('ad-desc'); } else if(thumb.attr('alt') && thumb.attr('alt').length) { desc = thumb.attr('alt'); }; var title = false; if(thumb.data('ad-title')) { title = thumb.data('ad-title'); } else if(thumb.attr('title') && thumb.attr('title').length) { title = thumb.attr('title'); }; context.images[i] = { thumb: thumb.attr('src'), image: image_src, error: false, preloaded: false, desc: desc, title: title, size: false, link: link }; } ); // Wait until all thumbs are loaded, and then set the width of the ul var inter = setInterval( function() { if(thumb_count == thumbs_loaded) { thumb_wrapper_width -= 100; var list = context.nav.find('.ad-thumb-list'); // list.css('width', thumb_wrapper_width +'px'); list.css('width', thumb_wrapper_width +'px'); var i = 1; var last_height = list.height(); while(i < 201) { // list.css('width', '660px'); if(last_height != list.height()) { break; } last_height = list.height(); i++; } clearInterval(inter); }; }, 100 ); }, initKeyEvents: function() { var context = this; $(document).keydown( function(e) { if(e.keyCode == 39) { // right arrow context.nextImage(); context.slideshow.stop(); } else if(e.keyCode == 37) { // left arrow context.prevImage(); context.slideshow.stop(); }; } ); }, initNextAndPrev: function() { this.next_link = $('
'); this.prev_link = $('
'); this.image_wrapper.append(this.next_link); this.image_wrapper.append(this.prev_link); var context = this; this.prev_link.add(this.next_link).mouseover( function(e) { // IE 6 hides the wrapper div, so we have to set it's width $(this).css('height', context.image_wrapper_height); $(this).find('div').show(); } ).mouseout( function(e) { $(this).find('div').hide(); } ).click( function() { if($(this).is('.ad-next')) { context.nextImage(); context.slideshow.stop(); } else { context.prevImage(); context.slideshow.stop(); }; } ).find('div').css('opacity', 0.7); }, initBackAndForward: function() { var context = this; this.scroll_forward = $('
'); this.scroll_back = $('
'); this.nav.append(this.scroll_forward); this.nav.prepend(this.scroll_back); var has_scrolled = 0; var thumbs_scroll_interval = false; $(this.scroll_back).add(this.scroll_forward).click( function() { // We don't want to jump the whole width, since an image // might be cut at the edge var width = context.nav_display_width - 50; if(context.settings.scroll_jump > 0) { var width = context.settings.scroll_jump; }; if($(this).is('.ad-forward')) { var left = context.thumbs_wrapper.scrollLeft() + width; } else { var left = context.thumbs_wrapper.scrollLeft() - width; }; if(context.settings.slideshow.stop_on_scroll) { context.slideshow.stop(); }; context.thumbs_wrapper.animate({scrollLeft: left +'px'}); return false; } ).css('opacity', 0.6).hover( function() { var direction = 'left'; if($(this).is('.ad-forward')) { direction = 'right'; }; thumbs_scroll_interval = setInterval( function() { has_scrolled++; // Don't want to stop the slideshow just because we scrolled a pixel or two if(has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) { context.slideshow.stop(); }; var left = context.thumbs_wrapper.scrollLeft() + 1; if(direction == 'left') { left = context.thumbs_wrapper.scrollLeft() - 1; }; context.thumbs_wrapper.scrollLeft(left); }, 10 ); $(this).css('opacity', 1); }, function() { has_scrolled = 0; clearInterval(thumbs_scroll_interval); $(this).css('opacity', 0.6); } ); }, _afterShow: function() { this.gallery_info.html((this.current_index + 1) +' / '+ this.images.length); if(!this.settings.cycle) { // Needed for IE this.prev_link.show().css('height', this.image_wrapper_height); this.next_link.show().css('height', this.image_wrapper_height); if(this.current_index == (this.images.length - 1)) { this.next_link.hide(); }; if(this.current_index == 0) { this.prev_link.hide(); }; }; this.fireCallback(this.settings.callbacks.afterImageVisible); }, /** * Checks if the image is small enough to fit inside the container * If it's not, shrink it proportionally */ _getContainedImageSize: function(image_width, image_height) { if(image_height > this.image_wrapper_height) { var ratio = image_width / image_height; image_height = this.image_wrapper_height; image_width = this.image_wrapper_height * ratio; }; if(image_width > this.image_wrapper_width) { var ratio = image_height / image_width; image_width = this.image_wrapper_width; image_height = this.image_wrapper_width * ratio; }; return {width: image_width, height: image_height}; }, /** * If the image dimensions are smaller than the wrapper, we position * it in the middle anyway */ _centerImage: function(img_container, image_width, image_height) { img_container.css('top', '0px'); if(image_height < this.image_wrapper_height) { var dif = this.image_wrapper_height - image_height; img_container.css('top', (dif / 2) +'px'); }; img_container.css('left', '0px'); if(image_width < this.image_wrapper_width) { var dif = this.image_wrapper_width - image_width; img_container.css('left', (dif / 2) +'px'); }; }, _getDescription: function(image) { var desc = false; if(image.desc.length || image.title.length) { var title = ''; if(image.title.length) { title = ''+ image.title +''; }; var desc = ''; if(image.desc.length) { desc = ''+ image.desc +''; }; desc = $('

'+ title + desc +'

'); }; return desc; }, /** * @param function callback Gets fired when the image has loaded, is displaying * and it's animation has finished */ showImage: function(index, callback) { if(this.images[index] && !this.in_transition) { var context = this; var image = this.images[index]; this.in_transition = true; if(!image.preloaded) { this.loading(true); this.preloadImage(index, function() { context.loading(false); context._showWhenLoaded(index, callback); }); } else { this._showWhenLoaded(index, callback); }; }; }, /** * @param function callback Gets fired when the image has loaded, is displaying * and it's animation has finished */ _showWhenLoaded: function(index, callback) { if(this.images[index]) { var context = this; var image = this.images[index]; var img_container = $(document.createElement('div')).addClass('ad-image'); var img = $(new Image()).attr('src', image.image); if(image.link) { //var link = $(''); //var link = $(''); //var link = $(''); var link = $(''); link.append(img); img_container.append(link); } else { img_container.append(img); } this.image_wrapper.prepend(img_container); var size = this._getContainedImageSize(image.size.width, image.size.height); img.attr('width', size.width); img.attr('height', size.height); img_container.css({width: size.width +'px', height: size.height +'px'}); this._centerImage(img_container, size.width, size.height); var desc = this._getDescription(image, img_container); if(desc) { if(!this.settings.description_wrapper) { img_container.append(desc); var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10); desc.css('width', width +'px'); } else { this.settings.description_wrapper.append(desc); } }; this.highLightThumb(this.nav.find('.ad-thumb'+ index)); var direction = 'right'; if(this.current_index < index) { direction = 'left'; }; this.fireCallback(this.settings.callbacks.beforeImageVisible); if(this.current_image || this.settings.animate_first_image) { var animation_speed = this.settings.animation_speed; var easing = 'swing'; var animation = this.animations[this.settings.effect].call(this, img_container, direction, desc); if(typeof animation.speed != 'undefined') { animation_speed = animation.speed; }; if(typeof animation.easing != 'undefined') { easing = animation.easing; }; if(this.current_image) { var old_image = this.current_image; var old_description = this.current_description; old_image.animate(animation.old_image, animation_speed, easing, function() { old_image.remove(); if(old_description) old_description.remove(); } ); }; img_container.animate(animation.new_image, animation_speed, easing, function() { context.current_index = index; context.current_image = img_container; context.current_description = desc; context.in_transition = false; context._afterShow(); context.fireCallback(callback); } ); } else { this.current_index = index; this.current_image = img_container; context.current_description = desc; this.in_transition = false; context._afterShow(); this.fireCallback(callback); }; }; }, nextIndex: function() { if(this.current_index == (this.images.length - 1)) { if(!this.settings.cycle) { return false; }; var next = 0; } else { var next = this.current_index + 1; }; return next; }, nextImage: function(callback) { var next = this.nextIndex(); if(next === false) return false; this.preloadImage(next + 1); this.showImage(next, callback); return true; }, prevIndex: function() { if(this.current_index == 0) { if(!this.settings.cycle) { return false; }; var prev = this.images.length - 1; } else { var prev = this.current_index - 1; }; return prev; }, prevImage: function(callback) { var prev = this.prevIndex(); if(prev === false) return false; this.preloadImage(prev - 1); this.showImage(prev, callback); return true; }, preloadAll: function() { var context = this; var i = 0; function preloadNext() { if(i < context.images.length) { i++; context.preloadImage(i, preloadNext); }; }; context.preloadImage(i, preloadNext); }, preloadImage: function(index, callback) { if(this.images[index]) { var image = this.images[index]; if(!this.images[index].preloaded) { var img = $(new Image()); img.attr('src', image.image); if(!this.isImageLoaded(img[0])) { this.preloads.append(img); var context = this; img.load( function() { image.preloaded = true; image.size = { width: this.width, height: this.height }; context.fireCallback(callback); } ).error( function() { image.error = true; image.preloaded = false; image.size = false; } ); } else { image.preloaded = true; image.size = { width: img[0].width, height: img[0].height }; this.fireCallback(callback); }; } else { this.fireCallback(callback); }; }; }, isImageLoaded: function(img) { if(typeof img.complete != 'undefined' && !img.complete) { return false; }; if(typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0) { return false; }; return true; }, highLightThumb: function(thumb) { this.thumbs_wrapper.find('.ad-active').removeClass('ad-active'); thumb.addClass('ad-active'); if(this.settings.thumb_opacity < 1) { this.thumbs_wrapper.find('a:not(.ad-active) img').fadeTo(300, this.settings.thumb_opacity); thumb.find('img').fadeTo(300, 1); }; var left = thumb[0].parentNode.offsetLeft; left -= (this.nav_display_width / 2) - (thumb[0].offsetWidth / 2); this.thumbs_wrapper.animate({scrollLeft: left +'px'}); }, fireCallback: function(fn) { if($.isFunction(fn)) { fn.call(this); }; } }; function AdGallerySlideshow(nextimage_callback, settings) { this.init(nextimage_callback, settings); }; AdGallerySlideshow.prototype = { start_link: false, stop_link: false, countdown: false, controls: false, settings: false, nextimage_callback: false, enabled: false, running: false, countdown_interval: false, init: function(nextimage_callback, settings) { var context = this; this.nextimage_callback = nextimage_callback; this.settings = settings; }, create: function() { this.start_link = $(''+ this.settings.start_label +''); this.stop_link = $(''+ this.settings.stop_label +''); this.countdown = $(''); this.controls = $('
'); this.controls.append(this.start_link).append(this.stop_link).append(this.countdown); this.countdown.hide(); var context = this; this.start_link.click( function() { context.start(); } ); this.stop_link.click( function() { context.stop(); } ); $(document).keydown( function(e) { if(e.keyCode == 83) { // 's' if(context.running) { context.stop(); } else { context.start(); }; }; } ); return this.controls; }, disable: function() { this.enabled = false; this.stop(); this.controls.hide(); }, enable: function() { this.enabled = true; this.controls.show(); }, toggle: function() { if(this.enabled) { this.disable(); } else { this.enable(); }; }, start: function() { if(this.running || !this.enabled) return false; var context = this; this.running = true; this.controls.addClass('ad-slideshow-running'); this._next(); this.fireCallback(this.settings.onStart); return true; }, stop: function() { if(!this.running) return false; this.running = false; this.countdown.hide(); this.controls.removeClass('ad-slideshow-running'); clearInterval(this.countdown_interval); this.fireCallback(this.settings.onStop); return true; }, _next: function() { var context = this; var pre = this.settings.countdown_prefix; var su = this.settings.countdown_sufix; clearInterval(context.countdown_interval); this.countdown.show().html(pre + (this.settings.speed / 1000) + su); var slide_timer = 0; this.countdown_interval = setInterval( function() { slide_timer += 1000; if(slide_timer >= context.settings.speed) { var whenNextIsShown = function() { // A check so the user hasn't stoped the slideshow during the // animation if(context.running) { context._next(); }; slide_timer = 0; }; if(!context.nextimage_callback(whenNextIsShown)) { context.stop(); }; slide_timer = 0; }; var sec = parseInt(context.countdown.text().replace(/[^0-9]/g, ''), 10); sec--; if(sec > 0) { context.countdown.html(pre + sec + su); }; }, 1000 ); }, fireCallback: function(fn) { if($.isFunction(fn)) { fn.call(this); }; } }; })(jQuery); /** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DOM WINDOW * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ (function($){ //closeDOMWindow $.fn.closeDOMWindow = function(settings){ if(!settings){settings={};} var run = function(passingThis){ if(settings.anchoredClassName){ var $anchorClassName = $('.'+settings.anchoredClassName); $anchorClassName.fadeOut('fast',function(){ if($.fn.draggable){ $anchorClassName.draggable('destory').trigger("unload").remove(); }else{ $anchorClassName.trigger("unload").remove(); } }); if(settings.functionCallOnClose){settings.functionCallAfterClose();} }else{ var $DOMWindowOverlay = $('#DOMWindowOverlay'); var $DOMWindow = $('#DOMWindow'); $DOMWindowOverlay.fadeOut('fast',function(){ $DOMWindowOverlay.trigger('unload').unbind().remove(); }); $DOMWindow.fadeOut('fast',function(){ if($.fn.draggable){ $DOMWindow.draggable("destroy").trigger("unload").remove(); }else{ $DOMWindow.trigger("unload").remove(); } }); $(window).unbind('scroll.DOMWindow'); $(window).unbind('resize.DOMWindow'); if($.fn.openDOMWindow.isIE6){$('#DOMWindowIE6FixIframe').remove();} if(settings.functionCallOnClose){settings.functionCallAfterClose();} } }; if(settings.eventType){//if used with $(). return this.each(function(index){ $(this).bind(settings.eventType, function(){ run(this); return false; }); }); }else{//else called as $.function run(); } }; //allow for public call, pass settings $.closeDOMWindow = function(s){$.fn.closeDOMWindow(s);}; //openDOMWindow $.fn.openDOMWindow = function(instanceSettings){ var shortcut = $.fn.openDOMWindow; //default settings combined with callerSettings//////////////////////////////////////////////////////////////////////// shortcut.defaultsSettings = { anchoredClassName:'', anchoredSelector:'', borderColor:'#ccc', borderSize:'4', draggable:0, eventType:null, //click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup etc... fixedWindowY:100, functionCallOnOpen:null, functionCallOnClose:null, height:500, loader:0, loaderHeight:0, loaderImagePath:'', loaderWidth:0, modal:0, overlay:1, overlayColor:'#000', overlayOpacity:'85', positionLeft:0, positionTop:0, positionType:'centered', // centered, anchored, absolute, fixed width:500, windowBGColor:'#fff', windowBGImage:null, // http path windowHTTPType:'get', windowPadding:10, windowSource:'inline', //inline, ajax, iframe windowSourceID:'', windowSourceURL:'', windowSourceAttrURL:'href' }; var settings = $.extend({}, $.fn.openDOMWindow.defaultsSettings , instanceSettings || {}); //Public functions shortcut.viewPortHeight = function(){ return self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;}; shortcut.viewPortWidth = function(){ return self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;}; shortcut.scrollOffsetHeight = function(){ return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;}; shortcut.scrollOffsetWidth = function(){ return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;}; shortcut.isIE6 = typeof document.body.style.maxHeight === "undefined"; //Private Functions///////////////////////////////////////////////////////////////////////////////////////////////////////// var sizeOverlay = function(){ var $DOMWindowOverlay = $('#DOMWindowOverlay'); if(shortcut.isIE6){//if IE 6 var overlayViewportHeight = document.documentElement.offsetHeight + document.documentElement.scrollTop - 4; var overlayViewportWidth = document.documentElement.offsetWidth - 21; $DOMWindowOverlay.css({'height':overlayViewportHeight +'px','width':overlayViewportWidth+'px'}); }else{//else Firefox, safari, opera, IE 7+ $DOMWindowOverlay.css({'height':'100%','width':'100%','position':'fixed'}); } }; var sizeIE6Iframe = function(){ var overlayViewportHeight = document.documentElement.offsetHeight + document.documentElement.scrollTop - 4; var overlayViewportWidth = document.documentElement.offsetWidth - 21; $('#DOMWindowIE6FixIframe').css({'height':overlayViewportHeight +'px','width':overlayViewportWidth+'px'}); }; var centerDOMWindow = function() { var $DOMWindow = $('#DOMWindow'); if(settings.height + 50 > shortcut.viewPortHeight()){//added 50 to be safe $DOMWindow.css('left',Math.round(shortcut.viewPortWidth()/2) + shortcut.scrollOffsetWidth() - Math.round(($DOMWindow.outerWidth())/2)); }else{ $DOMWindow.css('left',Math.round(shortcut.viewPortWidth()/2) + shortcut.scrollOffsetWidth() - Math.round(($DOMWindow.outerWidth())/2)); $DOMWindow.css('top',Math.round(shortcut.viewPortHeight()/2) + shortcut.scrollOffsetHeight() - Math.round(($DOMWindow.outerHeight())/2)); } }; var centerLoader = function() { var $DOMWindowLoader = $('#DOMWindowLoader'); if(shortcut.isIE6){//if IE 6 $DOMWindowLoader.css({'left':Math.round(shortcut.viewPortWidth()/2) + shortcut.scrollOffsetWidth() - Math.round(($DOMWindowLoader.innerWidth())/2),'position':'absolute'}); $DOMWindowLoader.css({'top':Math.round(shortcut.viewPortHeight()/2) + shortcut.scrollOffsetHeight() - Math.round(($DOMWindowLoader.innerHeight())/2),'position':'absolute'}); }else{ $DOMWindowLoader.css({'left':'50%','top':'50%','position':'fixed'}); } }; var fixedDOMWindow = function(){ var $DOMWindow = $('#DOMWindow'); $DOMWindow.css('left', settings.positionLeft + shortcut.scrollOffsetWidth()); $DOMWindow.css('top', + settings.positionTop + shortcut.scrollOffsetHeight()); }; var showDOMWindow = function(instance){ if(arguments[0]){ $('.'+instance+' #DOMWindowLoader').remove(); $('.'+instance+' #DOMWindowContent').fadeIn('fast',function(){if(settings.functionCallOnOpen){settings.functionCallOnOpen();}}); $('.'+instance+ '.closeDOMWindow').click(function(){ $.closeDOMWindow(); return false; }); }else{ $('#DOMWindowLoader').remove(); $('#DOMWindow').fadeIn('fast',function(){if(settings.functionCallOnOpen){settings.functionCallOnOpen();}}); $('#DOMWindow .closeDOMWindow').click(function(){ $.closeDOMWindow(); return false; }); } }; var urlQueryToObject = function(s){ var query = {}; s.replace(/b([^&=]*)=([^&=]*)b/g, function (m, a, d) { if (typeof query[a] != 'undefined') { query[a] += ',' + d; } else { query[a] = d; } }); return query; }; //Run Routine /////////////////////////////////////////////////////////////////////////////////////////////////////////////// var run = function(passingThis){ //get values from element clicked, or assume its passed as an option settings.windowSourceID = $(passingThis).attr('href') || settings.windowSourceID; settings.windowSourceURL = $(passingThis).attr(settings.windowSourceAttrURL) || settings.windowSourceURL; settings.windowBGImage = settings.windowBGImage ? 'background-image:url('+settings.windowBGImage+')' : ''; var urlOnly, urlQueryObject; if(settings.positionType == 'anchored'){//anchored DOM window var anchoredPositions = $(settings.anchoredSelector).position(); var anchoredPositionX = anchoredPositions.left + settings.positionLeft; var anchoredPositionY = anchoredPositions.top + settings.positionTop; $('body').append('
'); //loader if(settings.loader && settings.loaderImagePath !== ''){ $('.'+settings.anchoredClassName).append('
'); } if($.fn.draggable){ if(settings.draggable){$('.' + settings.anchoredClassName).draggable({cursor:'move'});} } switch(settings.windowSource){ case 'inline'://////////////////////////////// inline ////////////////////////////////////////// $('.' + settings.anchoredClassName+" #DOMWindowContent").append($(settings.windowSourceID).children()); $('.' + settings.anchoredClassName).unload(function(){// move elements back when you're finished $('.' + settings.windowSourceID).append( $('.' + settings.anchoredClassName+" #DOMWindowContent").children()); }); showDOMWindow(settings.anchoredClassName); break; case 'iframe'://////////////////////////////// iframe ////////////////////////////////////////// $('.' + settings.anchoredClassName+" #DOMWindowContent").append(''); $('.'+settings.anchoredClassName+'Iframe').load(showDOMWindow(settings.anchoredClassName)); break; case 'ajax'://////////////////////////////// ajax ////////////////////////////////////////// if(settings.windowHTTPType == 'post'){ if(settings.windowSourceURL.indexOf("?") !== -1){//has a query string urlOnly = settings.windowSourceURL.substr(0, settings.windowSourceURL.indexOf("?")); urlQueryObject = urlQueryToObject(settings.windowSourceURL); }else{ urlOnly = settings.windowSourceURL; urlQueryObject = {}; } $('.' + settings.anchoredClassName+" #DOMWindowContent").load(urlOnly,urlQueryObject,function(){ showDOMWindow(settings.anchoredClassName); }); }else{ if(settings.windowSourceURL.indexOf("?") == -1){ //no query string, so add one settings.windowSourceURL += '?'; } $('.' + settings.anchoredClassName+" #DOMWindowContent").load( settings.windowSourceURL + '&random=' + (new Date().getTime()),function(){ showDOMWindow(settings.anchoredClassName); }); } break; } }else{//centered, fixed, absolute DOM window //overlay & modal if(settings.overlay){ $('body').append(''); if(shortcut.isIE6){//if IE 6 $('body').append(''); sizeIE6Iframe(); } sizeOverlay(); var $DOMWindowOverlay = $('#DOMWindowOverlay'); $DOMWindowOverlay.fadeIn('fast'); if(!settings.modal){$DOMWindowOverlay.click(function(){ $.closeDOMWindow();});} } //loader if(settings.loader && settings.loaderImagePath !== ''){ $('body').append('
'); centerLoader(); } //add DOMwindow $('body').append(''); var $DOMWindow = $('#DOMWindow'); //centered, absolute, or fixed switch(settings.positionType){ case 'centered': centerDOMWindow(); if(settings.height + 50 > shortcut.viewPortHeight()){//added 50 to be safe $DOMWindow.css('top', (settings.fixedWindowY + shortcut.scrollOffsetHeight()) + 'px'); } break; case 'absolute': $DOMWindow.css({'top':(settings.positionTop+shortcut.scrollOffsetHeight())+'px','left':(settings.positionLeft+shortcut.scrollOffsetWidth())+'px'}); if($.fn.draggable){ if(settings.draggable){$DOMWindow.draggable({cursor:'move'});} } break; case 'fixed': fixedDOMWindow(); break; case 'anchoredSingleWindow': var anchoredPositions = $(settings.anchoredSelector).position(); var anchoredPositionX = anchoredPositions.left + settings.positionLeft; var anchoredPositionY = anchoredPositions.top + settings.positionTop; $DOMWindow.css({'top':anchoredPositionY + 'px','left':anchoredPositionX+'px'}); break; } $(window).bind('scroll.DOMWindow',function(){ if(settings.overlay){sizeOverlay();} if(shortcut.isIE6){sizeIE6Iframe();} if(settings.positionType == 'centered'){centerDOMWindow();} if(settings.positionType == 'fixed'){fixedDOMWindow();} }); $(window).bind('resize.DOMWindow',function(){ if(shortcut.isIE6){sizeIE6Iframe();} if(settings.overlay){sizeOverlay();} if(settings.positionType == 'centered'){centerDOMWindow();} }); switch(settings.windowSource){ case 'inline'://////////////////////////////// inline ////////////////////////////////////////// $DOMWindow.append($(settings.windowSourceID).children()); $DOMWindow.unload(function(){// move elements back when you're finished $(settings.windowSourceID).append($DOMWindow.children()); }); showDOMWindow(); break; case 'iframe'://////////////////////////////// iframe ////////////////////////////////////////// $DOMWindow.append(''); $('#DOMWindowIframe').load(showDOMWindow()); break; case 'ajax'://////////////////////////////// ajax ////////////////////////////////////////// if(settings.windowHTTPType == 'post'){ if(settings.windowSourceURL.indexOf("?") !== -1){//has a query string urlOnly = settings.windowSourceURL.substr(0, settings.windowSourceURL.indexOf("?")); urlQueryObject = urlQueryToObject(settings.windowSourceURL); }else{ urlOnly = settings.windowSourceURL; urlQueryObject = {}; } $DOMWindow.load(urlOnly,urlQueryObject,function(){ showDOMWindow(); }); }else{ if(settings.windowSourceURL.indexOf("?") == -1){ //no query string, so add one settings.windowSourceURL += '?'; } $DOMWindow.load( settings.windowSourceURL + '&random=' + (new Date().getTime()),function(){ showDOMWindow(); }); } break; } }//end if anchored, or absolute, fixed, centered };//end run() if(settings.eventType){//if used with $(). return this.each(function(index){ $(this).bind(settings.eventType,function(){ run(this); return false; }); }); }else{//else called as $.function run(); } };//end function openDOMWindow //allow for public call, pass settings $.openDOMWindow = function(s){$.fn.openDOMWindow(s);}; })(jQuery);