第一个bug是：图片过大的时候，加载出来的，只有高度自适应，而宽度未自适应，只显示部分
第二个bug 是：图片过大时候，如果点击查看未加载完，则会缩回成很小一部分，导致无法正确预览
完善后的正确js如下：
// lightwindow.js v2.0
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
//
// LightWindow is freely distributable under the terms of an MIT-style license.
//
// I don't care what you think about the file size...
// Be a pro:
// http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
// http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
//
/*-----------------------------------------------------------------------------------------------*/
if (typeof Effect == 'undefined')
throw ("lightwindow.js requires including script.aculo.us' effects.js library!");
// This will stop image flickering in IE6 when elements with images are moved
try {
document.execCommand("BackgroundImageCache", false, true);
} catch (e) { }
var lightwindow = Class.create();
lightwindow.prototype = {
//
// Setup Variables
//
element: null,
contentToFetch: null,
windowActive: false,
dataEffects: [],
dimensions: {
cruft: null,
container: null,
viewport: {
height: null,
width: null,
offsetTop: null,
offsetLeft: null
}
},
pagePosition: {
x: 0,
y: 0
},
pageDimensions: {
width: null,
height: null
},
preloadImage: [],
preloadedImage: [],
galleries: [],
resizeTo: {
height: null,
heightPercent: null,
width: null,
widthPercent: null,
fixedTop: null,
fixedLeft: null
},
scrollbarOffset: 18,
navigationObservers: {
previous: null,
next: null
},
containerChange: {
height: 0,
width: 0
},
activeGallery: false,
galleryLocation: {
current: 0,
total: 0
},
//
// Initialize the lightwindow.
//
initialize: function(options) {
this.options = Object.extend({
resizeSpeed: 8,
contentOffset: {
height: 20,
width: 20
},
dimensions: {
image: { height: 250, width: 250 },
page: { height: 250, width: 250 },
inline: { height: 250, width: 250 },
media: { height: 250, width: 250 },
external: { height: 250, width: 250 },
titleHeight: 25
},
classNames: {
standard: 'lightwindow',
action: 'lightwindow_action'
},
fileTypes: {
page: ['asp', 'aspx', 'cgi', 'cfm', 'htm', 'html', 'pl', 'php4', 'php3', 'php', 'php5', 'phtml', 'rhtml', 'shtml', 'txt', 'vbs', 'rb'],
media: ['aif', 'aiff', 'asf', 'avi', 'divx', 'm1v', 'm2a', 'm2v', 'm3u', 'mid', 'midi', 'mov', 'moov', 'movie', 'mp2', 'mp3', 'mpa', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpg', 'mpga', 'pps', 'qt', 'rm', 'ram', 'swf', 'viv', 'vivo', 'wav'],
image: ['bmp', 'gif', 'jpg', 'png', 'tiff']
},
mimeTypes: {
avi: 'video/avi',
aif: 'audio/aiff',
aiff: 'audio/aiff',
gif: 'image/gif',
bmp: 'image/bmp',
jpeg: 'image/jpeg',
m1v: 'video/mpeg',
m2a: 'audio/mpeg',
m2v: 'video/mpeg',
m3u: 'audio/x-mpequrl',
mid: 'audio/x-midi',
midi: 'audio/x-midi',
mjpg: 'video/x-motion-jpeg',
moov: 'video/quicktime',
mov: 'video/quicktime',
movie: 'video/x-sgi-movie',
mp2: 'audio/mpeg',
mp3: 'audio/mpeg3',
mpa: 'audio/mpeg',
mpa: 'video/mpeg',
mpe: 'video/mpeg',
mpeg: 'video/mpeg',
mpg: 'audio/mpeg',
mpg: 'video/mpeg',
mpga: 'audio/mpeg',
pdf: 'application/pdf',
png: 'image/png',
pps: 'application/mspowerpoint',
qt: 'video/quicktime',
ram: 'audio/x-pn-realaudio-plugin',
rm: 'application/vnd.rn-realmedia',
swf: 'application/x-shockwave-flash',
tiff: 'image/tiff',
viv: 'video/vivo',
vivo: 'video/vivo',
wav: 'audio/wav',
wmv: 'application/x-mplayer2'
},
classids: {
mov: 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
swf: 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',
wmv: 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'
},
codebases: {
mov: 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',
swf: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
wmv: 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'
},
viewportPadding: 10,
EOLASFix: 'swf,wmv,fla,flv',
overlay: {
opacity: 0.7,
image: 'images/black.png',
presetImage: 'images/black-70.png'
},
skin: {
main: '<div id="lightwindow_container" >' +
'<div id="lightwindow_title_bar" >' +
'<div id="lightwindow_title_bar_inner" >' +
'<span id="lightwindow_title_bar_title"></span>' +
'<a id="lightwindow_title_bar_close_link" >close</a>' +
'</div>' +
'</div>' +
'<div id="lightwindow_stage" >' +
'<div id="lightwindow_contents" >' +
'</div>' +
'<div id="lightwindow_navigation" >' +
'<a href="#" id="lightwindow_previous" >' +
'<span id="lightwindow_previous_title"></span>' +
'</a>' +
'<a href="#" id="lightwindow_next" >' +
'<span id="lightwindow_next_title"></span>' +
'</a>' +
'<iframe name="lightwindow_navigation_shim" id="lightwindow_navigation_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>' +
'</div>' +
'<div id="lightwindow_galleries">' +
'<div id="lightwindow_galleries_tab_container" >' +
'<a href="#" id="lightwindow_galleries_tab" >' +
'<span id="lightwindow_galleries_tab_span" class="up" >Galleries</span>' +
'</a>' +
'</div>' +
'<div id="lightwindow_galleries_list" >' +
'</div>' +
'</div>' +
'</div>' +
'<div id="lightwindow_data_slide" >' +
'<div id="lightwindow_data_slide_inner" >' +
'<div id="lightwindow_data_details" >' +
'<div id="lightwindow_data_gallery_container" >' +
'<span id="lightwindow_data_gallery_current"></span>' +
' of ' +
'<span id="lightwindow_data_gallery_total"></span>' +
'</div>' +
'<div id="lightwindow_data_author_container" >' +
'by <span id="lightwindow_data_author"></span>' +
'</div>' +
'</div>' +
'<div id="lightwindow_data_caption" >' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
loading: '<div id="lightwindow_loading" >' +
'<img src="images/ajax-loading.gif" alt="loading" />' +
'<span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span>' +
'<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>' +
'</div>',
iframe: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' +
'<html xmlns="http://www.w3.org/1999/xhtml">' +
'<body>' +
'{body_replace}' +
'</body>' +
'</html>',
gallery: {
top: '<div class="lightwindow_galleries_list">' +
'<h1>{gallery_title_replace}</h1>' +
'<ul>',
middle: '<li>' +
'{gallery_link_replace}' +
'</li>',
bottom: '</ul>' +
'</div>'
}
},
formMethod: 'get',
hideFlash: false,
hideGalleryTab: false,
showTitleBar: true,
animationHandler: false,
navigationHandler: false,
transitionHandler: false,
finalAnimationHandler: false,
formHandler: false,
galleryAnimationHandler: false,
showGalleryCount: true
}, options || {});
this.duration = ((11 - this.options.resizeSpeed) * 0.15);
this._setupLinks();
this._getScroll();
this._getPageDimensions();
this._browserDimensions();
this._addLightWindowMarkup(false);
this._setupDimensions();
this.buildGalleryList();
},
//
// Activate the lightwindow.
//
activate: function(e, link) {
// Clear out the window Contents
this._clearWindowContents(true);
// Add back in out loading panel
this._addLoadingWindowMarkup();
// Setup the element properties
this._setupWindowElements(link);
// Setup everything
this._getScroll();
this._browserDimensions();
this._setupDimensions();
this._toggleTroubleElements('hidden', false);
this._displayLightWindow('block', 'hidden');
this._setStatus(true);
this._monitorKeyboard(true);
this._prepareIE(true);
this._loadWindow();
},
//
// Turn off the window
//
deactivate: function() {
// The window is not active
this.windowActive = false;
// There is no longer a gallery active
this.activeGallery = false;
if (!this.options.hideGalleryTab) {
this._handleGalleryAnimation(false);
}
// Kill the animation
this.animating = false;
// Clear our element
this.element = null;
// hide the window.
this._displayLightWindow('none', 'visible');
// Clear out the window Contents
this._clearWindowContents(false);
// Stop all animation
var queue = Effect.Queues.get('lightwindowAnimation').each(function(e) { e.cancel(); });
// Undo the setup
this._prepareIE(false);
this._setupDimensions();
this._toggleTroubleElements('visible', false);
this._monitorKeyboard(false);
},
//
// Initialize specific window
//
createWindow: function(element, attributes) {
this._processLink($(element));
},
//
// Open a Window from a hash of attributes
//
activateWindow: function(options) {
this.element = Object.extend({
href: null,
title: null,
author: null,
caption: null,
rel: null,
top: null,
left: null,
type: null,
showImages: null,
height: null,
width: null,
loadingAnimation: null,
iframeEmbed: null,
form: null
}, options || {});
// Set the window type
this.contentToFetch = this.element.href;
this.windowType = this.element.type ? this.element.type : this._fileType(this.element.href);
// Clear out the window Contents
this._clearWindowContents(true);
// Add back in out loading panel
this._addLoadingWindowMarkup();
// Setup everything
this._getScroll();
this._browserDimensions();
this._setupDimensions();
this._toggleTroubleElements('hidden', false);
this._displayLightWindow('block', 'hidden');
this._setStatus(true);
this._monitorKeyboard(true);
this._prepareIE(true);
this._loadWindow();
},
//
// Fire off our Form handler
//
submitForm: function(e) {
if (this.options.formHandler) {
this.options.formHandler(e);
} else {
this._defaultFormHandler(e);
}
},
//
// Reload the window with another location
//
openWindow: function(element) {
var element = $(element);
// The window is active
this.windowActive = true;
// Clear out the window Contents
this._clearWindowContents(true);
// Add back in out loading panel
this._addLoadingWindowMarkup();
// Setup the element properties
this._setupWindowElements(element);
this._setStatus(true);
this._handleTransition();
},
//
// Navigate the window
//
navigateWindow: function(direction) {
this._handleNavigation(false);
if (direction == 'previous') {
this.openWindow(this.navigationObservers.previous);
} else if (direction == 'next') {
this.openWindow(this.navigationObservers.next);
}
},
//
// Build the Gallery List and Load it
//
buildGalleryList: function() {
var output = '';
var galleryLink;
for (i in this.galleries) {
if (typeof this.galleries[i] == 'object') {
output += (this.options.skin.gallery.top).replace('{gallery_title_replace}', unescape(i));
for (j in this.galleries[i]) {
if (typeof this.galleries[i][j] == 'object') {
galleryLink = '<a href="#" id="lightwindow_gallery_' + i + '_' + j + '" >' + unescape(j) + '</a>';
output += (this.options.skin.gallery.middle).replace('{gallery_link_replace}', galleryLink);
}
}
output += this.options.skin.gallery.bottom;
}
}
new Insertion.Top('lightwindow_galleries_list', output);
// Attach Events
for (i in this.galleries) {
if (typeof this.galleries[i] == 'object') {
for (j in this.galleries[i]) {
if (typeof this.galleries[i][j] == 'object') {
Event.observe($('lightwindow_gallery_' + i + '_' + j), 'click', this.openWindow.bind(this, this.galleries[i][j][0]), false);
$('lightwindow_gallery_' + i + '_' + j).onclick = function() { return false; };
}
}
}
}
},
//
// Set Links Up
//
_setupLinks: function() {
var links = $$('.' + this.options.classNames.standard);
links.each(function(link) {
this._processLink(link);
} .bind(this));
},
//
// Process a Link
//
_processLink: function(link) {
if ((this._fileType(link.getAttribute('href')) == 'image' || this._fileType(link.getAttribute('href')) == 'media')) {
if (gallery = this._getGalleryInfo(link.rel)) {
if (!this.galleries[gallery[0]]) {
this.galleries[gallery[0]] = new Array();
}
if (!this.galleries[gallery[0]][gallery[1]]) {
this.galleries[gallery[0]][gallery[1]] = new Array();
}
this.galleries[gallery[0]][gallery[1]].push(link);
}
}
// Take care of our inline content
var url = link.getAttribute('href');
if (url.indexOf('?') > -1) {
url = url.substring(0, url.indexOf('?'));
}
var container = url.substring(url.indexOf('#') + 1);
if ($(container)) {
$(container).setStyle({
display: 'none'
});
}
Event.observe(link, 'click', this.activate.bindAsEventListener(this, link), false);
link.onclick = function() { return false; };
},
//
// Setup our actions
//
_setupActions: function() {
var links = $$('#lightwindow_container .' + this.options.classNames.action);
links.each(function(link) {
Event.observe(link, 'click', this[link.getAttribute('rel')].bindAsEventListener(this, link), false);
link.onclick = function() { return false; };
} .bind(this));
},
//
// Add the markup to the page.
//
_addLightWindowMarkup: function(rebuild) {
var overlay = Element.extend(document.createElement('div'));
overlay.setAttribute('id', 'lightwindow_overlay');
// FF Mac has a problem with putting Flash above a layer without a 100% opacity background, so we need to use a pre-made
if (Prototype.Browser.Gecko) {
overlay.setStyle({
backgroundImage: 'url(' + this.options.overlay.presetImage + ')',
backgroundRepeat: 'repeat',
height: this.pageDimensions.height + 'px'
});
} else {
overlay.setStyle({
opacity: this.options.overlay.opacity,
backgroundImage: 'url(' + this.options.overlay.image + ')',
backgroundRepeat: 'repeat',
height: this.pageDimensions.height + 'px'
});
}
var lw = document.createElement('div');
lw.setAttribute('id', 'lightwindow');
lw.innerHTML = this.options.skin.main;
var body = document.getElementsByTagName('body')[0];
body.appendChild(overlay);
body.appendChild(lw);
if ($('lightwindow_title_bar_close_link')) {
Event.observe('lightwindow_title_bar_close_link', 'click', this.deactivate.bindAsEventListener(this));
$('lightwindow_title_bar_close_link').onclick = function() { return false; };
}
Event.observe($('lightwindow_previous'), 'click', this.navigateWindow.bind(this, 'previous'), false);
$('lightwindow_previous').onclick = function() { return false; };
Event.observe($('lightwindow_next'), 'click', this.navigateWindow.bind(this, 'next'), false);
$('lightwindow_next').onclick = function() { return false; };
if (!this.options.hideGalleryTab) {
Event.observe($('lightwindow_galleries_tab'), 'click', this._handleGalleryAnimation.bind(this, true), false);
$('lightwindow_galleries_tab').onclick = function() { return false; };
}
// Because we use position absolute, kill the scroll Wheel on animations
if (Prototype.Browser.IE) {
Event.observe(document, 'mousewheel', this._stopScrolling.bindAsEventListener(this), false);
} else {
Event.observe(window, 'DOMMouseScroll', this._stopScrolling.bindAsEventListener(this), false);
}
Event.observe(overlay, 'click', this.deactivate.bindAsEventListener(this), false);
overlay.onclick = function() { return false; };
},
//
// Add loading window markup
//
_addLoadingWindowMarkup: function() {
$('lightwindow_contents').innerHTML += this.options.skin.loading;
},
//
// Setup the window elements
//
_setupWindowElements: function(link) {
this.element = link;
this.element.title = null ? '' : link.getAttribute('title');
this.element.author = null ? '' : link.getAttribute('author');
this.element.caption = null ? '' : link.getAttribute('caption');
this.element.rel = null ? '' : link.getAttribute('rel');
this.element.params = null ? '' : link.getAttribute('params');
// Set the window type
this.contentToFetch = this.element.href;
this.windowType = this._getParameter('lightwindow_type') ? this._getParameter('lightwindow_type') : this._fileType(this.contentToFetch);
},
//
// Clear the window contents out
//
_clearWindowContents: function(contents) {
// If there is an iframe, its got to go
if ($('lightwindow_iframe')) {
Element.remove($('lightwindow_iframe'));
}
// Stop playing an object if its still around
if ($('lightwindow_media_primary')) {
try {
$('lightwindow_media_primary').Stop();
} catch (e) { }
Element.remove($('lightwindow_media_primary'));
}
// Stop playing an object if its still around
if ($('lightwindow_media_secondary')) {
try {
$('lightwindow_media_secondary').Stop();
} catch (e) { }
Element.remove($('lightwindow_media_secondary'));
}
this.activeGallery = false;
this._handleNavigation(this.activeGallery);
if (contents) {
// Empty the contents
$('lightwindow_contents').innerHTML = '';
// Reset the scroll bars
$('lightwindow_contents').setStyle({
//overflow: 'hidden'
});
if (!this.windowActive) {
$('lightwindow_data_slide_inner').setStyle({
display: 'none'
});
$('lightwindow_title_bar_title').innerHTML = '';
}
// Because of browser differences and to maintain flexible captions we need to reset this height at close
$('lightwindow_data_slide').setStyle({
height: 'auto'
});
}
this.resizeTo.height = null;
this.resizeTo.width = null;
},
//
// Set the status of our animation to keep things from getting clunky
//
_setStatus: function(status) {
this.animating = status;
if (status) {
Element.show('lightwindow_loading');
}
if (!(/MSIE 6./i.test(navigator.userAgent))) {
this._fixedWindow(status);
}
},
//
// Make this window Fixed
//
_fixedWindow: function(status) {
if (status) {
if (this.windowActive) {
this._getScroll();
$('lightwindow').setStyle({
position: 'absolute',
top: parseFloat($('lightwindow').getStyle('top')) + this.pagePosition.y + 'px',
left: parseFloat($('lightwindow').getStyle('left')) + this.pagePosition.x + 'px'
});
} else {
$('lightwindow').setStyle({
position: 'absolute'
});
}
} else {
if (this.windowActive) {
this._getScroll();
$('lightwindow').setStyle({
position: 'fixed',
top: parseFloat($('lightwindow').getStyle('top')) - this.pagePosition.y + 'px',
left: parseFloat($('lightwindow').getStyle('left')) - this.pagePosition.x + 'px'
});
} else {
if ($('lightwindow_iframe')) {
// Ideally here we would set a 50% value for top and left, but Safari rears it ugly head again and we need to do it by pixels
this._browserDimensions();
}
$('lightwindow').setStyle({
position: 'fixed',
top: (parseFloat(this._getParameter('lightwindow_top')) ? parseFloat(this._getParameter('lightwindow_top')) + 'px' : this.dimensions.viewport.height / 2 + 'px'),
left: (parseFloat(this._getParameter('lightwindow_left')) ? parseFloat(this._getParameter('lightwindow_left')) + 'px' : this.dimensions.viewport.width / 2 + 'px')
});
}
}
},
//
// Prepare the window for IE.
//
_prepareIE: function(setup) {
if (Prototype.Browser.IE) {
var height, overflowX, overflowY;
if (setup) {
var height = '100%';
} else {
var height = 'auto';
}
var body = document.getElementsByTagName('body')[0];
var html = document.getElementsByTagName('html')[0];
html.style.height = body.style.height = height;
}
},
_stopScrolling: function(e) {
if (this.animating) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
}
},
//
// Get the scroll for the page.
//
_getScroll: function() {
if (typeof (window.pageYOffset) == 'number') {
this.pagePosition.x = window.pageXOffset;
this.pagePosition.y = window.pageYOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
this.pagePosition.x = document.body.scrollLeft;
this.pagePosition.y = document.body.scrollTop;
} else if (document.documentElement) {
this.pagePosition.x = document.documentElement.scrollLeft;
this.pagePosition.y = document.documentElement.scrollTop;
}
},
//
// Reset the scroll.
//
_setScroll: function(x, y) {
document.documentElement.scrollLeft = x;
document.documentElement.scrollTop = y;
},
//
// Hide Selects from the page because of IE.
// We could use iframe shims instead here but why add all the extra markup for one browser when this is much easier and cleaner
//
_toggleTroubleElements: function(visibility, content) {
if (content) {
var selects = $('lightwindow_contents').getElementsByTagName('select');
} else {
var selects = document.getElementsByTagName('select');
}
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
if (!content) {
if (this.options.hideFlash) {
var objects = document.getElementsByTagName('object');
for (i = 0; i != objects.length; i++) {
objects[i].style.visibility = visibility;
}
var embeds = document.getElementsByTagName('embed');
for (i = 0; i != embeds.length; i++) {
embeds[i].style.visibility = visibility;
}
}
var iframes = document.getElementsByTagName('iframe');
for (i = 0; i != iframes.length; i++) {
iframes[i].style.visibility = visibility;
}
}
},
//
// Get the actual page size
//
_getPageDimensions: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) {
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
if (yScroll < windowHeight) {
this.pageDimensions.height = windowHeight;
} else {
this.pageDimensions.height = yScroll;
}
if (xScroll < windowWidth) {
this.pageDimensions.width = windowWidth;
} else {
this.pageDimensions.width = xScroll;
}
},
//
// Display the lightWindow.
//
_displayLightWindow: function(display, visibility) {
$('lightwindow_overlay').style.display = $('lightwindow').style.display = $('lightwindow_container').style.display = display;
$('lightwindow_overlay').style.visibility = $('lightwindow').style.visibility = $('lightwindow_container').style.visibility = visibility;
},
//
// Setup Dimensions of lightwindow.
//
_setupDimensions: function() {
var originalHeight, originalWidth;
switch (this.windowType) {
case 'page':
originalHeight = this.options.dimensions.page.height;
originalWidth = this.options.dimensions.page.width;
break;
case 'image':
originalHeight = this.options.dimensions.image.height;
originalWidth = this.options.dimensions.image.width;
break;
case 'media':
originalHeight = this.options.dimensions.media.height;
originalWidth = this.options.dimensions.media.width;
break;
case 'external':
originalHeight = this.options.dimensions.external.height;
originalWidth = this.options.dimensions.external.width;
break;
case 'inline':
originalHeight = this.options.dimensions.inline.height;
originalWidth = this.options.dimensions.inline.width;
break;
default:
originalHeight = this.options.dimensions.page.height;
originalWidth = this.options.dimensions.page.width;
break;
}
var offsetHeight = this._getParameter('lightwindow_top') ? parseFloat(this._getParameter('lightwindow_top')) + this.pagePosition.y : this.dimensions.viewport.height / 2 + this.pagePosition.y;
var offsetWidth = this._getParameter('lightwindow_left') ? parseFloat(this._getParameter('lightwindow_left')) + this.pagePosition.x : this.dimensions.viewport.width / 2 + this.pagePosition.x;
// So if a theme has say shadowed edges, they should be consistant and take care of in the contentOffset
$('lightwindow').setStyle({
top: offsetHeight + 'px',
left: offsetWidth + 'px'
});
$('lightwindow_container').setStyle({
height: originalHeight + 'px',
width: originalWidth + 'px',
left: -(originalWidth / 2) + 'px',
top: -(originalHeight / 2) + 'px'
});
$('lightwindow_contents').setStyle({
height: originalHeight + 'px',
width: originalWidth + 'px'
});
},
//
// Get the type of file.
//
_fileType: function(url) {
var image = new RegExp("[^\.]\.(" + this.options.fileTypes.image.join('|') + ")\s*$", "i");
if (image.test(url)) return 'image';
if (url.indexOf('#') > -1 && (document.domain == this._getDomain(url))) return 'inline';
if (url.indexOf('?') > -1) url = url.substring(0, url.indexOf('?'));
var type = 'unknown';
var page = new RegExp("[^\.]\.(" + this.options.fileTypes.page.join('|') + ")\s*$", "i");
var media = new RegExp("[^\.]\.(" + this.options.fileTypes.media.join('|') + ")\s*$", "i");
if (document.domain != this._getDomain(url)) type = 'external';
if (media.test(url)) type = 'media';
if (type == 'external' || type == 'media') return type;
if (page.test(url) || url.substr((url.length - 1), url.length) == '/') type = 'page';
return type;
},
//
// Get file Extension
//
_fileExtension: function(url) {
if (url.indexOf('?') > -1) {
url = url.substring(0, url.indexOf('?'));
}
var extenstion = '';
for (var x = (url.length - 1); x > -1; x--) {
if (url.charAt(x) == '.') {
return extenstion;
}
extenstion = url.charAt(x) + extenstion;
}
},
//
// Monitor the keyboard while this lightwindow is up
//
_monitorKeyboard: function(status) {
if (status) document.onkeydown = this._eventKeypress.bind(this);
else document.onkeydown = '';
},
//
// Perform keyboard actions
//
_eventKeypress: function(e) {
if (e == null) {
var keycode = event.keyCode;
} else {
var keycode = e.which;
}
switch (keycode) {
case 27:
this.deactivate();
break;
case 13:
return;
default:
break;
}
// Gotta stop those quick fingers
if (this.animating) {
return false;
}
switch (String.fromCharCode(keycode).toLowerCase()) {
case 'p':
if (this.navigationObservers.previous) {
this.navigateWindow('previous');
}
break;
case 'n':
if (this.navigationObservers.next) {
this.navigateWindow('next');
}
break;
default:
break;
}
},
//
// Get Gallery Information
//
_getGalleryInfo: function(rel) {
if (!rel) return false;
if (rel.indexOf('[') > -1) {
return new Array(escape(rel.substring(0, rel.indexOf('['))), escape(rel.substring(rel.indexOf('[') + 1, rel.indexOf(']'))));
} else {
return false;
}
},
//
// Get the domain from a string.
//
_getDomain: function(url) {
var leadSlashes = url.indexOf('//');
var domainStart = leadSlashes + 2;
var withoutResource = url.substring(domainStart, url.length);
var nextSlash = withoutResource.indexOf('/');
var domain = withoutResource.substring(0, nextSlash);
if (domain.indexOf(':') > -1) {
var portColon = domain.indexOf(':');
domain = domain.substring(0, portColon);
}
return domain;
},
//
// Get the value from the params attribute string.
//
_getParameter: function(parameter, parameters) {
if (!this.element) return false;
if (parameter == 'lightwindow_top' && this.element.top) {
return unescape(this.element.top);
} else if (parameter == 'lightwindow_left' && this.element.left) {
return unescape(this.element.left);
} else if (parameter == 'lightwindow_type' && this.element.type) {
return unescape(this.element.type);
} else if (parameter == 'lightwindow_show_images' && this.element.showImages) {
return unescape(this.element.showImages);
} else if (parameter == 'lightwindow_height' && this.element.height) {
return unescape(this.element.height);
} else if (parameter == 'lightwindow_width' && this.element.width) {
return unescape(this.element.width);
} else if (parameter == 'lightwindow_loading_animation' && this.element.loadingAnimation) {
return unescape(this.element.loadingAnimation);
} else if (parameter == 'lightwindow_iframe_embed' && this.element.iframeEmbed) {
return unescape(this.element.iframeEmbed);
} else if (parameter == 'lightwindow_form' && this.element.form) {
return unescape(this.element.form);
} else {
if (!parameters) {
if (this.element.params) parameters = this.element.params;
else return;
}
var value;
var parameterArray = parameters.split(',');
var compareString = parameter + '=';
var compareLength = compareString.length;
for (var i = 0; i < parameterArray.length; i++) {
if (parameterArray[i].substr(0, compareLength) == compareString) {
var currentParameter = parameterArray[i].split('=');
value = currentParameter[1];
break;
}
}
if (!value) return false;
else return unescape(value);
}
},
//
// Get the Browser Viewport Dimensions
//
_browserDimensions: function() {
if (Prototype.Browser.IE) {
this.dimensions.viewport.height = document.documentElement.clientHeight;
this.dimensions.viewport.width = document.documentElement.clientWidth;
} else {
this.dimensions.viewport.height = window.innerHeight;
this.dimensions.viewport.width = document.width || document.body.offsetWidth;
}
},
//
// Get the scrollbar offset, I don't like this method but there is really no other way I can find.
//
_getScrollerWidth: function() {
var scrollDiv = Element.extend(document.createElement('div'));
scrollDiv.setAttribute('id', 'lightwindow_scroll_div');
scrollDiv.setStyle({
position: 'absolute',
top: '-10000px',
left: '-10000px',
width: '100px',
height: '100px',
overflow: 'hidden'
});
var contentDiv = Element.extend(document.createElement('div'));
contentDiv.setAttribute('id', 'lightwindow_content_scroll_div');
contentDiv.setStyle({
width: '100%',
height: '200px'
});
scrollDiv.appendChild(contentDiv);
var body = document.getElementsByTagName('body')[0];
body.appendChild(scrollDiv);
var noScroll = $('lightwindow_content_scroll_div').offsetWidth;
scrollDiv.style.overflow = 'auto';
var withScroll = $('lightwindow_content_scroll_div').offsetWidth;
Element.remove($('lightwindow_scroll_div'));
this.scrollbarOffset = noScroll - withScroll;
},
//
// Add a param to an object dynamically created
//
_addParamToObject: function(name, value, object, id) {
var param = document.createElement('param');
param.setAttribute('value', value);
param.setAttribute('name', name);
if (id) {
param.setAttribute('id', id);
}
object.appendChild(param);
return object;
},
//
// Get the outer HTML of an object CROSS BROWSER
//
_outerHTML: function(object) {
if (Prototype.Browser.IE) {
return object.outerHTML;
} else {
var clone = object.cloneNode(true);
var cloneDiv = document.createElement('div');
cloneDiv.appendChild(clone);
return cloneDiv.innerHTML;
}
},
//
// Convert an object to markup
//
_convertToMarkup: function(object, closeTag) {
var markup = this._outerHTML(object).replace('</' + closeTag + '>', '');
if (Prototype.Browser.IE) {
for (var i = 0; i < object.childNodes.length; i++) {
markup += this._outerHTML(object.childNodes[i]);
}
markup += '</' + closeTag + '>';
}
return markup;
},
//
// Depending what type of browser it is we have to append the object differently... DAMN YOU IE!!
//
_appendObject: function(object, closeTag, appendTo) {
if (Prototype.Browser.IE) {
appendTo.innerHTML += this._convertToMarkup(object, closeTag);
// Fix the Eolas activate thing but only for specified media, for example doing this to a quicktime film breaks it.
if (this.options.EOLASFix.indexOf(this._fileType(this.element.href)) > -1) {
var objectElements = document.getElementsByTagName('object');
for (var i = 0; i < objectElements.length; i++) {
if (objectElements[i].getAttribute("data")) objectElements[i].removeAttribute('data');
objectElements[i].outerHTML = objectElements[i].outerHTML;
objectElements[i].style.visibility = "visible";
}
}
} else {
appendTo.appendChild(object);
}
},
//
// Add in iframe
//
_appendIframe: function(scroll) {
var iframe = document.createElement('iframe');
iframe.setAttribute('id', 'lightwindow_iframe');
iframe.setAttribute('name', 'lightwindow_iframe');
iframe.setAttribute('src', 'about:blank');
iframe.setAttribute('height', '100%');
iframe.setAttribute('width', '100%');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('marginwidth', '0');
iframe.setAttribute('marginheight', '0');
iframe.setAttribute('scrolling', scroll);
this._appendObject(iframe, 'iframe', $('lightwindow_contents'));
},
//
// Write Content to the iframe using the skin
//
_writeToIframe: function(content) {
var template = this.options.skin.iframe;
template = template.replace('{body_replace}', content);
if ($('lightwindow_iframe').contentWindow) {
$('lightwindow_iframe').contentWindow.document.open();
$('lightwindow_iframe').contentWindow.document.write(template);
$('lightwindow_iframe').contentWindow.document.close();
} else {
$('lightwindow_iframe').contentDocument.open();
$('lightwindow_iframe').contentDocument.write(template);
$('lightwindow_iframe').contentDocument.close();
}
},
//
// Load the window Information
//
_loadWindow: function() {
switch (this.windowType) {
case 'image':
var current = 0;
var images = [];
this.checkImage = [];
this.resizeTo.height = this.resizeTo.width = 0;
this.imageCount = this._getParameter('lightwindow_show_images') ? parseInt(this._getParameter('lightwindow_show_images')) : 1;
// If there is a gallery get it
if (gallery = this._getGalleryInfo(this.element.rel)) {
for (current = 0; current < this.galleries[gallery[0]][gallery[1]].length; current++) {
if (this.contentToFetch.indexOf(this.galleries[gallery[0]][gallery[1]][current].href) > -1) {
break;
}
}
if (this.galleries[gallery[0]][gallery[1]][current - this.imageCount]) {
this.navigationObservers.previous = this.galleries[gallery[0]][gallery[1]][current - this.imageCount];
} else {
this.navigationObservers.previous = false;
}
if (this.galleries[gallery[0]][gallery[1]][current + this.imageCount]) {
this.navigationObservers.next = this.galleries[gallery[0]][gallery[1]][current + this.imageCount];
} else {
this.navigationObservers.next = false;
}
this.activeGallery = true;
} else {
this.navigationObservers.previous = false;
this.navigationObservers.next = false;
this.activeGallery = false;
}
for (var i = current; i < (current + this.imageCount); i++) {
if (gallery && this.galleries[gallery[0]][gallery[1]][i]) {
this.contentToFetch = this.galleries[gallery[0]][gallery[1]][i].href;
this.galleryLocation = { current: (i + 1) / this.imageCount, total: (this.galleries[gallery[0]][gallery[1]].length) / this.imageCount };
if (!this.galleries[gallery[0]][gallery[1]][i + this.imageCount]) {
$('lightwindow_next').setStyle({
display: 'none'
});
} else {
$('lightwindow_next').setStyle({
display: 'block'
});
$('lightwindow_next_title').innerHTML = this.galleries[gallery[0]][gallery[1]][i + this.imageCount].title;
}
if (!this.galleries[gallery[0]][gallery[1]][i - this.imageCount]) {
$('lightwindow_previous').setStyle({
display: 'none'
});
} else {
$('lightwindow_previous').setStyle({
display: 'block'
});
$('lightwindow_previous_title').innerHTML = this.galleries[gallery[0]][gallery[1]][i - this.imageCount].title;
}
}
images[i] = document.createElement('img');
images[i].setAttribute('id', 'lightwindow_image_' + i);
images[i].setAttribute('border', '0');
images[i].setAttribute('src', this.contentToFetch);
$('lightwindow_contents').appendChild(images[i]);
// We have to do this instead of .onload
var ie = (document.all) ? 1 : 0;
this.checkImage[i] = new PeriodicalExecuter(function(i) {
if (ie) { //THE BROWSER IS IE
if ($('lightwindow_image_' + i).complete && !(typeof $('lightwindow_image_' + i).naturalWidth != "undefined" && $('lightwindow_image_' + i).naturalWidth == 0)) {
this.checkImage[i].stop();
var imageHeight = $('lightwindow_image_' + i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $('lightwindow_image_' + i).getWidth();
this.imageCount--;
$('lightwindow_image_' + i).setStyle({
height: '100%', width: '100%'
});
if (this.imageCount == 0) {
this._processWindow();
}
//alert('IE has been detected')
}
}
else {//NOT IE, PROBABLY FF, OPERA, OTHER
//this line works for all other browsers
if ($('lightwindow_image_' + i).complete && !(typeof $('lightwindow_image_' + i).naturalWidth != "undefined" && $('lightwindow_image_' + i).naturalWidth == 0)) {
this.checkImage[i].stop();
var imageHeight = $('lightwindow_image_' + i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $('lightwindow_image_' + i).getWidth();
this.imageCount--;
$('lightwindow_image_' + i).setStyle({
height: '100%', width: '100%'
});
if (this.imageCount == 0) {
this._processWindow();
}
}
}
} .bind(this, i), 1);
}
break;
case 'media':
var current = 0;
this.resizeTo.height = this.resizeTo.width = 0;
// If there is a gallery get it
if (gallery = this._getGalleryInfo(this.element.rel)) {
for (current = 0; current < this.galleries[gallery[0]][gallery[1]].length; current++) {
if (this.contentToFetch.indexOf(this.galleries[gallery[0]][gallery[1]][current].href) > -1) {
break;
}
}
if (this.galleries[gallery[0]][gallery[1]][current - 1]) {
this.navigationObservers.previous = this.galleries[gallery[0]][gallery[1]][current - 1];
} else {
this.navigationObservers.previous = false;
}
if (this.galleries[gallery[0]][gallery[1]][current + 1]) {
this.navigationObservers.next = this.galleries[gallery[0]][gallery[1]][current + 1];
} else {
this.navigationObservers.next = false;
}
this.activeGallery = true;
} else {
this.navigationObservers.previous = false;
this.navigationObservers.next = false;
this.activeGallery = false;
}
if (gallery && this.galleries[gallery[0]][gallery[1]][current]) {
this.contentToFetch = this.galleries[gallery[0]][gallery[1]][current].href;
this.galleryLocation = { current: current + 1, total: this.galleries[gallery[0]][gallery[1]].length };
if (!this.galleries[gallery[0]][gallery[1]][current + 1]) {
$('lightwindow_next').setStyle({
display: 'none'
});
} else {
$('lightwindow_next').setStyle({
display: 'block'
});
$('lightwindow_next_title').innerHTML = this.galleries[gallery[0]][gallery[1]][current + 1].title;
}
if (!this.galleries[gallery[0]][gallery[1]][current - 1]) {
$('lightwindow_previous').setStyle({
display: 'none'
});
} else {
$('lightwindow_previous').setStyle({
display: 'block'
});
$('lightwindow_previous_title').innerHTML = this.galleries[gallery[0]][gallery[1]][current - 1].title;
}
}
if (this._getParameter('lightwindow_iframe_embed')) {
this.resizeTo.height = this.dimensions.viewport.height;
this.resizeTo.width = this.dimensions.viewport.width;
} else {
this.resizeTo.height = this._getParameter('lightwindow_height');
this.resizeTo.width = this._getParameter('lightwindow_width');
}
this._processWindow();
break;
case 'external':
this._appendIframe('auto');
this.resizeTo.height = this.dimensions.viewport.height;
this.resizeTo.width = this.dimensions.viewport.width;
this._processWindow();
break;
case 'page':
var newAJAX = new Ajax.Request(
this.contentToFetch, {
method: 'get',
parameters: '',
onComplete: function(response) {
$('lightwindow_contents').innerHTML += response.responseText;
this.resizeTo.height = $('lightwindow_contents').scrollHeight + (this.options.contentOffset.height);
this.resizeTo.width = $('lightwindow_contents').scrollWidth + (this.options.contentOffset.width);
this._processWindow();
} .bind(this)
}
);
break;
case 'inline':
var content = this.contentToFetch;
if (content.indexOf('?') > -1) {
content = content.substring(0, content.indexOf('?'));
}
content = content.substring(content.indexOf('#') + 1);
new Insertion.Top($('lightwindow_contents'), $(content).innerHTML);
this.resizeTo.height = $('lightwindow_contents').scrollHeight + (this.options.contentOffset.height);
this.resizeTo.width = $('lightwindow_contents').scrollWidth + (this.options.contentOffset.width);
this._toggleTroubleElements('hidden', true);
this._processWindow();
break;
default:
throw ("Page Type could not be determined, please amend this lightwindow URL " + this.contentToFetch);
break;
}
},
//
// Resize the Window to fit the viewport if necessary
//
_resizeWindowToFit: function() {
if (this.resizeTo.height + this.dimensions.cruft.height > this.dimensions.viewport.height) {
var heightRatio = this.resizeTo.height / this.resizeTo.width;
this.resizeTo.height = this.dimensions.viewport.height - this.dimensions.cruft.height - (2 * this.options.viewportPadding);
// We only care about ratio's with this window type
if (this.windowType == 'image' || (this.windowType == 'media' && !this._getParameter('lightwindow_iframe_embed'))) {
this.resizeTo.width = this.resizeTo.height / heightRatio;
$('lightwindow_data_slide_inner').setStyle({
width: this.resizeTo.width + 'px'
});
}
}
if (this.resizeTo.width + this.dimensions.cruft.width > this.dimensions.viewport.width) {
var widthRatio = this.resizeTo.width / this.resizeTo.height;
this.resizeTo.width = this.dimensions.viewport.width - 2 * this.dimensions.cruft.width - (2 * this.options.viewportPadding);
// We only care about ratio's with this window type
if (this.windowType == 'image' || (this.windowType == 'media' && !this._getParameter('lightwindow_iframe_embed'))) {
this.resizeTo.height = this.resizeTo.width / widthRatio;
$('lightwindow_data_slide_inner').setStyle({
height: this.resizeTo.height + 'px'
});
}
}
},
//
// Set the Window to a preset size
//
_presetWindowSize: function() {
if (this._getParameter('lightwindow_height')) {
this.resizeTo.height = parseFloat(this._getParameter('lightwindow_height'));
}
if (this._getParameter('lightwindow_width')) {
this.resizeTo.width = parseFloat(this._getParameter('lightwindow_width'));
}
},
//
// Process the Window
//
_processWindow: function() {
// Clean out our effects
this.dimensions.dataEffects = [];
// Set up the data-slide if we have caption information
if (this.element.caption || this.element.author || (this.activeGallery && this.options.showGalleryCount)) {
if (this.element.caption) {
$('lightwindow_data_caption').innerHTML = this.element.caption;
$('lightwindow_data_caption').setStyle({
display: 'block'
});
} else {
$('lightwindow_data_caption').setStyle({
display: 'none'
});
}
if (this.element.author) {
$('lightwindow_data_author').innerHTML = this.element.author;
$('lightwindow_data_author_container').setStyle({
display: 'block'
});
} else {
$('lightwindow_data_author_container').setStyle({
display: 'none'
});
}
if (this.activeGallery && this.options.showGalleryCount) {
$('lightwindow_data_gallery_current').innerHTML = this.galleryLocation.current;
$('lightwindow_data_gallery_total').innerHTML = this.galleryLocation.total;
$('lightwindow_data_gallery_container').setStyle({
display: 'block'
});
} else {
$('lightwindow_data_gallery_container').setStyle({
display: 'none'
});
}
$('lightwindow_data_slide_inner').setStyle({
width: this.resizeTo.width + 'px',
height: 'auto',
visibility: 'visible',
display: 'block'
});
$('lightwindow_data_slide').setStyle({
height: $('lightwindow_data_slide').getHeight() + 'px',
width: '1px',
overflow: 'hidden',
display: 'block'
});
} else {
$('lightwindow_data_slide').setStyle({
display: 'none',
width: 'auto'
});
$('lightwindow_data_slide_inner').setStyle({
display: 'none',
visibility: 'hidden',
width: this.resizeTo.width + 'px',
height: '0px'
});
}
if (this.element.title != 'null') {
$('lightwindow_title_bar_title').innerHTML = this.element.title;
} else {
$('lightwindow_title_bar_title').innerHTML = '';
}
var originalContainerDimensions = { height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth() };
// Position the window
$('lightwindow_container').setStyle({
height: 'auto',
// We need to set the width to a px not auto as opera has problems with it
width: $('lightwindow_container').getWidth() + this.options.contentOffset.width - (this.windowActive ? this.options.contentOffset.width : 0) + 'px'
});
var newContainerDimensions = { height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth() };
// We need to record the container dimension changes
this.containerChange = { height: originalContainerDimensions.height - newContainerDimensions.height, width: originalContainerDimensions.width - newContainerDimensions.width };
// Get out general dimensions
this.dimensions.container = { height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth() };
this.dimensions.cruft = { height: this.dimensions.container.height - $('lightwindow_contents').getHeight() + this.options.contentOffset.height, width: this.dimensions.container.width - $('lightwindow_contents').getWidth() + this.options.contentOffset.width };
// Set Sizes if we need too
this._presetWindowSize();
this._resizeWindowToFit(); // Even if the window is preset we still don't want it to go outside of the viewport
if (!this.windowActive) {
// Position the window
$('lightwindow_container').setStyle({
left: -(this.dimensions.container.width / 2) + 'px',
top: -(this.dimensions.container.height / 2) + 'px'
});
}
$('lightwindow_container').setStyle({
height: this.dimensions.container.height + 'px',
width: this.dimensions.container.width + 'px'
});
// We are ready, lets show this puppy off!
this._displayLightWindow('block', 'visible');
this._animateLightWindow();
},
//
// Fire off our animation handler
//
_animateLightWindow: function() {
if (this.options.animationHandler) {
this.options.animationHandler().bind(this);
} else {
this._defaultAnimationHandler();
}
},
//
// Fire off our transition handler
//
_handleNavigation: function(display) {
if (this.options.navigationHandler) {
this.options.navigationHandler().bind(this, display);
} else {
this._defaultDisplayNavigation(display);
}
},
//
// Fire off our transition handler
//
_handleTransition: function() {
if (this.options.transitionHandler) {
this.options.transitionHandler().bind(this);
} else {
this._defaultTransitionHandler();
}
},
//
// Handle the finish of the window animation
//
_handleFinalWindowAnimation: function(delay) {
if (this.options.finalAnimationHandler) {
this.options.finalAnimationHandler().bind(this, delay);
} else {
this._defaultfinalWindowAnimationHandler(delay);
}
},
//
// Handle the gallery Animation
//
_handleGalleryAnimation: function(list) {
if (this.options.galleryAnimationHandler) {
this.options.galleryAnimationHandler().bind(this, list);
} else {
this._defaultGalleryAnimationHandler(list);
}
},
//
// Display the navigation
//
_defaultDisplayNavigation: function(display) {
if (display) {
$('lightwindow_navigation').setStyle({
display: 'block',
height: $('lightwindow_contents').getHeight() + 'px',
width: '100%',
marginTop: this.options.dimensions.titleHeight + 'px'
});
} else {
$('lightwindow_navigation').setStyle({
display: 'none',
height: 'auto',
width: 'auto'
});
}
},
//
// This is the default animation handler for LightWindow
//
_defaultAnimationHandler: function() {
// Now that we have figures out the cruft lets make the caption go away and add its effects
if (this.element.caption || this.element.author || (this.activeGallery && this.options.showGalleryCount)) {
$('lightwindow_data_slide').setStyle({
display: 'none',
width: 'auto'
});
this.dimensions.dataEffects.push(
new Effect.SlideDown('lightwindow_data_slide', { sync: true }),
new Effect.Appear('lightwindow_data_slide', { sync: true, from: 0.0, to: 1.0 })
);
}
// Set up the Title if we have one
$('lightwindow_title_bar_inner').setStyle({
height: '0px',
marginTop: this.options.dimensions.titleHeight + 'px'
});
// We always want the title bar as well
this.dimensions.dataEffects.push(
new Effect.Morph('lightwindow_title_bar_inner', { sync: true, style: { height: this.options.dimensions.titleHeight + 'px', marginTop: '0px'} }),
new Effect.Appear('lightwindow_title_bar_inner', { sync: true, from: 0.0, to: 1.0 })
);
if (!this.options.hideGalleryTab) {
this._handleGalleryAnimation(false);
if ($('lightwindow_galleries_tab_container').getHeight() == 0) {
this.dimensions.dataEffects.push(
new Effect.Morph('lightwindow_galleries_tab_container', { sync: true, style: { height: '20px', marginTop: '0px'} })
);
$('lightwindow_galleries').setStyle({
width: '0px'
});
}
}
var resized = false;
var ratio = this.dimensions.container.width - $('lightwindow_contents').getWidth() + this.resizeTo.width + this.options.contentOffset.width;
if (ratio != $('lightwindow_container').getWidth()) {
new Effect.Parallel([
new Effect.Scale('lightwindow_contents', 100 * (this.resizeTo.width / $('lightwindow_contents').getWidth()), { scaleFrom: 100 * ($('lightwindow_contents').getWidth() / ($('lightwindow_contents').getWidth() + (this.options.contentOffset.width))), sync: true, scaleY: false, scaleContent: false }),
new Effect.Scale('lightwindow_container', 100 * (ratio / (this.dimensions.container.width)), { sync: true, scaleY: false, scaleFromCenter: true, scaleContent: false })
], {
duration: this.duration,
delay: 0.25,
queue: { position: 'end', scope: 'lightwindowAnimation' }
}
);
}
ratio = this.dimensions.container.height - $('lightwindow_contents').getHeight() + this.resizeTo.height + this.options.contentOffset.height;
if (ratio != $('lightwindow_container').getHeight()) {
new Effect.Parallel([
new Effect.Scale('lightwindow_contents', 100 * (this.resizeTo.height / $('lightwindow_contents').getHeight()), { scaleFrom: 100 * ($('lightwindow_contents').getHeight() / ($('lightwindow_contents').getHeight() + (this.options.contentOffset.height))), sync: true, scaleX: false, scaleContent: false }),
new Effect.Scale('lightwindow_container', 100 * (ratio / (this.dimensions.container.height)), { sync: true, scaleX: false, scaleFromCenter: true, scaleContent: false })
], {
duration: this.duration,
afterFinish: function() {
if (this.dimensions.dataEffects.length > 0) {
if (!this.options.hideGalleryTab) {
$('lightwindow_galleries').setStyle({
width: this.resizeTo.width + 'px'
});
}
new Effect.Parallel(this.dimensions.dataEffects, {
duration: this.duration,
afterFinish: function() {
this._finishWindow();
} .bind(this),
queue: { position: 'end', scope: 'lightwindowAnimation' }
}
);
}
} .bind(this),
queue: { position: 'end', scope: 'lightwindowAnimation' }
}
);
resized = true;
}
// We need to do our data effect since there was no resizing
if (!resized && this.dimensions.dataEffects.length > 0) {
new Effect.Parallel(this.dimensions.dataEffects, {
duration: this.duration,
beforeStart: function() {
if (!this.options.hideGalleryTab) {
$('lightwindow_galleries').setStyle({
width: this.resizeTo.width + 'px'
});
}
if (this.containerChange.height != 0 || this.containerChange.width != 0) {
new Effect.MoveBy('lightwindow_container', this.containerChange.height, this.containerChange.width, { transition: Effect.Transitions.sinoidal });
}
} .bind(this),
afterFinish: function() {
this._finishWindow();
} .bind(this),
queue: { position: 'end', scope: 'lightwindowAnimation' }
}
);
}
},
//
// Finish up Window Animation
//
_defaultfinalWindowAnimationHandler: function(delay) {
if (this.windowType == 'media' || this._getParameter('lightwindow_loading_animation')) {
// Because of major flickering with the overlay we just hide it in this case
Element.hide('lightwindow_loading');
this._handleNavigation(this.activeGallery);
this._setStatus(false);
} else {
Effect.Fade('lightwindow_loading', {
duration: 0.75,
delay: 1.0,
afterFinish: function() {
// Just in case we need some scroll goodness (this also avoids the swiss cheese effect)
if (this.windowType != 'image' && this.windowType != 'media' && this.windowType != 'external') {
$('lightwindow_contents').setStyle({
overflow: 'auto'
});
}
this._handleNavigation(this.activeGallery);
this._defaultGalleryAnimationHandler();
this._setStatus(false);
} .bind(this),
queue: { position: 'end', scope: 'lightwindowAnimation' }
});
}
},
//
// Handle the gallery Animation
//
_defaultGalleryAnimationHandler: function(list) {
if (this.activeGallery) {
$('lightwindow_galleries').setStyle({
display: 'block',
marginBottom: $('lightwindow_data_slide').getHeight() + this.options.contentOffset.height / 2 + 'px'
});
$('lightwindow_navigation').setStyle({
height: $('lightwindow_contents').getHeight() - 20 + 'px'
});
} else {
$('lightwindow_galleries').setStyle({
display: 'none'
});
$('lightwindow_galleries_tab_container').setStyle({
height: '0px',
marginTop: '20px'
});
$('lightwindow_galleries_list').setStyle({
height: '0px'
});
return false;
}
if (list) {
if ($('lightwindow_galleries_list').getHeight() == 0) {
var height = $('lightwindow_contents').getHeight() * 0.80;
$('lightwindow_galleries_tab_span').className = 'down';
} else {
var height = 0;
$('lightwindow_galleries_tab_span').className = 'up';
}
new Effect.Morph('lightwindow_galleries_list', {
duration: this.duration,
transition: Effect.Transitions.sinoidal,
style: { height: height + 'px' },
beforeStart: function() {
$('lightwindow_galleries_list').setStyle({
overflow: 'hidden'
});
},
afterFinish: function() {
$('lightwindow_galleries_list').setStyle({
overflow: 'auto'
});
},
queue: { position: 'end', scope: 'lightwindowAnimation' }
});
}
},
//
// Default Transition Handler
//
_defaultTransitionHandler: function() {
// Clean out our effects
this.dimensions.dataEffects = [];
// Now that we have figures out the cruft lets make the caption go away and add its effects
if ($('lightwindow_data_slide').getStyle('display') != 'none') {
this.dimensions.dataEffects.push(
new Effect.SlideUp('lightwindow_data_slide', { sync: true }),
new Effect.Fade('lightwindow_data_slide', { sync: true, from: 1.0, to: 0.0 })
);
}
if (!this.options.hideGalleryTab) {
if ($('lightwindow_galleries').getHeight() != 0 && !this.options.hideGalleryTab) {
this.dimensions.dataEffects.push(
new Effect.Morph('lightwindow_galleries_tab_container', { sync: true, style: { height: '0px', marginTop: '20px'} })
);
}
if ($('lightwindow_galleries_list').getHeight() != 0) {
$('lightwindow_galleries_tab_span').className = 'up';
this.dimensions.dataEffects.push(
new Effect.Morph('lightwindow_galleries_list', {
sync: true,
style: { height: '0px' },
transition: Effect.Transitions.sinoidal,
beforeStart: function() {
$('lightwindow_galleries_list').setStyle({
overflow: 'hidden'
});
},
afterFinish: function() {
$('lightwindow_galleries_list').setStyle({
overflow: 'auto'
});
}
})
);
}
}
// We always want the title bar as well
this.dimensions.dataEffects.push(
new Effect.Morph('lightwindow_title_bar_inner', { sync: true, style: { height: '0px', marginTop: this.options.dimensions.titleHeight + 'px'} }),
new Effect.Fade('lightwindow_title_bar_inner', { sync: true, from: 1.0, to: 0.0 })
);
new Effect.Parallel(this.dimensions.dataEffects, {
duration: this.duration,
afterFinish: function() {
this._loadWindow();
} .bind(this),
queue: { position: 'end', scope: 'lightwindowAnimation' }
}
);
},
//
// Default Form handler for LightWindow
//
_defaultFormHandler: function(e) {
var element = Event.element(e).parentNode;
var parameterString = Form.serialize(this._getParameter('lightwindow_form', element.getAttribute('params')));
if (this.options.formMethod == 'post') {
var newAJAX = new Ajax.Request(element.href, {
method: 'post',
postBody: parameterString,
onComplete: this.openWindow.bind(this, element)
});
} else if (this.options.formMethod == 'get') {
var newAJAX = new Ajax.Request(element.href, {
method: 'get',
parameters: parameterString,
onComplete: this.openWindow.bind(this, element)
});
}
},
//
// Wrap everything up
//
_finishWindow: function() {
if (this.windowType == 'external') {
// We set the externals source here because it allows for a much smoother animation
$('lightwindow_iframe').setAttribute('src', this.element.href);
this._handleFinalWindowAnimation(1);
} else if (this.windowType == 'media') {
var outerObject = document.createElement('object');
outerObject.setAttribute('classid', this.options.classids[this._fileExtension(this.contentToFetch)]);
outerObject.setAttribute('codebase', this.options.codebases[this._fileExtension(this.contentToFetch)]);
outerObject.setAttribute('id', 'lightwindow_media_primary');
outerObject.setAttribute('name', 'lightwindow_media_primary');
outerObject.setAttribute('width', this.resizeTo.width);
outerObject.setAttribute('height', this.resizeTo.height);
outerObject = this._addParamToObject('movie', this.contentToFetch, outerObject);
outerObject = this._addParamToObject('src', this.contentToFetch, outerObject);
outerObject = this._addParamToObject('controller', 'true', outerObject);
outerObject = this._addParamToObject('wmode', 'transparent', outerObject);
outerObject = this._addParamToObject('cache', 'false', outerObject);
outerObject = this._addParamToObject('quality', 'high', outerObject);
if (!Prototype.Browser.IE) {
var innerObject = document.createElement('object');
innerObject.setAttribute('type', this.options.mimeTypes[this._fileExtension(this.contentToFetch)]);
innerObject.setAttribute('data', this.contentToFetch);
innerObject.setAttribute('id', 'lightwindow_media_secondary');
innerObject.setAttribute('name', 'lightwindow_media_secondary');
innerObject.setAttribute('width', this.resizeTo.width);
innerObject.setAttribute('height', this.resizeTo.height);
innerObject = this._addParamToObject('controller', 'true', innerObject);
innerObject = this._addParamToObject('wmode', 'transparent', innerObject);
innerObject = this._addParamToObject('cache', 'false', innerObject);
innerObject = this._addParamToObject('quality', 'high', innerObject);
outerObject.appendChild(innerObject);
}
if (this._getParameter('lightwindow_iframe_embed')) {
this._appendIframe('no');
this._writeToIframe(this._convertToMarkup(outerObject, 'object'));
} else {
this._appendObject(outerObject, 'object', $('lightwindow_contents'));
}
this._handleFinalWindowAnimation(0);
} else {
this._handleFinalWindowAnimation(0);
}
// Initialize any actions
this._setupActions();
}
}
/*-----------------------------------------------------------------------------------------------*/
Event.observe(window, 'load', lightwindowInit, false);
//
// Set up all of our links
//
var myLightWindow = null;
function lightwindowInit() {
myLightWindow = new lightwindow();
}保存文件为：lightwindow.js 替换原有js即可
扫一扫
3853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
