1
0
mirror of https://github.com/e107inc/e107.git synced 2025-08-04 05:37:32 +02:00

Image path fixes. thanks Vesko.

This commit is contained in:
CaMer0n
2012-07-18 04:43:34 +00:00
parent 79224fe54d
commit e8f701dc47
2 changed files with 360 additions and 351 deletions

View File

@@ -13,6 +13,14 @@ e107::css('gallery', 'jslib/lightbox/css/lightbox.css','jquery');
e107::js('gallery', 'jslib/jquery.cycle.all.js','jquery'); e107::js('gallery', 'jslib/jquery.cycle.all.js','jquery');
e107::css('gallery', 'gallery_style.css'); e107::css('gallery', 'gallery_style.css');
e107::css('inline', "
/* Gallery CSS */
a.lb-close { width:27px; height:27px; background:url(".SITEURLBASE.e_PLUGIN_ABS."gallery/images/close.png) no-repeat 0 0; }
.lb-loader { background:url(".SITEURLBASE.e_PLUGIN_ABS."gallery/images/loading.gif) no-repeat 50% 49%; }
",'jquery');
$gp = e107::getPlugPref('gallery'); $gp = e107::getPlugPref('gallery');
e107::js('inline'," e107::js('inline',"

View File

@@ -1,351 +1,352 @@
/* /*
Lightbox v2.51 Lightbox v2.51
by Lokesh Dhakar - http://www.lokeshdhakar.com by Lokesh Dhakar - http://www.lokeshdhakar.com
For more information, visit: For more information, visit:
http://lokeshdhakar.com/projects/lightbox2/ http://lokeshdhakar.com/projects/lightbox2/
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
- free for use in both personal and commercial projects - free for use in both personal and commercial projects
- attribution requires leaving author name, author link, and the license info intact - attribution requires leaving author name, author link, and the license info intact
Thanks Thanks
- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05. - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
Table of Contents Table of Contents
================= =================
LightboxOptions LightboxOptions
Lightbox Lightbox
- constructor - constructor
- init - init
- enable - enable
- build - build
- start - start
- changeImage - changeImage
- sizeContainer - sizeContainer
- showImage - showImage
- updateNav - updateNav
- updateDetails - updateDetails
- preloadNeigbhoringImages - preloadNeigbhoringImages
- enableKeyboardNav - enableKeyboardNav
- disableKeyboardNav - disableKeyboardNav
- keyboardAction - keyboardAction
- end - end
options = new LightboxOptions options = new LightboxOptions
lightbox = new Lightbox options lightbox = new Lightbox options
*/ */
(function() { (function() {
var $, Lightbox, LightboxOptions; var $, Lightbox, LightboxOptions;
$ = jQuery; $ = jQuery;
LightboxOptions = (function() { LightboxOptions = (function() {
function LightboxOptions() { function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif'; this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png'; this.fileCloseImage = 'images/close.png';
this.resizeDuration = 300; this.resizeDuration = 300;
this.fadeDuration = 100; this.fadeDuration = 100;
this.labelImage = "Image"; this.labelImage = "Image";
this.labelOf = "of"; this.labelOf = "of";
} }
return LightboxOptions; return LightboxOptions;
})(); })();
Lightbox = (function() { Lightbox = (function() {
function Lightbox(options) { function Lightbox(options) {
this.options = options; this.options = options;
this.album = []; this.album = [];
this.currentImageIndex = void 0; this.currentImageIndex = void 0;
this.init(); this.init();
} }
Lightbox.prototype.init = function() { Lightbox.prototype.init = function() {
this.enable(); this.enable();
return this.build(); return this.build();
}; };
Lightbox.prototype.enable = function() { Lightbox.prototype.enable = function() {
var _this = this; var _this = this;
return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) { return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
_this.start($(e.currentTarget)); _this.start($(e.currentTarget));
return false; console.log(this);
}); return false;
}; });
};
Lightbox.prototype.build = function() {
var $lightbox, Lightbox.prototype.build = function() {
_this = this; var $lightbox,
$("<div>", { _this = this;
id: 'lightboxOverlay' $("<div>", {
}).after($('<div/>', { id: 'lightboxOverlay'
id: 'lightbox' }).after($('<div/>', {
}).append($('<div/>', { id: 'lightbox'
"class": 'lb-outerContainer' }).append($('<div/>', {
}).append($('<div/>', { "class": 'lb-outerContainer'
"class": 'lb-container' }).append($('<div/>', {
}).append($('<img/>', { "class": 'lb-container'
"class": 'lb-image' }).append($('<img/>', {
}), $('<div/>', { "class": 'lb-image'
"class": 'lb-nav' }), $('<div/>', {
}).append($('<a/>', { "class": 'lb-nav'
"class": 'lb-prev' }).append($('<a/>', {
}), $('<a/>', { "class": 'lb-prev'
"class": 'lb-next' }), $('<a/>', {
})), $('<div/>', { "class": 'lb-next'
"class": 'lb-loader' })), $('<div/>', {
}).append($('<a/>', { "class": 'lb-loader'
"class": 'lb-cancel' }).append($('<a/>', {
}).append($('<img/>', { "class": 'lb-cancel'
src: this.options.fileLoadingImage }).append($('<span/>', {
}))))), $('<div/>', { "class": 'lb'
"class": 'lb-dataContainer' }))))), $('<div/>', {
}).append($('<div/>', { "class": 'lb-dataContainer'
"class": 'lb-data' }).append($('<div/>', {
}).append($('<div/>', { "class": 'lb-data'
"class": 'lb-details' }).append($('<div/>', {
}).append($('<span/>', { "class": 'lb-details'
"class": 'lb-caption' }).append($('<span/>', {
}), $('<span/>', { "class": 'lb-caption'
"class": 'lb-number' }), $('<span/>', {
})), $('<div/>', { "class": 'lb-number'
"class": 'lb-closeContainer' })), $('<div/>', {
}).append($('<a/>', { "class": 'lb-closeContainer'
"class": 'lb-close' }).append($('<a/>', {
}).append($('<img/>', { "class": 'lb-close'
src: this.options.fileCloseImage }).append($('<span/>', {
}))))))).appendTo($('body')); "class": 'lb'
$('#lightboxOverlay').hide().on('click', function(e) { }))))))).appendTo($('body'));
_this.end(); $('#lightboxOverlay').hide().on('click', function(e) {
return false; _this.end();
}); return false;
$lightbox = $('#lightbox'); });
$lightbox.hide().on('click', function(e) { $lightbox = $('#lightbox');
if ($(e.target).attr('id') === 'lightbox') _this.end(); $lightbox.hide().on('click', function(e) {
return false; if ($(e.target).attr('id') === 'lightbox') _this.end();
}); return false;
$lightbox.find('.lb-outerContainer').on('click', function(e) { });
if ($(e.target).attr('id') === 'lightbox') _this.end(); $lightbox.find('.lb-outerContainer').on('click', function(e) {
return false; if ($(e.target).attr('id') === 'lightbox') _this.end();
}); return false;
$lightbox.find('.lb-prev').on('click', function(e) { });
_this.changeImage(_this.currentImageIndex - 1); $lightbox.find('.lb-prev').on('click', function(e) {
return false; _this.changeImage(_this.currentImageIndex - 1);
}); return false;
$lightbox.find('.lb-next').on('click', function(e) { });
_this.changeImage(_this.currentImageIndex + 1); $lightbox.find('.lb-next').on('click', function(e) {
return false; _this.changeImage(_this.currentImageIndex + 1);
}); return false;
$lightbox.find('.lb-loader, .lb-close').on('click', function(e) { });
_this.end(); $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
return false; _this.end();
}); return false;
}; });
};
Lightbox.prototype.start = function($link) {
var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref; Lightbox.prototype.start = function($link) {
$(window).on("resize", this.sizeOverlay); var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
$('select, object, embed').css({ $(window).on("resize", this.sizeOverlay);
visibility: "hidden" $('select, object, embed').css({
}); visibility: "hidden"
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration); });
this.album = []; $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
imageNumber = 0; this.album = [];
if ($link.attr('rel') === 'lightbox') { imageNumber = 0;
this.album.push({ if ($link.attr('rel') === 'lightbox') {
link: $link.attr('href'), this.album.push({
title: $link.attr('title') link: $link.attr('href'),
}); title: $link.attr('title')
} else { });
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]'); } else {
for (i = 0, _len = _ref.length; i < _len; i++) { _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
a = _ref[i]; for (i = 0, _len = _ref.length; i < _len; i++) {
this.album.push({ a = _ref[i];
link: $(a).attr('href'), this.album.push({
title: $(a).attr('title') link: $(a).attr('href'),
}); title: $(a).attr('title')
if ($(a).attr('href') === $link.attr('href')) imageNumber = i; });
} if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
} }
$window = $(window); }
top = $window.scrollTop() + $window.height() / 10; $window = $(window);
left = $window.scrollLeft(); top = $window.scrollTop() + $window.height() / 10;
$lightbox = $('#lightbox'); left = $window.scrollLeft();
$lightbox.css({ $lightbox = $('#lightbox');
top: top + 'px', $lightbox.css({
left: left + 'px' top: top + 'px',
}).fadeIn(this.options.fadeDuration); left: left + 'px'
this.changeImage(imageNumber); }).fadeIn(this.options.fadeDuration);
}; this.changeImage(imageNumber);
};
Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader, Lightbox.prototype.changeImage = function(imageNumber) {
_this = this; var $image, $lightbox, preloader,
this.disableKeyboardNav(); _this = this;
$lightbox = $('#lightbox'); this.disableKeyboardNav();
$image = $lightbox.find('.lb-image'); $lightbox = $('#lightbox');
this.sizeOverlay(); $image = $lightbox.find('.lb-image');
$('#lightboxOverlay').fadeIn(this.options.fadeDuration); this.sizeOverlay();
$('.loader').fadeIn('slow'); $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); $('.loader').fadeIn('slow');
$lightbox.find('.lb-outerContainer').addClass('animating'); $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
preloader = new Image; $lightbox.find('.lb-outerContainer').addClass('animating');
preloader.onload = function() { preloader = new Image;
$image.attr('src', _this.album[imageNumber].link); preloader.onload = function() {
$image.width = preloader.width; $image.attr('src', _this.album[imageNumber].link);
$image.height = preloader.height; $image.width = preloader.width;
return _this.sizeContainer(preloader.width, preloader.height); $image.height = preloader.height;
}; return _this.sizeContainer(preloader.width, preloader.height);
preloader.src = this.album[imageNumber].link; };
this.currentImageIndex = imageNumber; preloader.src = this.album[imageNumber].link;
}; this.currentImageIndex = imageNumber;
};
Lightbox.prototype.sizeOverlay = function() {
return $('#lightboxOverlay').width($(document).width()).height($(document).height()); Lightbox.prototype.sizeOverlay = function() {
}; return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth, Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
_this = this; var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
$lightbox = $('#lightbox'); _this = this;
$outerContainer = $lightbox.find('.lb-outerContainer'); $lightbox = $('#lightbox');
oldWidth = $outerContainer.outerWidth(); $outerContainer = $lightbox.find('.lb-outerContainer');
oldHeight = $outerContainer.outerHeight(); oldWidth = $outerContainer.outerWidth();
$container = $lightbox.find('.lb-container'); oldHeight = $outerContainer.outerHeight();
containerTopPadding = parseInt($container.css('padding-top'), 10); $container = $lightbox.find('.lb-container');
containerRightPadding = parseInt($container.css('padding-right'), 10); containerTopPadding = parseInt($container.css('padding-top'), 10);
containerBottomPadding = parseInt($container.css('padding-bottom'), 10); containerRightPadding = parseInt($container.css('padding-right'), 10);
containerLeftPadding = parseInt($container.css('padding-left'), 10); containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
newWidth = imageWidth + containerLeftPadding + containerRightPadding; containerLeftPadding = parseInt($container.css('padding-left'), 10);
newHeight = imageHeight + containerTopPadding + containerBottomPadding; newWidth = imageWidth + containerLeftPadding + containerRightPadding;
if (newWidth !== oldWidth && newHeight !== oldHeight) { newHeight = imageHeight + containerTopPadding + containerBottomPadding;
$outerContainer.animate({ if (newWidth !== oldWidth && newHeight !== oldHeight) {
width: newWidth, $outerContainer.animate({
height: newHeight width: newWidth,
}, this.options.resizeDuration, 'swing'); height: newHeight
} else if (newWidth !== oldWidth) { }, this.options.resizeDuration, 'swing');
$outerContainer.animate({ } else if (newWidth !== oldWidth) {
width: newWidth $outerContainer.animate({
}, this.options.resizeDuration, 'swing'); width: newWidth
} else if (newHeight !== oldHeight) { }, this.options.resizeDuration, 'swing');
$outerContainer.animate({ } else if (newHeight !== oldHeight) {
height: newHeight $outerContainer.animate({
}, this.options.resizeDuration, 'swing'); height: newHeight
} }, this.options.resizeDuration, 'swing');
setTimeout(function() { }
$lightbox.find('.lb-dataContainer').width(newWidth); setTimeout(function() {
$lightbox.find('.lb-prevLink').height(newHeight); $lightbox.find('.lb-dataContainer').width(newWidth);
$lightbox.find('.lb-nextLink').height(newHeight); $lightbox.find('.lb-prevLink').height(newHeight);
_this.showImage(); $lightbox.find('.lb-nextLink').height(newHeight);
}, this.options.resizeDuration); _this.showImage();
}; }, this.options.resizeDuration);
};
Lightbox.prototype.showImage = function() {
var $lightbox; Lightbox.prototype.showImage = function() {
$lightbox = $('#lightbox'); var $lightbox;
$lightbox.find('.lb-loader').hide(); $lightbox = $('#lightbox');
$lightbox.find('.lb-image').fadeIn('slow'); $lightbox.find('.lb-loader').hide();
this.updateNav(); $lightbox.find('.lb-image').fadeIn('slow');
this.updateDetails(); this.updateNav();
this.preloadNeighboringImages(); this.updateDetails();
this.enableKeyboardNav(); this.preloadNeighboringImages();
}; this.enableKeyboardNav();
};
Lightbox.prototype.updateNav = function() {
var $lightbox; Lightbox.prototype.updateNav = function() {
$lightbox = $('#lightbox'); var $lightbox;
$lightbox.find('.lb-nav').show(); $lightbox = $('#lightbox');
if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); $lightbox.find('.lb-nav').show();
if (this.currentImageIndex < this.album.length - 1) { if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
$lightbox.find('.lb-next').show(); if (this.currentImageIndex < this.album.length - 1) {
} $lightbox.find('.lb-next').show();
}; }
};
Lightbox.prototype.updateDetails = function() {
var $lightbox, Lightbox.prototype.updateDetails = function() {
_this = this; var $lightbox,
$lightbox = $('#lightbox'); _this = this;
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { $lightbox = $('#lightbox');
$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast'); if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
} $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
if (this.album.length > 1) { }
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast'); if (this.album.length > 1) {
} else { $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
$lightbox.find('.lb-number').hide(); } else {
} $lightbox.find('.lb-number').hide();
$lightbox.find('.lb-outerContainer').removeClass('animating'); }
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() { $lightbox.find('.lb-outerContainer').removeClass('animating');
return _this.sizeOverlay(); $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
}); return _this.sizeOverlay();
}; });
};
Lightbox.prototype.preloadNeighboringImages = function() {
var preloadNext, preloadPrev; Lightbox.prototype.preloadNeighboringImages = function() {
if (this.album.length > this.currentImageIndex + 1) { var preloadNext, preloadPrev;
preloadNext = new Image; if (this.album.length > this.currentImageIndex + 1) {
preloadNext.src = this.album[this.currentImageIndex + 1].link; preloadNext = new Image;
} preloadNext.src = this.album[this.currentImageIndex + 1].link;
if (this.currentImageIndex > 0) { }
preloadPrev = new Image; if (this.currentImageIndex > 0) {
preloadPrev.src = this.album[this.currentImageIndex - 1].link; preloadPrev = new Image;
} preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}; }
};
Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); Lightbox.prototype.enableKeyboardNav = function() {
}; $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard'); Lightbox.prototype.disableKeyboardNav = function() {
}; $(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode; Lightbox.prototype.keyboardAction = function(event) {
KEYCODE_ESC = 27; var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
KEYCODE_LEFTARROW = 37; KEYCODE_ESC = 27;
KEYCODE_RIGHTARROW = 39; KEYCODE_LEFTARROW = 37;
keycode = event.keyCode; KEYCODE_RIGHTARROW = 39;
key = String.fromCharCode(keycode).toLowerCase(); keycode = event.keyCode;
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { key = String.fromCharCode(keycode).toLowerCase();
this.end(); if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { this.end();
if (this.currentImageIndex !== 0) { } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
this.changeImage(this.currentImageIndex - 1); if (this.currentImageIndex !== 0) {
} this.changeImage(this.currentImageIndex - 1);
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { }
if (this.currentImageIndex !== this.album.length - 1) { } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
this.changeImage(this.currentImageIndex + 1); if (this.currentImageIndex !== this.album.length - 1) {
} this.changeImage(this.currentImageIndex + 1);
} }
}; }
};
Lightbox.prototype.end = function() {
this.disableKeyboardNav(); Lightbox.prototype.end = function() {
$(window).off("resize", this.sizeOverlay); this.disableKeyboardNav();
$('#lightbox').fadeOut(this.options.fadeDuration); $(window).off("resize", this.sizeOverlay);
$('#lightboxOverlay').fadeOut(this.options.fadeDuration); $('#lightbox').fadeOut(this.options.fadeDuration);
return $('select, object, embed').css({ $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
visibility: "visible" return $('select, object, embed').css({
}); visibility: "visible"
}; });
};
return Lightbox;
return Lightbox;
})();
})();
$(function() {
var lightbox, options; $(function() {
options = new LightboxOptions; var lightbox, options;
return lightbox = new Lightbox(options); options = new LightboxOptions;
}); return lightbox = new Lightbox(options);
});
}).call(this);
}).call(this);