first commit
This commit is contained in:
750
web/js/photoGallery/jquery.jqzoom-core-no-zoom.js
Normal file
750
web/js/photoGallery/jquery.jqzoom-core-no-zoom.js
Normal file
@@ -0,0 +1,750 @@
|
||||
/*!
|
||||
* jQzoom Evolution Library v2.3 - Javascript Image magnifier
|
||||
* http://www.mind-projects.it
|
||||
*
|
||||
* Copyright 2011, Engineer Marco Renzi
|
||||
* Licensed under the BSD license.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of the organization nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* Date: 03 May 2011 22:16:00
|
||||
*/
|
||||
(function ($) {
|
||||
//GLOBAL VARIABLES
|
||||
var isIE6 = ($.browser.msie && $.browser.version < 7);
|
||||
var body = $(document.body);
|
||||
var window = $(window);
|
||||
var jqzoompluging_disabled = false; //disabilita globalmente il plugin
|
||||
$.fn.jqzoom = function (options) {
|
||||
return this.each(function () {
|
||||
var node = this.nodeName.toLowerCase();
|
||||
if (node == 'a') {
|
||||
new jqzoom(this, options);
|
||||
}
|
||||
});
|
||||
};
|
||||
jqzoom = function (el, options) {
|
||||
var api = null;
|
||||
api = $(el).data("jqzoom");
|
||||
if (api) return api;
|
||||
var obj = this;
|
||||
var settings = $.extend({}, $.jqzoom.defaults, options || {});
|
||||
obj.el = el;
|
||||
el.rel = $(el).attr('rel');
|
||||
//ANCHOR ELEMENT
|
||||
el.zoom_active = false;
|
||||
el.zoom_disabled = false; //to disable single zoom instance
|
||||
el.largeimageloading = false; //tell us if large image is loading
|
||||
el.largeimageloaded = false; //tell us if large image is loaded
|
||||
el.scale = {};
|
||||
el.timer = null;
|
||||
el.mousepos = {};
|
||||
el.mouseDown = false;
|
||||
$(el).css({
|
||||
'outline-style': 'none',
|
||||
'text-decoration': 'none'
|
||||
});
|
||||
//BASE IMAGE
|
||||
var img = $("img:eq(0)", el);
|
||||
el.title = $(el).attr('title');
|
||||
el.imagetitle = img.attr('title');
|
||||
var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle;
|
||||
var smallimage = new Smallimage(img);
|
||||
var lens = new Lens();
|
||||
var stage = new Stage();
|
||||
var largeimage = new Largeimage();
|
||||
var loader = new Loader();
|
||||
//preventing default click,allowing the onclick event [exmple: lightbox]
|
||||
$(el).bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
//setting the default zoomType if not in settings
|
||||
var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse'];
|
||||
if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) {
|
||||
settings.zoomType = 'standard';
|
||||
}
|
||||
$.extend(obj, {
|
||||
create: function () { //create the main objects
|
||||
//create ZoomPad
|
||||
|
||||
if(settings.zoomType == 'innerzoom'){
|
||||
settings.zoomWidth = smallimage.w;
|
||||
settings.zoomHeight = smallimage.h;
|
||||
}
|
||||
//creating ZoomPup
|
||||
if ($(".zoomPup", el).length == 0) {
|
||||
lens.append();
|
||||
}
|
||||
//creating zoomWindow
|
||||
if ($(".zoomWindow", el).length == 0) {
|
||||
stage.append();
|
||||
}
|
||||
//creating Preload
|
||||
if ($(".zoomPreload", el).length == 0) {
|
||||
loader.append();
|
||||
}
|
||||
//preloading images
|
||||
if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) {
|
||||
obj.load();
|
||||
}
|
||||
obj.init();
|
||||
},
|
||||
init: function () {
|
||||
//drag option
|
||||
if (settings.zoomType == 'drag') {
|
||||
$(".zoomPad", el).mousedown(function () {
|
||||
el.mouseDown = true;
|
||||
});
|
||||
$(".zoomPad", el).mouseup(function () {
|
||||
el.mouseDown = false;
|
||||
});
|
||||
document.body.ondragstart = function () {
|
||||
return false;
|
||||
};
|
||||
$(".zoomPad", el).css({
|
||||
cursor: 'default'
|
||||
});
|
||||
$(".zoomPup", el).css({
|
||||
cursor: 'move'
|
||||
});
|
||||
}
|
||||
if (settings.zoomType == 'innerzoom') {
|
||||
$(".zoomWrapper", el).css({
|
||||
cursor: 'crosshair'
|
||||
});
|
||||
}
|
||||
$(".zoomPad", el).bind('mouseenter mouseover', function (event) {
|
||||
|
||||
el.zoom_active = true;
|
||||
//if loaded then activate else load large image
|
||||
smallimage.fetchdata();
|
||||
if (el.largeimageloaded) {
|
||||
obj.activate(event);
|
||||
} else {
|
||||
obj.load();
|
||||
}
|
||||
});
|
||||
$(".zoomPad", el).bind('mouseleave', function (event) {
|
||||
obj.deactivate();
|
||||
});
|
||||
$(".zoomPad", el).bind('mousemove', function (e) {
|
||||
|
||||
//prevent fast mouse mevements not to fire the mouseout event
|
||||
if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) {
|
||||
lens.setcenter();
|
||||
return false;
|
||||
}
|
||||
el.zoom_active = true;
|
||||
if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) {
|
||||
obj.activate(e);
|
||||
}
|
||||
if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) {
|
||||
lens.setposition(e);
|
||||
}
|
||||
});
|
||||
var thumb_preload = new Array();
|
||||
var i = 0;
|
||||
//binding click event on thumbnails
|
||||
var thumblist = new Array();
|
||||
thumblist = $('a').filter(function () {
|
||||
var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
|
||||
var rel = $(this).attr('rel');
|
||||
if (regex.test(rel)) {
|
||||
return this;
|
||||
}
|
||||
});
|
||||
if (thumblist.length > 0) {
|
||||
//getting the first to the last
|
||||
var first = thumblist.splice(0, 1);
|
||||
thumblist.push(first);
|
||||
}
|
||||
thumblist.each(function () {
|
||||
//preloading thumbs
|
||||
if (settings.preloadImages) {
|
||||
var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")"));
|
||||
thumb_preload[i] = new Image();
|
||||
thumb_preload[i].src = thumb_options.largeimage;
|
||||
i++;
|
||||
}
|
||||
$(this).click(function (e) {
|
||||
if($(this).hasClass('zoomThumbActive')){
|
||||
return false;
|
||||
}
|
||||
thumblist.each(function () {
|
||||
$(this).removeClass('zoomThumbActive');
|
||||
});
|
||||
e.preventDefault();
|
||||
obj.swapimage(this);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
},
|
||||
load: function () {
|
||||
if (el.largeimageloaded == false && el.largeimageloading == false && largeimage.node.src.indexOf($(el).attr('href')) < 0) {
|
||||
var url = $(el).attr('href');
|
||||
el.largeimageloading = true;
|
||||
largeimage.loadimage(url);
|
||||
}
|
||||
},
|
||||
activate: function (e) {
|
||||
clearTimeout(el.timer);
|
||||
//show lens and zoomWindow
|
||||
lens.show();
|
||||
stage.show();
|
||||
},
|
||||
deactivate: function (e) {
|
||||
switch (settings.zoomType) {
|
||||
case 'drag':
|
||||
//nothing or lens.setcenter();
|
||||
break;
|
||||
default:
|
||||
img.attr('title', el.imagetitle);
|
||||
$(el).attr('title', el.title);
|
||||
if (settings.alwaysOn) {
|
||||
lens.setcenter();
|
||||
} else {
|
||||
stage.hide();
|
||||
lens.hide();
|
||||
}
|
||||
break;
|
||||
}
|
||||
el.zoom_active = false;
|
||||
},
|
||||
swapimage: function (link) {
|
||||
el.largeimageloading = false;
|
||||
el.largeimageloaded = false;
|
||||
var options = new Object();
|
||||
options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
|
||||
if (options.smallimage && options.largeimage) {
|
||||
var smallimage = options.smallimage;
|
||||
var largeimage = options.largeimage;
|
||||
var title = $(link).attr('title');
|
||||
$(link).addClass('zoomThumbActive');
|
||||
$(el).attr('href', largeimage);
|
||||
img.attr('src', smallimage);
|
||||
if (title) {
|
||||
$(el).attr('title', title);
|
||||
} else {
|
||||
$(el).removeAttr('title');
|
||||
}
|
||||
img.load(function() {
|
||||
$('.zoomWrapper').css({
|
||||
width: Math.round($(this).attr('width')) + 'px'
|
||||
});
|
||||
$('.zoomWrapperImage').css({
|
||||
width: '100%',
|
||||
height: Math.round($(this).attr('height')) + 'px'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
lens.hide();
|
||||
stage.hide();
|
||||
obj.load();
|
||||
} else {
|
||||
alert('ERROR :: Missing parameter for largeimage or smallimage.');
|
||||
throw 'ERROR :: Missing parameter for largeimage or smallimage.';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
//sometimes image is already loaded and onload will not fire
|
||||
if (img[0].complete) {
|
||||
//fetching data from sallimage if was previously loaded
|
||||
smallimage.fetchdata();
|
||||
if ($(".zoomPad", el).length == 0) obj.create();
|
||||
}
|
||||
/*========================================================,
|
||||
| Smallimage
|
||||
|---------------------------------------------------------:
|
||||
| Base image into the anchor element
|
||||
`========================================================*/
|
||||
|
||||
function Smallimage(image) {
|
||||
var $obj = this;
|
||||
this.node = image[0];
|
||||
this.findborder = function () {
|
||||
var bordertop = 0;
|
||||
bordertop = image.css('border-top-width');
|
||||
btop = '';
|
||||
var borderleft = 0;
|
||||
borderleft = image.css('border-left-width');
|
||||
bleft = '';
|
||||
if (bordertop) {
|
||||
for (i = 0; i < 3; i++) {
|
||||
var x = [];
|
||||
x = bordertop.substr(i, 1);
|
||||
if (isNaN(x) == false) {
|
||||
btop = btop + '' + bordertop.substr(i, 1);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (borderleft) {
|
||||
for (i = 0; i < 3; i++) {
|
||||
if (!isNaN(borderleft.substr(i, 1))) {
|
||||
bleft = bleft + borderleft.substr(i, 1)
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
$obj.btop = (btop.length > 0) ? eval(btop) : 0;
|
||||
$obj.bleft = (bleft.length > 0) ? eval(bleft) : 0;
|
||||
};
|
||||
this.fetchdata = function () {
|
||||
$obj.findborder();
|
||||
$obj.w = image.width();
|
||||
$obj.h = image.height();
|
||||
$obj.ow = image.outerWidth();
|
||||
$obj.oh = image.outerHeight();
|
||||
$obj.pos = image.offset();
|
||||
$obj.pos.l = image.offset().left + $obj.bleft;
|
||||
$obj.pos.t = image.offset().top + $obj.btop;
|
||||
$obj.pos.r = $obj.w + $obj.pos.l;
|
||||
$obj.pos.b = $obj.h + $obj.pos.t;
|
||||
$obj.rightlimit = image.offset().left + $obj.ow;
|
||||
$obj.bottomlimit = image.offset().top + $obj.oh;
|
||||
|
||||
};
|
||||
this.node.onerror = function () {
|
||||
alert('Problems while loading image.');
|
||||
throw 'Problems while loading image.';
|
||||
};
|
||||
this.node.onload = function () {
|
||||
$obj.fetchdata();
|
||||
if ($(".zoomPad", el).length == 0) obj.create();
|
||||
};
|
||||
return $obj;
|
||||
};
|
||||
/*========================================================,
|
||||
| Loader
|
||||
|---------------------------------------------------------:
|
||||
| Show that the large image is loading
|
||||
`========================================================*/
|
||||
|
||||
function Loader() {
|
||||
var $obj = this;
|
||||
this.append = function () {
|
||||
this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText);
|
||||
$('.zoomPad', el).append(this.node);
|
||||
};
|
||||
this.show = function () {
|
||||
|
||||
this.node.top = ($(".zoomPad").height() - this.node.height()) / 2;
|
||||
this.node.left = ($(".zoomPad").width() - this.node.width()) / 2;
|
||||
//setting position
|
||||
this.node.css({
|
||||
top: this.node.top,
|
||||
left: this.node.left,
|
||||
position: 'absolute',
|
||||
visibility: 'visible'
|
||||
});
|
||||
};
|
||||
this.hide = function () {
|
||||
this.node.css('visibility', 'hidden');
|
||||
};
|
||||
return this;
|
||||
}
|
||||
/*========================================================,
|
||||
| Lens
|
||||
|---------------------------------------------------------:
|
||||
| Lens over the image
|
||||
`========================================================*/
|
||||
|
||||
function Lens() {
|
||||
var $obj = this;
|
||||
this.node = $('<div/>').addClass('zoomPup');
|
||||
//this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
|
||||
this.append = function () {
|
||||
$('.zoomPad', el).append($(this.node).hide());
|
||||
if (settings.zoomType == 'reverse') {
|
||||
this.image = new Image();
|
||||
this.image.src = smallimage.node.src; // fires off async
|
||||
$(this.node).empty().append(this.image);
|
||||
}
|
||||
};
|
||||
this.setdimensions = function () {
|
||||
this.node.w = (parseInt((smallimage.w ) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(smallimage.w / el.scale.x));
|
||||
this.node.h = (parseInt((smallimage.h) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(smallimage.h / el.scale.y));
|
||||
this.node.top = (smallimage.oh - this.node.h - 2) / 2;
|
||||
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
|
||||
//centering lens
|
||||
this.node.css({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.node.w + 'px',
|
||||
height: this.node.h + 'px',
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
borderWidth: 1 + 'px'
|
||||
});
|
||||
|
||||
|
||||
|
||||
if (settings.zoomType == 'reverse') {
|
||||
this.image.src = smallimage.node.src;
|
||||
$(this.node).css({
|
||||
'opacity': 1
|
||||
});
|
||||
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
this.setcenter = function () {
|
||||
//calculating center position
|
||||
this.node.top = (smallimage.oh - this.node.h - 2) / 2;
|
||||
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
|
||||
//centering lens
|
||||
this.node.css({
|
||||
top: this.node.top,
|
||||
left: this.node.left
|
||||
});
|
||||
if (settings.zoomType == 'reverse') {
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
|
||||
}
|
||||
//centering large image
|
||||
largeimage.setposition();
|
||||
};
|
||||
this.setposition = function (e) {
|
||||
|
||||
el.mousepos.x = e.pageX;
|
||||
el.mousepos.y = e.pageY;
|
||||
var lensleft = 0;
|
||||
var lenstop = 0;
|
||||
|
||||
function overleft(lens) {
|
||||
return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l;
|
||||
}
|
||||
|
||||
function overright(lens) {
|
||||
return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r;
|
||||
|
||||
}
|
||||
|
||||
function overtop(lens) {
|
||||
return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t;
|
||||
}
|
||||
|
||||
function overbottom(lens) {
|
||||
return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b;
|
||||
}
|
||||
|
||||
lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2;
|
||||
lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2;
|
||||
if (overleft(this.node)) {
|
||||
lensleft = smallimage.bleft - 1;
|
||||
} else if (overright(this.node)) {
|
||||
lensleft = smallimage.w + smallimage.bleft - this.node.w - 1;
|
||||
}
|
||||
if (overtop(this.node)) {
|
||||
lenstop = smallimage.btop - 1;
|
||||
} else if (overbottom(this.node)) {
|
||||
lenstop = smallimage.h + smallimage.btop - this.node.h - 1;
|
||||
}
|
||||
|
||||
this.node.left = lensleft;
|
||||
this.node.top = lenstop;
|
||||
this.node.css({
|
||||
'left': lensleft + 'px',
|
||||
'top': lenstop + 'px'
|
||||
});
|
||||
if (settings.zoomType == 'reverse') {
|
||||
if ($.browser.msie && $.browser.version > 7) {
|
||||
$(this.node).empty().append(this.image);
|
||||
}
|
||||
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
largeimage.setposition();
|
||||
};
|
||||
this.hide = function () {
|
||||
img.css({
|
||||
'opacity': 1
|
||||
});
|
||||
this.node.hide();
|
||||
};
|
||||
this.show = function () {
|
||||
|
||||
if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) {
|
||||
this.node.show();
|
||||
}
|
||||
|
||||
if (settings.zoomType == 'reverse') {
|
||||
img.css({
|
||||
'opacity': settings.imageOpacity
|
||||
});
|
||||
}
|
||||
};
|
||||
this.getoffset = function () {
|
||||
var o = {};
|
||||
o.left = $obj.node.left;
|
||||
o.top = $obj.node.top;
|
||||
return o;
|
||||
};
|
||||
return this;
|
||||
};
|
||||
/*========================================================,
|
||||
| Stage
|
||||
|---------------------------------------------------------:
|
||||
| Window area that contains the large image
|
||||
`========================================================*/
|
||||
|
||||
function Stage() {
|
||||
var $obj = this;
|
||||
this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
|
||||
this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
|
||||
this.setposition = function () {
|
||||
this.node.leftpos = 0;
|
||||
this.node.toppos = 0;
|
||||
if (settings.zoomType != 'innerzoom') {
|
||||
//positioning
|
||||
switch (settings.position) {
|
||||
case "left":
|
||||
this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset));
|
||||
this.node.toppos = Math.abs(settings.yOffset);
|
||||
break;
|
||||
case "top":
|
||||
this.node.leftpos = Math.abs(settings.xOffset);
|
||||
this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset));
|
||||
break;
|
||||
case "bottom":
|
||||
this.node.leftpos = Math.abs(settings.xOffset);
|
||||
this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset));
|
||||
break;
|
||||
default:
|
||||
this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
|
||||
this.node.toppos = Math.abs(settings.yOffset);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.node.css({
|
||||
'left': this.node.leftpos + 'px',
|
||||
'top': this.node.toppos + 'px'
|
||||
});
|
||||
return this;
|
||||
};
|
||||
this.append = function () {
|
||||
$('.zoomPad', el).append(this.node);
|
||||
this.node.css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
zIndex: 5001
|
||||
});
|
||||
if (settings.zoomType == 'innerzoom') {
|
||||
this.node.css({
|
||||
cursor: 'default'
|
||||
});
|
||||
var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
|
||||
$('.zoomWrapper', this.node).css({
|
||||
borderWidth: thickness + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
$('.zoomWrapper', this.node).css({
|
||||
width: Math.round(smallimage.w) + 'px' ,
|
||||
borderWidth: thickness + 'px'
|
||||
});
|
||||
$('.zoomWrapperImage', this.node).css({
|
||||
width: '100%',
|
||||
height: Math.round(smallimage.h) + 'px'
|
||||
});
|
||||
//zoom title
|
||||
$('.zoomWrapperTitle', this.node).css({
|
||||
width: '100%',
|
||||
position: 'absolute'
|
||||
});
|
||||
|
||||
$('.zoomWrapperTitle', this.node).hide();
|
||||
if (settings.title && zoomtitle && zoomtitle.length > 0) {
|
||||
$('.zoomWrapperTitle', this.node).html(zoomtitle).show();
|
||||
}
|
||||
|
||||
$obj.setposition();
|
||||
};
|
||||
this.hide = function () {
|
||||
switch (settings.hideEffect) {
|
||||
case 'fadeout':
|
||||
this.node.fadeOut(settings.fadeoutSpeed, function () {});
|
||||
break;
|
||||
default:
|
||||
this.node.hide();
|
||||
break;
|
||||
}
|
||||
this.ieframe.hide();
|
||||
};
|
||||
this.show = function () {
|
||||
switch (settings.showEffect) {
|
||||
case 'fadein':
|
||||
this.node.fadeIn();
|
||||
this.node.fadeIn(settings.fadeinSpeed, function () {});
|
||||
break;
|
||||
default:
|
||||
this.node.show();
|
||||
break;
|
||||
}
|
||||
if (isIE6 && settings.zoomType != 'innerzoom') {
|
||||
this.ieframe.width = this.node.width();
|
||||
this.ieframe.height = this.node.height();
|
||||
this.ieframe.left = this.node.leftpos;
|
||||
this.ieframe.top = this.node.toppos;
|
||||
this.ieframe.css({
|
||||
display: 'block',
|
||||
position: "absolute",
|
||||
left: this.ieframe.left,
|
||||
top: this.ieframe.top,
|
||||
zIndex: 99,
|
||||
width: this.ieframe.width + 'px',
|
||||
height: this.ieframe.height + 'px'
|
||||
});
|
||||
$('.zoomPad', el).append(this.ieframe);
|
||||
this.ieframe.show();
|
||||
};
|
||||
};
|
||||
};
|
||||
/*========================================================,
|
||||
| LargeImage
|
||||
|---------------------------------------------------------:
|
||||
| The large detailed image
|
||||
`========================================================*/
|
||||
|
||||
function Largeimage() {
|
||||
var $obj = this;
|
||||
this.node = new Image();
|
||||
this.loadimage = function (url) {
|
||||
//showing preload
|
||||
loader.show();
|
||||
this.url = url;
|
||||
this.node.style.position = 'absolute';
|
||||
this.node.style.border = '0px';
|
||||
this.node.style.display = 'none';
|
||||
this.node.style.left = '-5000px';
|
||||
this.node.style.top = '0px';
|
||||
document.body.appendChild(this.node);
|
||||
this.node.src = url; // fires off async
|
||||
};
|
||||
this.fetchdata = function () {
|
||||
var image = $(this.node);
|
||||
var scale = {};
|
||||
this.node.style.display = 'block';
|
||||
$obj.w = image.width();
|
||||
$obj.h = image.height();
|
||||
$obj.pos = image.offset();
|
||||
$obj.pos.l = image.offset().left;
|
||||
$obj.pos.t = image.offset().top;
|
||||
$obj.pos.r = $obj.w + $obj.pos.l;
|
||||
$obj.pos.b = $obj.h + $obj.pos.t;
|
||||
scale.x = ($obj.w / smallimage.w);
|
||||
scale.y = ($obj.h / smallimage.h);
|
||||
el.scale = scale;
|
||||
//document.body.removeChild(this.node);
|
||||
$('.zoomWrapperImage', el).empty().append(this.node);
|
||||
//setting lens dimensions;
|
||||
lens.setdimensions();
|
||||
};
|
||||
this.node.onerror = function () {
|
||||
//alert('Problems while loading the big image.');
|
||||
//throw 'Problems while loading the big image.';
|
||||
|
||||
};
|
||||
this.node.onload = function () {
|
||||
//fetching data
|
||||
$obj.fetchdata();
|
||||
loader.hide();
|
||||
el.largeimageloading = false;
|
||||
el.largeimageloaded = true;
|
||||
if (settings.zoomType == 'drag' || settings.alwaysOn) {
|
||||
lens.show();
|
||||
stage.show();
|
||||
lens.setcenter();
|
||||
}
|
||||
};
|
||||
this.setposition = function () {
|
||||
var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
|
||||
var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
|
||||
$(this.node).css({
|
||||
'left': left + 'px',
|
||||
'top': top + 'px'
|
||||
});
|
||||
};
|
||||
return this;
|
||||
};
|
||||
$(el).data("jqzoom", obj);
|
||||
};
|
||||
//es. $.jqzoom.disable('#jqzoom1');
|
||||
$.jqzoom = {
|
||||
defaults: {
|
||||
zoomType: 'standard',
|
||||
//innerzoom/standard/reverse/drag
|
||||
zoomWidth: 300,
|
||||
//zoomWindow default width
|
||||
zoomHeight: 300,
|
||||
//zoomWindow default height
|
||||
xOffset: 10,
|
||||
//zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
|
||||
yOffset: 0,
|
||||
//zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
|
||||
position: "right",
|
||||
//zoomWindow default position
|
||||
preloadImages: true,
|
||||
//image preload
|
||||
preloadText: '',
|
||||
title: true,
|
||||
lens: true,
|
||||
imageOpacity: 0.4,
|
||||
alwaysOn: false,
|
||||
showEffect: 'show',
|
||||
//show/fadein
|
||||
hideEffect: 'hide',
|
||||
//hide/fadeout
|
||||
fadeinSpeed: 'slow',
|
||||
//fast/slow/number
|
||||
fadeoutSpeed: '2000' //fast/slow/number
|
||||
},
|
||||
disable: function (el) {
|
||||
var api = $(el).data('jqzoom');
|
||||
api.disable();
|
||||
return false;
|
||||
},
|
||||
enable: function (el) {
|
||||
var api = $(el).data('jqzoom');
|
||||
api.enable();
|
||||
return false;
|
||||
},
|
||||
disableAll: function (el) {
|
||||
jqzoompluging_disabled = true;
|
||||
},
|
||||
enableAll: function (el) {
|
||||
jqzoompluging_disabled = false;
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
754
web/js/photoGallery/jquery.jqzoom-core.js
Normal file
754
web/js/photoGallery/jquery.jqzoom-core.js
Normal file
@@ -0,0 +1,754 @@
|
||||
/*!
|
||||
* jQzoom Evolution Library v2.3 - Javascript Image magnifier
|
||||
* http://www.mind-projects.it
|
||||
*
|
||||
* Copyright 2011, Engineer Marco Renzi
|
||||
* Licensed under the BSD license.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of the organization nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* Date: 03 May 2011 22:16:00
|
||||
*/
|
||||
(function ($) {
|
||||
//GLOBAL VARIABLES
|
||||
var isIE6 = ($.browser.msie && $.browser.version < 7);
|
||||
var body = $(document.body);
|
||||
var window = $(window);
|
||||
var jqzoompluging_disabled = false; //disabilita globalmente il plugin
|
||||
$.fn.jqzoom = function (options) {
|
||||
return this.each(function () {
|
||||
var node = this.nodeName.toLowerCase();
|
||||
if (node == 'a') {
|
||||
new jqzoom(this, options);
|
||||
}
|
||||
});
|
||||
};
|
||||
jqzoom = function (el, options) {
|
||||
var api = null;
|
||||
api = $(el).data("jqzoom");
|
||||
if (api) return api;
|
||||
var obj = this;
|
||||
var settings = $.extend({}, $.jqzoom.defaults, options || {});
|
||||
obj.el = el;
|
||||
el.rel = $(el).attr('rel');
|
||||
//ANCHOR ELEMENT
|
||||
el.zoom_active = false;
|
||||
el.zoom_disabled = false; //to disable single zoom instance
|
||||
el.largeimageloading = false; //tell us if large image is loading
|
||||
el.largeimageloaded = false; //tell us if large image is loaded
|
||||
el.scale = {};
|
||||
el.timer = null;
|
||||
el.mousepos = {};
|
||||
el.mouseDown = false;
|
||||
$(el).css({
|
||||
'outline-style': 'none',
|
||||
'text-decoration': 'none'
|
||||
});
|
||||
//BASE IMAGE
|
||||
var img = $("img:eq(0)", el);
|
||||
el.title = $(el).attr('title');
|
||||
el.imagetitle = img.attr('title');
|
||||
var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle;
|
||||
var smallimage = new Smallimage(img);
|
||||
var lens = new Lens();
|
||||
var stage = new Stage();
|
||||
var largeimage = new Largeimage();
|
||||
var loader = new Loader();
|
||||
//preventing default click,allowing the onclick event [exmple: lightbox]
|
||||
$(el).bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
//setting the default zoomType if not in settings
|
||||
var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse'];
|
||||
if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) {
|
||||
settings.zoomType = 'standard';
|
||||
}
|
||||
$.extend(obj, {
|
||||
create: function () { //create the main objects
|
||||
//create ZoomPad
|
||||
if ($(".zoomPad", el).length == 0) {
|
||||
el.zoomPad = $('<div/>').addClass('zoomPad');
|
||||
img.wrap(el.zoomPad);
|
||||
}
|
||||
if(settings.zoomType == 'innerzoom'){
|
||||
settings.zoomWidth = smallimage.w;
|
||||
settings.zoomHeight = smallimage.h;
|
||||
}
|
||||
//creating ZoomPup
|
||||
if ($(".zoomPup", el).length == 0) {
|
||||
lens.append();
|
||||
}
|
||||
//creating zoomWindow
|
||||
if ($(".zoomWindow", el).length == 0) {
|
||||
stage.append();
|
||||
}
|
||||
//creating Preload
|
||||
if ($(".zoomPreload", el).length == 0) {
|
||||
loader.append();
|
||||
}
|
||||
//preloading images
|
||||
if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) {
|
||||
obj.load();
|
||||
}
|
||||
obj.init();
|
||||
},
|
||||
init: function () {
|
||||
//drag option
|
||||
if (settings.zoomType == 'drag') {
|
||||
$(".zoomPad", el).mousedown(function () {
|
||||
el.mouseDown = true;
|
||||
});
|
||||
$(".zoomPad", el).mouseup(function () {
|
||||
el.mouseDown = false;
|
||||
});
|
||||
document.body.ondragstart = function () {
|
||||
return false;
|
||||
};
|
||||
$(".zoomPad", el).css({
|
||||
cursor: 'default'
|
||||
});
|
||||
$(".zoomPup", el).css({
|
||||
cursor: 'move'
|
||||
});
|
||||
}
|
||||
if (settings.zoomType == 'innerzoom') {
|
||||
$(".zoomWrapper", el).css({
|
||||
cursor: 'crosshair'
|
||||
});
|
||||
}
|
||||
$(".zoomPad", el).bind('mouseenter mouseover', function (event) {
|
||||
|
||||
el.zoom_active = true;
|
||||
//if loaded then activate else load large image
|
||||
smallimage.fetchdata();
|
||||
if (el.largeimageloaded) {
|
||||
obj.activate(event);
|
||||
} else {
|
||||
obj.load();
|
||||
}
|
||||
});
|
||||
$(".zoomPad", el).bind('mouseleave', function (event) {
|
||||
obj.deactivate();
|
||||
});
|
||||
$(".zoomPad", el).bind('mousemove', function (e) {
|
||||
|
||||
//prevent fast mouse mevements not to fire the mouseout event
|
||||
if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) {
|
||||
lens.setcenter();
|
||||
return false;
|
||||
}
|
||||
el.zoom_active = true;
|
||||
if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) {
|
||||
obj.activate(e);
|
||||
}
|
||||
if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) {
|
||||
lens.setposition(e);
|
||||
}
|
||||
});
|
||||
var thumb_preload = new Array();
|
||||
var i = 0;
|
||||
//binding click event on thumbnails
|
||||
var thumblist = new Array();
|
||||
thumblist = $('a').filter(function () {
|
||||
var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
|
||||
var rel = $(this).attr('rel');
|
||||
if (regex.test(rel)) {
|
||||
return this;
|
||||
}
|
||||
});
|
||||
if (thumblist.length > 0) {
|
||||
//getting the first to the last
|
||||
var first = thumblist.splice(0, 1);
|
||||
thumblist.push(first);
|
||||
}
|
||||
thumblist.each(function () {
|
||||
//preloading thumbs
|
||||
if (settings.preloadImages) {
|
||||
var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")"));
|
||||
thumb_preload[i] = new Image();
|
||||
thumb_preload[i].src = thumb_options.largeimage;
|
||||
i++;
|
||||
}
|
||||
$(this).click(function (e) {
|
||||
if($(this).hasClass('zoomThumbActive')){
|
||||
return false;
|
||||
}
|
||||
thumblist.each(function () {
|
||||
$(this).removeClass('zoomThumbActive');
|
||||
});
|
||||
e.preventDefault();
|
||||
obj.swapimage(this);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
},
|
||||
load: function () {
|
||||
if (el.largeimageloaded == false && el.largeimageloading == false && largeimage.node.src.indexOf($(el).attr('href')) < 0) {
|
||||
var url = $(el).attr('href');
|
||||
el.largeimageloading = true;
|
||||
largeimage.loadimage(url);
|
||||
}
|
||||
},
|
||||
activate: function (e) {
|
||||
clearTimeout(el.timer);
|
||||
//show lens and zoomWindow
|
||||
lens.show();
|
||||
stage.show();
|
||||
},
|
||||
deactivate: function (e) {
|
||||
switch (settings.zoomType) {
|
||||
case 'drag':
|
||||
//nothing or lens.setcenter();
|
||||
break;
|
||||
default:
|
||||
img.attr('title', el.imagetitle);
|
||||
$(el).attr('title', el.title);
|
||||
if (settings.alwaysOn) {
|
||||
lens.setcenter();
|
||||
} else {
|
||||
stage.hide();
|
||||
lens.hide();
|
||||
}
|
||||
break;
|
||||
}
|
||||
el.zoom_active = false;
|
||||
},
|
||||
swapimage: function (link) {
|
||||
el.largeimageloading = false;
|
||||
el.largeimageloaded = false;
|
||||
var options = new Object();
|
||||
options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
|
||||
|
||||
if (options.smallimage && options.largeimage) {
|
||||
var smallimage = options.smallimage;
|
||||
var largeimage = options.largeimage;
|
||||
var title = $(link).attr('title');
|
||||
$(link).addClass('zoomThumbActive');
|
||||
$(el).attr('href', largeimage);
|
||||
img.attr('src', smallimage);
|
||||
if (title) {
|
||||
$(el).attr('title', title);
|
||||
} else {
|
||||
$(el).removeAttr('title');
|
||||
}
|
||||
img.load(function() {
|
||||
$('.zoomWrapper').css({
|
||||
width: Math.round($(this).attr('width')) + 'px'
|
||||
});
|
||||
$('.zoomWrapperImage').css({
|
||||
width: '100%',
|
||||
height: Math.round($(this).attr('height')) + 'px'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
lens.hide();
|
||||
stage.hide();
|
||||
obj.load();
|
||||
} else {
|
||||
alert('ERROR :: Missing parameter for largeimage or smallimage.');
|
||||
throw 'ERROR :: Missing parameter for largeimage or smallimage.';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
//sometimes image is already loaded and onload will not fire
|
||||
if (img[0].complete) {
|
||||
//fetching data from sallimage if was previously loaded
|
||||
smallimage.fetchdata();
|
||||
if ($(".zoomPad", el).length == 0) obj.create();
|
||||
}
|
||||
/*========================================================,
|
||||
| Smallimage
|
||||
|---------------------------------------------------------:
|
||||
| Base image into the anchor element
|
||||
`========================================================*/
|
||||
|
||||
function Smallimage(image) {
|
||||
var $obj = this;
|
||||
this.node = image[0];
|
||||
this.findborder = function () {
|
||||
var bordertop = 0;
|
||||
bordertop = image.css('border-top-width');
|
||||
btop = '';
|
||||
var borderleft = 0;
|
||||
borderleft = image.css('border-left-width');
|
||||
bleft = '';
|
||||
if (bordertop) {
|
||||
for (i = 0; i < 3; i++) {
|
||||
var x = [];
|
||||
x = bordertop.substr(i, 1);
|
||||
if (isNaN(x) == false) {
|
||||
btop = btop + '' + bordertop.substr(i, 1);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (borderleft) {
|
||||
for (i = 0; i < 3; i++) {
|
||||
if (!isNaN(borderleft.substr(i, 1))) {
|
||||
bleft = bleft + borderleft.substr(i, 1)
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
$obj.btop = (btop.length > 0) ? eval(btop) : 0;
|
||||
$obj.bleft = (bleft.length > 0) ? eval(bleft) : 0;
|
||||
};
|
||||
this.fetchdata = function () {
|
||||
$obj.findborder();
|
||||
$obj.w = image.width();
|
||||
$obj.h = image.height();
|
||||
$obj.ow = image.outerWidth();
|
||||
$obj.oh = image.outerHeight();
|
||||
$obj.pos = image.offset();
|
||||
$obj.pos.l = image.offset().left + $obj.bleft;
|
||||
$obj.pos.t = image.offset().top + $obj.btop;
|
||||
$obj.pos.r = $obj.w + $obj.pos.l;
|
||||
$obj.pos.b = $obj.h + $obj.pos.t;
|
||||
$obj.rightlimit = image.offset().left + $obj.ow;
|
||||
$obj.bottomlimit = image.offset().top + $obj.oh;
|
||||
|
||||
};
|
||||
this.node.onerror = function () {
|
||||
alert('Problems while loading image.');
|
||||
throw 'Problems while loading image.';
|
||||
};
|
||||
this.node.onload = function () {
|
||||
$obj.fetchdata();
|
||||
if ($(".zoomPad", el).length == 0) obj.create();
|
||||
};
|
||||
return $obj;
|
||||
};
|
||||
/*========================================================,
|
||||
| Loader
|
||||
|---------------------------------------------------------:
|
||||
| Show that the large image is loading
|
||||
`========================================================*/
|
||||
|
||||
function Loader() {
|
||||
var $obj = this;
|
||||
this.append = function () {
|
||||
this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText);
|
||||
$('.zoomPad', el).append(this.node);
|
||||
};
|
||||
this.show = function () {
|
||||
|
||||
this.node.top = ($(".zoomPad").height() - this.node.height()) / 2;
|
||||
this.node.left = ($(".zoomPad").width() - this.node.width()) / 2;
|
||||
//setting position
|
||||
this.node.css({
|
||||
top: this.node.top,
|
||||
left: this.node.left,
|
||||
position: 'absolute',
|
||||
visibility: 'visible'
|
||||
});
|
||||
};
|
||||
this.hide = function () {
|
||||
this.node.css('visibility', 'hidden');
|
||||
};
|
||||
return this;
|
||||
}
|
||||
/*========================================================,
|
||||
| Lens
|
||||
|---------------------------------------------------------:
|
||||
| Lens over the image
|
||||
`========================================================*/
|
||||
|
||||
function Lens() {
|
||||
var $obj = this;
|
||||
this.node = $('<div/>').addClass('zoomPup');
|
||||
//this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
|
||||
this.append = function () {
|
||||
$('.zoomPad', el).append($(this.node).hide());
|
||||
if (settings.zoomType == 'reverse') {
|
||||
this.image = new Image();
|
||||
this.image.src = smallimage.node.src; // fires off async
|
||||
$(this.node).empty().append(this.image);
|
||||
}
|
||||
};
|
||||
this.setdimensions = function () {
|
||||
this.node.w = (parseInt((smallimage.w ) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(smallimage.w / el.scale.x));
|
||||
this.node.h = (parseInt((smallimage.h) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(smallimage.h / el.scale.y));
|
||||
this.node.top = (smallimage.oh - this.node.h - 2) / 2;
|
||||
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
|
||||
//centering lens
|
||||
this.node.css({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.node.w + 'px',
|
||||
height: this.node.h + 'px',
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
borderWidth: 1 + 'px'
|
||||
});
|
||||
|
||||
|
||||
|
||||
if (settings.zoomType == 'reverse') {
|
||||
this.image.src = smallimage.node.src;
|
||||
$(this.node).css({
|
||||
'opacity': 1
|
||||
});
|
||||
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
this.setcenter = function () {
|
||||
//calculating center position
|
||||
this.node.top = (smallimage.oh - this.node.h - 2) / 2;
|
||||
this.node.left = (smallimage.ow - this.node.w - 2) / 2;
|
||||
//centering lens
|
||||
this.node.css({
|
||||
top: this.node.top,
|
||||
left: this.node.left
|
||||
});
|
||||
if (settings.zoomType == 'reverse') {
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
|
||||
}
|
||||
//centering large image
|
||||
largeimage.setposition();
|
||||
};
|
||||
this.setposition = function (e) {
|
||||
|
||||
el.mousepos.x = e.pageX;
|
||||
el.mousepos.y = e.pageY;
|
||||
var lensleft = 0;
|
||||
var lenstop = 0;
|
||||
|
||||
function overleft(lens) {
|
||||
return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l;
|
||||
}
|
||||
|
||||
function overright(lens) {
|
||||
return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r;
|
||||
|
||||
}
|
||||
|
||||
function overtop(lens) {
|
||||
return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t;
|
||||
}
|
||||
|
||||
function overbottom(lens) {
|
||||
return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b;
|
||||
}
|
||||
|
||||
lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2;
|
||||
lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2;
|
||||
if (overleft(this.node)) {
|
||||
lensleft = smallimage.bleft - 1;
|
||||
} else if (overright(this.node)) {
|
||||
lensleft = smallimage.w + smallimage.bleft - this.node.w - 1;
|
||||
}
|
||||
if (overtop(this.node)) {
|
||||
lenstop = smallimage.btop - 1;
|
||||
} else if (overbottom(this.node)) {
|
||||
lenstop = smallimage.h + smallimage.btop - this.node.h - 1;
|
||||
}
|
||||
|
||||
this.node.left = lensleft;
|
||||
this.node.top = lenstop;
|
||||
this.node.css({
|
||||
'left': lensleft + 'px',
|
||||
'top': lenstop + 'px'
|
||||
});
|
||||
if (settings.zoomType == 'reverse') {
|
||||
if ($.browser.msie && $.browser.version > 7) {
|
||||
$(this.node).empty().append(this.image);
|
||||
}
|
||||
|
||||
$(this.image).css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
left: -(this.node.left + 1 - smallimage.bleft) + 'px',
|
||||
top: -(this.node.top + 1 - smallimage.btop) + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
largeimage.setposition();
|
||||
};
|
||||
this.hide = function () {
|
||||
img.css({
|
||||
'opacity': 1
|
||||
});
|
||||
this.node.hide();
|
||||
};
|
||||
this.show = function () {
|
||||
|
||||
if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) {
|
||||
this.node.show();
|
||||
}
|
||||
|
||||
if (settings.zoomType == 'reverse') {
|
||||
img.css({
|
||||
'opacity': settings.imageOpacity
|
||||
});
|
||||
}
|
||||
};
|
||||
this.getoffset = function () {
|
||||
var o = {};
|
||||
o.left = $obj.node.left;
|
||||
o.top = $obj.node.top;
|
||||
return o;
|
||||
};
|
||||
return this;
|
||||
};
|
||||
/*========================================================,
|
||||
| Stage
|
||||
|---------------------------------------------------------:
|
||||
| Window area that contains the large image
|
||||
`========================================================*/
|
||||
|
||||
function Stage() {
|
||||
var $obj = this;
|
||||
this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
|
||||
this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
|
||||
this.setposition = function () {
|
||||
this.node.leftpos = 0;
|
||||
this.node.toppos = 0;
|
||||
if (settings.zoomType != 'innerzoom') {
|
||||
//positioning
|
||||
switch (settings.position) {
|
||||
case "left":
|
||||
this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset));
|
||||
this.node.toppos = Math.abs(settings.yOffset);
|
||||
break;
|
||||
case "top":
|
||||
this.node.leftpos = Math.abs(settings.xOffset);
|
||||
this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset));
|
||||
break;
|
||||
case "bottom":
|
||||
this.node.leftpos = Math.abs(settings.xOffset);
|
||||
this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset));
|
||||
break;
|
||||
default:
|
||||
this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
|
||||
this.node.toppos = Math.abs(settings.yOffset);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.node.css({
|
||||
'left': this.node.leftpos + 'px',
|
||||
'top': this.node.toppos + 'px'
|
||||
});
|
||||
return this;
|
||||
};
|
||||
this.append = function () {
|
||||
$('.zoomPad', el).append(this.node);
|
||||
this.node.css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
zIndex: 5001
|
||||
});
|
||||
if (settings.zoomType == 'innerzoom') {
|
||||
this.node.css({
|
||||
cursor: 'default'
|
||||
});
|
||||
var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
|
||||
$('.zoomWrapper', this.node).css({
|
||||
borderWidth: thickness + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
$('.zoomWrapper', this.node).css({
|
||||
width: Math.round(smallimage.w) + 'px' ,
|
||||
borderWidth: thickness + 'px'
|
||||
});
|
||||
$('.zoomWrapperImage', this.node).css({
|
||||
width: '100%',
|
||||
height: Math.round(smallimage.h) + 'px'
|
||||
});
|
||||
//zoom title
|
||||
$('.zoomWrapperTitle', this.node).css({
|
||||
width: '100%',
|
||||
position: 'absolute'
|
||||
});
|
||||
|
||||
$('.zoomWrapperTitle', this.node).hide();
|
||||
if (settings.title && zoomtitle && zoomtitle.length > 0) {
|
||||
$('.zoomWrapperTitle', this.node).html(zoomtitle).show();
|
||||
}
|
||||
|
||||
$obj.setposition();
|
||||
};
|
||||
this.hide = function () {
|
||||
switch (settings.hideEffect) {
|
||||
case 'fadeout':
|
||||
this.node.fadeOut(settings.fadeoutSpeed, function () {});
|
||||
break;
|
||||
default:
|
||||
this.node.hide();
|
||||
break;
|
||||
}
|
||||
this.ieframe.hide();
|
||||
};
|
||||
this.show = function () {
|
||||
switch (settings.showEffect) {
|
||||
case 'fadein':
|
||||
this.node.fadeIn();
|
||||
this.node.fadeIn(settings.fadeinSpeed, function () {});
|
||||
break;
|
||||
default:
|
||||
this.node.show();
|
||||
break;
|
||||
}
|
||||
if (isIE6 && settings.zoomType != 'innerzoom') {
|
||||
this.ieframe.width = this.node.width();
|
||||
this.ieframe.height = this.node.height();
|
||||
this.ieframe.left = this.node.leftpos;
|
||||
this.ieframe.top = this.node.toppos;
|
||||
this.ieframe.css({
|
||||
display: 'block',
|
||||
position: "absolute",
|
||||
left: this.ieframe.left,
|
||||
top: this.ieframe.top,
|
||||
zIndex: 99,
|
||||
width: this.ieframe.width + 'px',
|
||||
height: this.ieframe.height + 'px'
|
||||
});
|
||||
$('.zoomPad', el).append(this.ieframe);
|
||||
this.ieframe.show();
|
||||
};
|
||||
};
|
||||
};
|
||||
/*========================================================,
|
||||
| LargeImage
|
||||
|---------------------------------------------------------:
|
||||
| The large detailed image
|
||||
`========================================================*/
|
||||
|
||||
function Largeimage() {
|
||||
var $obj = this;
|
||||
this.node = new Image();
|
||||
this.loadimage = function (url) {
|
||||
//showing preload
|
||||
loader.show();
|
||||
this.url = url;
|
||||
this.node.style.position = 'absolute';
|
||||
this.node.style.border = '0px';
|
||||
this.node.style.display = 'none';
|
||||
this.node.style.left = '-5000px';
|
||||
this.node.style.top = '0px';
|
||||
document.body.appendChild(this.node);
|
||||
this.node.src = url; // fires off async
|
||||
};
|
||||
this.fetchdata = function () {
|
||||
var image = $(this.node);
|
||||
var scale = {};
|
||||
this.node.style.display = 'block';
|
||||
$obj.w = image.width();
|
||||
$obj.h = image.height();
|
||||
$obj.pos = image.offset();
|
||||
$obj.pos.l = image.offset().left;
|
||||
$obj.pos.t = image.offset().top;
|
||||
$obj.pos.r = $obj.w + $obj.pos.l;
|
||||
$obj.pos.b = $obj.h + $obj.pos.t;
|
||||
scale.x = ($obj.w / smallimage.w);
|
||||
scale.y = ($obj.h / smallimage.h);
|
||||
el.scale = scale;
|
||||
//document.body.removeChild(this.node);
|
||||
$('.zoomWrapperImage', el).empty().append(this.node);
|
||||
//setting lens dimensions;
|
||||
lens.setdimensions();
|
||||
};
|
||||
this.node.onerror = function () {
|
||||
//alert('Problems while loading the big image.');
|
||||
//throw 'Problems while loading the big image.';
|
||||
|
||||
};
|
||||
this.node.onload = function () {
|
||||
//fetching data
|
||||
$obj.fetchdata();
|
||||
loader.hide();
|
||||
el.largeimageloading = false;
|
||||
el.largeimageloaded = true;
|
||||
if (settings.zoomType == 'drag' || settings.alwaysOn) {
|
||||
lens.show();
|
||||
stage.show();
|
||||
lens.setcenter();
|
||||
}
|
||||
};
|
||||
this.setposition = function () {
|
||||
var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
|
||||
var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
|
||||
$(this.node).css({
|
||||
'left': left + 'px',
|
||||
'top': top + 'px'
|
||||
});
|
||||
};
|
||||
return this;
|
||||
};
|
||||
$(el).data("jqzoom", obj);
|
||||
};
|
||||
//es. $.jqzoom.disable('#jqzoom1');
|
||||
$.jqzoom = {
|
||||
defaults: {
|
||||
zoomType: 'standard',
|
||||
//innerzoom/standard/reverse/drag
|
||||
zoomWidth: 300,
|
||||
//zoomWindow default width
|
||||
zoomHeight: 300,
|
||||
//zoomWindow default height
|
||||
xOffset: 10,
|
||||
//zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
|
||||
yOffset: 0,
|
||||
//zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
|
||||
position: "right",
|
||||
//zoomWindow default position
|
||||
preloadImages: true,
|
||||
//image preload
|
||||
preloadText: '',
|
||||
title: true,
|
||||
lens: true,
|
||||
imageOpacity: 0.4,
|
||||
alwaysOn: false,
|
||||
showEffect: 'show',
|
||||
//show/fadein
|
||||
hideEffect: 'hide',
|
||||
//hide/fadeout
|
||||
fadeinSpeed: 'slow',
|
||||
//fast/slow/number
|
||||
fadeoutSpeed: '2000' //fast/slow/number
|
||||
},
|
||||
disable: function (el) {
|
||||
var api = $(el).data('jqzoom');
|
||||
api.disable();
|
||||
return false;
|
||||
},
|
||||
enable: function (el) {
|
||||
var api = $(el).data('jqzoom');
|
||||
api.enable();
|
||||
return false;
|
||||
},
|
||||
disableAll: function (el) {
|
||||
jqzoompluging_disabled = true;
|
||||
},
|
||||
enableAll: function (el) {
|
||||
jqzoompluging_disabled = false;
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
495
web/js/photoGallery/jquery.lightbox-0.5.js
Normal file
495
web/js/photoGallery/jquery.lightbox-0.5.js
Normal file
@@ -0,0 +1,495 @@
|
||||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.js
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
|
||||
// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
|
||||
(function($) {
|
||||
/**
|
||||
* $ is an alias to jQuery object
|
||||
*
|
||||
*/
|
||||
$.fn.lightBox = function(settings) {
|
||||
// Settings to configure the jQuery lightBox plugin how you like
|
||||
settings = jQuery.extend({
|
||||
// Configuration related to overlay
|
||||
overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
|
||||
overlayOpacity: 0.4, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
|
||||
// Configuration related to navigation
|
||||
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
|
||||
// Configuration related to images
|
||||
imageLoading: '/images/frontend/theme/default2/loading.gif', // (string) Path and the name of the loading icon
|
||||
imageBtnPrev: '/images/frontend/theme/default2/prev.gif', // (string) Path and the name of the prev button image
|
||||
imageBtnNext: '/images/frontend/theme/default2/next.gif', // (string) Path and the name of the next button image
|
||||
imageBtnClose: '/images/frontend/theme/default2/buttons/close.png', // (string) Path and the name of the close btn
|
||||
imageBlank: '/images/frontend/theme/default2/blank.gif', // (string) Path and the name of a blank image (one pixel)
|
||||
// Configuration related to container image box
|
||||
containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
|
||||
containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
|
||||
// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
|
||||
txtImage: 'Image', // (string) Specify text "Image"
|
||||
txtOf: 'of', // (string) Specify text "of"
|
||||
// Configuration related to keyboard navigation
|
||||
keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
|
||||
keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image
|
||||
keyToNext: 'n', // (string) (n = next) Letter to show the next image.
|
||||
// Don't alter these variables in any way
|
||||
imageArray: [],
|
||||
activeImage: 0
|
||||
},settings);
|
||||
// Caching the jQuery object with all elements matched
|
||||
var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Initializing the plugin calling the start function
|
||||
*
|
||||
* @return boolean false
|
||||
*/
|
||||
function _initialize() {
|
||||
var current = this;
|
||||
|
||||
var list = {};
|
||||
|
||||
var images = $(jQueryMatchedObj).filter(function() {
|
||||
if (list[this.getAttribute('href')] == undefined)
|
||||
{
|
||||
list[this.getAttribute('href')] = true;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
_start(current,images); // This, in this context, refer to object (link) which the user have clicked
|
||||
return false; // Avoid the browser following the link
|
||||
}
|
||||
/**
|
||||
* Start the jQuery lightBox plugin
|
||||
*
|
||||
* @param object objClicked The object (link) whick the user have clicked
|
||||
* @param object jQueryMatchedObj The jQuery object with all elements matched
|
||||
*/
|
||||
function _start(objClicked,jQueryMatchedObj) {
|
||||
// Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'hidden' });
|
||||
// Call the function to create the markup structure; style some elements; assign events in some elements.
|
||||
_set_interface();
|
||||
// Unset total images in imageArray
|
||||
settings.imageArray.length = 0;
|
||||
// Unset image active information
|
||||
settings.activeImage = 0;
|
||||
|
||||
settings.imageNames = {};
|
||||
|
||||
// We have an image set? Or just an image? Let's see it.
|
||||
if ( jQueryMatchedObj.length == 1 ) {
|
||||
|
||||
|
||||
settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
|
||||
} else {
|
||||
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
|
||||
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
|
||||
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
|
||||
|
||||
}
|
||||
}
|
||||
while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
|
||||
settings.activeImage++;
|
||||
}
|
||||
// Call the function that prepares image exibition
|
||||
_set_image_to_view();
|
||||
}
|
||||
/**
|
||||
* Create the jQuery lightBox plugin interface
|
||||
*
|
||||
* The HTML markup will be like that:
|
||||
<div id="jquery-overlay"></div>
|
||||
<div id="jquery-lightbox">
|
||||
<div id="lightbox-container-image-box">
|
||||
<div id="lightbox-container-image">
|
||||
<img src="../fotos/XX.jpg" id="lightbox-image">
|
||||
<div id="lightbox-nav">
|
||||
<a href="#" id="lightbox-nav-btnPrev"></a>
|
||||
<a href="#" id="lightbox-nav-btnNext"></a>
|
||||
</div>
|
||||
<div id="lightbox-loading">
|
||||
<a href="#" id="lightbox-loading-link">
|
||||
<img src="../images/lightbox-ico-loading.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox-container-image-data-box">
|
||||
<div id="lightbox-container-image-data">
|
||||
<div id="lightbox-image-details">
|
||||
<span id="lightbox-image-details-caption"></span>
|
||||
<span id="lightbox-image-details-currentNumber"></span>
|
||||
</div>
|
||||
<div id="lightbox-secNav">
|
||||
<a href="#" id="lightbox-secNav-btnClose">
|
||||
<img src="../images/lightbox-btn-close.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
*/
|
||||
function _set_interface() {
|
||||
// Apply the HTML markup into body tag
|
||||
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div></div></div></div>');
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
backgroundColor: settings.overlayBgColor,
|
||||
opacity: settings.overlayOpacity,
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
}).fadeIn();
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
}).show();
|
||||
// Assigning click events in elements to close overlay
|
||||
$('#jquery-overlay,#jquery-lightbox').click(function() {
|
||||
_finish();
|
||||
});
|
||||
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
|
||||
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
|
||||
_finish();
|
||||
return false;
|
||||
});
|
||||
// If window was resized, calculate the new overlay dimensions
|
||||
$(window).resize(function() {
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
});
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Prepares image exibition; doing a image's preloader to calculate it's size
|
||||
*
|
||||
*/
|
||||
function _set_image_to_view() { // show the loading
|
||||
// Show the loading
|
||||
$('#lightbox-loading').show();
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
} else {
|
||||
// Hide some elements
|
||||
$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
}
|
||||
// Image preload process
|
||||
var objImagePreloader = new Image();
|
||||
objImagePreloader.onload = function() {
|
||||
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
|
||||
// Perfomance an effect in the image container resizing it
|
||||
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
|
||||
// clear onLoad, IE behaves irratically with animated gifs otherwise
|
||||
objImagePreloader.onload=function(){};
|
||||
};
|
||||
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
|
||||
};
|
||||
/**
|
||||
* Perfomance an effect in the image container resizing it
|
||||
*
|
||||
* @param integer intImageWidth The image's width that will be showed
|
||||
* @param integer intImageHeight The image's height that will be showed
|
||||
*/
|
||||
function _resize_container_image_box(intImageWidth,intImageHeight) {
|
||||
// Get current width and height
|
||||
var intCurrentWidth = $('#lightbox-container-image-box').width();
|
||||
var intCurrentHeight = $('#lightbox-container-image-box').height();
|
||||
// Get the width and height of the selected image plus the padding
|
||||
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image's width and the left and right padding value
|
||||
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image's height and the left and right padding value
|
||||
// Diferences
|
||||
var intDiffW = intCurrentWidth - intWidth;
|
||||
var intDiffH = intCurrentHeight - intHeight;
|
||||
// Perfomance the effect
|
||||
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
|
||||
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
|
||||
if ( $.browser.msie ) {
|
||||
___pause(250);
|
||||
} else {
|
||||
___pause(100);
|
||||
}
|
||||
}
|
||||
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
|
||||
};
|
||||
/**
|
||||
* Show the prepared image
|
||||
*
|
||||
*/
|
||||
function _show_image() {
|
||||
$('#lightbox-loading').hide();
|
||||
$('#lightbox-image').fadeIn(function() {
|
||||
_show_image_data();
|
||||
_set_navigation();
|
||||
});
|
||||
_preload_neighbor_images();
|
||||
};
|
||||
/**
|
||||
* Show the image information
|
||||
*
|
||||
*/
|
||||
function _show_image_data() {
|
||||
$('#lightbox-container-image-data-box').slideDown('fast');
|
||||
$('#lightbox-image-details-caption').hide();
|
||||
if ( settings.imageArray[settings.activeImage][1] ) {
|
||||
$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
|
||||
}
|
||||
// If we have a image set, display 'Image X of X'
|
||||
if ( settings.imageArray.length > 1 ) {
|
||||
$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Display the button navigations
|
||||
*
|
||||
*/
|
||||
function _set_navigation() {
|
||||
$('#lightbox-nav').show();
|
||||
|
||||
// Instead to define this configuration in CSS file, we define here. And it's need to IE. Just.
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
|
||||
// Show the prev button, if not the first image in set
|
||||
if ( settings.activeImage != 0 ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnPrev').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show the next button, if not the last image in set
|
||||
if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnNext').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
// Enable keyboard navigation
|
||||
_enable_keyboard_navigation();
|
||||
}
|
||||
/**
|
||||
* Enable a support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _enable_keyboard_navigation() {
|
||||
$(document).keydown(function(objEvent) {
|
||||
_keyboard_action(objEvent);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Disable the support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _disable_keyboard_navigation() {
|
||||
$(document).unbind();
|
||||
}
|
||||
/**
|
||||
* Perform the keyboard actions
|
||||
*
|
||||
*/
|
||||
function _keyboard_action(objEvent) {
|
||||
// To ie
|
||||
if ( objEvent == null ) {
|
||||
keycode = event.keyCode;
|
||||
escapeKey = 27;
|
||||
// To Mozilla
|
||||
} else {
|
||||
keycode = objEvent.keyCode;
|
||||
escapeKey = objEvent.DOM_VK_ESCAPE;
|
||||
}
|
||||
// Get the key in lower case form
|
||||
key = String.fromCharCode(keycode).toLowerCase();
|
||||
// Verify the keys to close the ligthBox
|
||||
if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
|
||||
_finish();
|
||||
}
|
||||
// Verify the key to show the previous image
|
||||
if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
|
||||
// If we're not showing the first image, call the previous
|
||||
if ( settings.activeImage != 0 ) {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
// Verify the key to show the next image
|
||||
if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
|
||||
// If we're not showing the last image, call the next
|
||||
if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Preload prev and next images being showed
|
||||
*
|
||||
*/
|
||||
function _preload_neighbor_images() {
|
||||
if ( (settings.imageArray.length -1) > settings.activeImage ) {
|
||||
objNext = new Image();
|
||||
objNext.src = settings.imageArray[settings.activeImage + 1][0];
|
||||
}
|
||||
if ( settings.activeImage > 0 ) {
|
||||
objPrev = new Image();
|
||||
objPrev.src = settings.imageArray[settings.activeImage -1][0];
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Remove jQuery lightBox plugin HTML markup
|
||||
*
|
||||
*/
|
||||
function _finish() {
|
||||
$('#jquery-lightbox').remove();
|
||||
$('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
|
||||
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'visible' });
|
||||
}
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageSize() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with page width, height and window width, height
|
||||
*/
|
||||
function ___getPageSize() {
|
||||
var xScroll, yScroll;
|
||||
if (window.innerHeight && window.scrollMaxY) {
|
||||
xScroll = window.innerWidth + window.scrollMaxX;
|
||||
yScroll = window.innerHeight + window.scrollMaxY;
|
||||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||||
xScroll = document.body.scrollWidth;
|
||||
yScroll = document.body.scrollHeight;
|
||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
xScroll = document.body.offsetWidth;
|
||||
yScroll = document.body.offsetHeight;
|
||||
}
|
||||
var windowWidth, windowHeight;
|
||||
if (self.innerHeight) { // all except Explorer
|
||||
if(document.documentElement.clientWidth){
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
} else {
|
||||
windowWidth = self.innerWidth;
|
||||
}
|
||||
windowHeight = self.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
windowHeight = document.documentElement.clientHeight;
|
||||
} else if (document.body) { // other Explorers
|
||||
windowWidth = document.body.clientWidth;
|
||||
windowHeight = document.body.clientHeight;
|
||||
}
|
||||
// for small pages with total height less then height of the viewport
|
||||
if(yScroll < windowHeight){
|
||||
pageHeight = windowHeight;
|
||||
} else {
|
||||
pageHeight = yScroll;
|
||||
}
|
||||
// for small pages with total width less then width of the viewport
|
||||
if(xScroll < windowWidth){
|
||||
pageWidth = xScroll;
|
||||
} else {
|
||||
pageWidth = windowWidth;
|
||||
}
|
||||
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
|
||||
return arrayPageSize;
|
||||
};
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageScroll() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with x,y page scroll values.
|
||||
*/
|
||||
function ___getPageScroll() {
|
||||
var xScroll, yScroll;
|
||||
if (self.pageYOffset) {
|
||||
yScroll = self.pageYOffset;
|
||||
xScroll = self.pageXOffset;
|
||||
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
||||
yScroll = document.documentElement.scrollTop;
|
||||
xScroll = document.documentElement.scrollLeft;
|
||||
} else if (document.body) {// all other Explorers
|
||||
yScroll = document.body.scrollTop;
|
||||
xScroll = document.body.scrollLeft;
|
||||
}
|
||||
arrayPageScroll = new Array(xScroll,yScroll);
|
||||
return arrayPageScroll;
|
||||
};
|
||||
/**
|
||||
* Stop the code execution from a escified time in milisecond
|
||||
*
|
||||
*/
|
||||
function ___pause(ms) {
|
||||
var date = new Date();
|
||||
curDate = null;
|
||||
do { var curDate = new Date(); }
|
||||
while ( curDate - date < ms);
|
||||
};
|
||||
// Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
|
||||
return this.unbind('click').click(_initialize);
|
||||
};
|
||||
})(jQuery); // Call and execute the function immediately passing the jQuery object
|
||||
817
web/js/photoGallery/lightbox.js
Normal file
817
web/js/photoGallery/lightbox.js
Normal file
@@ -0,0 +1,817 @@
|
||||
// -----------------------------------------------------------------------------------
|
||||
//
|
||||
// Lightbox v2.03.3
|
||||
// by Lokesh Dhakar - http://www.huddletogether.com
|
||||
// 5/21/06
|
||||
//
|
||||
// For more information on this script, visit:
|
||||
// http://huddletogether.com/projects/lightbox2/
|
||||
//
|
||||
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
||||
//
|
||||
// Credit also due to those who have helped, inspired, and made their code available to the public.
|
||||
// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others.
|
||||
//
|
||||
//
|
||||
// -----------------------------------------------------------------------------------
|
||||
/*
|
||||
|
||||
Table of Contents
|
||||
-----------------
|
||||
Configuration
|
||||
Global Variables
|
||||
|
||||
Extending Built-in Objects
|
||||
- Object.extend(Element)
|
||||
- Array.prototype.removeDuplicates()
|
||||
- Array.prototype.empty()
|
||||
|
||||
Lightbox Class Declaration
|
||||
- initialize()
|
||||
- updateImageList()
|
||||
- start()
|
||||
- changeImage()
|
||||
- resizeImageContainer()
|
||||
- showImage()
|
||||
- updateDetails()
|
||||
- updateNav()
|
||||
- enableKeyboardNav()
|
||||
- disableKeyboardNav()
|
||||
- keyboardAction()
|
||||
- preloadNeighborImages()
|
||||
- end()
|
||||
|
||||
Miscellaneous Functions
|
||||
- getPageScroll()
|
||||
- getPageSize()
|
||||
- getKey()
|
||||
- listenKey()
|
||||
- showSelectBoxes()
|
||||
- hideSelectBoxes()
|
||||
- showFlash()
|
||||
- hideFlash()
|
||||
- pause()
|
||||
- initLightbox()
|
||||
|
||||
Function Calls
|
||||
- addLoadEvent(initLightbox)
|
||||
|
||||
*/
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Configuration
|
||||
//
|
||||
var fileLoadingImage = "/images/frontend/theme/default/loading.gif";
|
||||
var fileBottomNavCloseImage = "/images/frontend/theme/default/close.gif";
|
||||
|
||||
var overlayOpacity = 0.3; // controls transparency of shadow overlay
|
||||
|
||||
var animate = true; // toggles resizing animations
|
||||
var resizeSpeed = 37; // controls the speed of the image resizing animations (1=slowest and 10=fastest)
|
||||
|
||||
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Global Variables
|
||||
//
|
||||
var imageArray = new Array;
|
||||
var activeImage;
|
||||
|
||||
if(animate == true){
|
||||
overlayDuration = 0.2; // shadow fade in/out duration
|
||||
if(resizeSpeed > 10){ resizeSpeed = 10;}
|
||||
if(resizeSpeed < 1){ resizeSpeed = 1;}
|
||||
resizeDuration = (11 - resizeSpeed) * 0.15;
|
||||
} else {
|
||||
overlayDuration = 0;
|
||||
resizeDuration = 0;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Additional methods for Element added by SU, Couloir
|
||||
// - further additions by Lokesh Dhakar (huddletogether.com)
|
||||
//
|
||||
Object.extend(Element, {
|
||||
getWidth: function(element) {
|
||||
element = $(element);
|
||||
return element.offsetWidth;
|
||||
},
|
||||
setWidth: function(element,w) {
|
||||
element = $(element);
|
||||
element.style.width = w +"px";
|
||||
},
|
||||
setHeight: function(element,h) {
|
||||
element = $(element);
|
||||
element.style.height = h +"px";
|
||||
},
|
||||
setTop: function(element,t) {
|
||||
element = $(element);
|
||||
element.style.top = t +"px";
|
||||
},
|
||||
setLeft: function(element,l) {
|
||||
element = $(element);
|
||||
element.style.left = l +"px";
|
||||
},
|
||||
setSrc: function(element,src) {
|
||||
element = $(element);
|
||||
element.src = src;
|
||||
},
|
||||
setHref: function(element,href) {
|
||||
element = $(element);
|
||||
element.href = href;
|
||||
},
|
||||
setInnerHTML: function(element,content) {
|
||||
element = $(element);
|
||||
element.innerHTML = content;
|
||||
}
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Extending built-in Array object
|
||||
// - array.removeDuplicates()
|
||||
// - array.empty()
|
||||
//
|
||||
Array.prototype.removeDuplicates = function () {
|
||||
for(i = 0; i < this.length; i++){
|
||||
for(j = this.length-1; j>i; j--){
|
||||
if(this[i][0] == this[j][0]){
|
||||
this.splice(j,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
Array.prototype.empty = function () {
|
||||
for(i = 0; i <= this.length; i++){
|
||||
this.shift();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Lightbox Class Declaration
|
||||
// - initialize()
|
||||
// - start()
|
||||
// - changeImage()
|
||||
// - resizeImageContainer()
|
||||
// - showImage()
|
||||
// - updateDetails()
|
||||
// - updateNav()
|
||||
// - enableKeyboardNav()
|
||||
// - disableKeyboardNav()
|
||||
// - keyboardNavAction()
|
||||
// - preloadNeighborImages()
|
||||
// - end()
|
||||
//
|
||||
// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
|
||||
//
|
||||
var Lightbox = Class.create();
|
||||
|
||||
Lightbox.prototype = {
|
||||
|
||||
// initialize()
|
||||
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
|
||||
// the function inserts html at the bottom of the page which is used to display the shadow
|
||||
// overlay and the image container.
|
||||
//
|
||||
initialize: function() {
|
||||
|
||||
this.updateImageList();
|
||||
|
||||
// Code inserts html at the bottom of the page that looks similar to this:
|
||||
//
|
||||
// <div id="overlay"></div>
|
||||
// <div id="lightbox">
|
||||
// <div id="outerImageContainer">
|
||||
// <div id="imageContainer">
|
||||
// <img id="lightboxImage">
|
||||
// <div style="" id="hoverNav">
|
||||
// <a href="#" id="prevLink"></a>
|
||||
// <a href="#" id="nextLink"></a>
|
||||
// </div>
|
||||
// <div id="loading">
|
||||
// <a href="#" id="loadingLink">
|
||||
// <img src="images/loading.gif">
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div id="imageDataContainer">
|
||||
// <div id="imageData">
|
||||
// <div id="imageDetails">
|
||||
// <span id="caption"></span>
|
||||
// <span id="numberDisplay"></span>
|
||||
// </div>
|
||||
// <div id="bottomNav">
|
||||
// <a href="#" id="bottomNavClose">
|
||||
// <img src="images/close.gif">
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
|
||||
var objBody = document.getElementsByTagName("body").item(0);
|
||||
|
||||
var objOverlay = document.createElement("div");
|
||||
objOverlay.setAttribute('id','overlay');
|
||||
objOverlay.style.display = 'none';
|
||||
objOverlay.onclick = function() { myLightbox.end(); }
|
||||
objBody.appendChild(objOverlay);
|
||||
|
||||
var objLightbox = document.createElement("div");
|
||||
objLightbox.setAttribute('id','lightbox');
|
||||
objLightbox.style.display = 'none';
|
||||
objLightbox.onclick = function(e) { // close Lightbox is user clicks shadow overlay
|
||||
if (!e) var e = window.event;
|
||||
var clickObj = Event.element(e).id;
|
||||
if ( clickObj == 'lightbox') {
|
||||
myLightbox.end();
|
||||
}
|
||||
};
|
||||
objBody.appendChild(objLightbox);
|
||||
|
||||
var objOuterImageContainer = document.createElement("div");
|
||||
objOuterImageContainer.setAttribute('id','outerImageContainer');
|
||||
objLightbox.appendChild(objOuterImageContainer);
|
||||
|
||||
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
|
||||
// If animations are turned off, it will be hidden as to prevent a flicker of a
|
||||
// white 250 by 250 box.
|
||||
if(animate){
|
||||
Element.setWidth('outerImageContainer', 250);
|
||||
Element.setHeight('outerImageContainer', 250);
|
||||
} else {
|
||||
Element.setWidth('outerImageContainer', 1);
|
||||
Element.setHeight('outerImageContainer', 1);
|
||||
}
|
||||
|
||||
var objImageContainer = document.createElement("div");
|
||||
objImageContainer.setAttribute('id','imageContainer');
|
||||
objOuterImageContainer.appendChild(objImageContainer);
|
||||
|
||||
var objLightboxImage = document.createElement("img");
|
||||
objLightboxImage.setAttribute('id','lightboxImage');
|
||||
objImageContainer.appendChild(objLightboxImage);
|
||||
|
||||
var objHoverNav = document.createElement("div");
|
||||
objHoverNav.setAttribute('id','hoverNav');
|
||||
objImageContainer.appendChild(objHoverNav);
|
||||
|
||||
var objPrevLink = document.createElement("a");
|
||||
objPrevLink.setAttribute('id','prevLink');
|
||||
objPrevLink.setAttribute('href','#');
|
||||
objHoverNav.appendChild(objPrevLink);
|
||||
|
||||
var objNextLink = document.createElement("a");
|
||||
objNextLink.setAttribute('id','nextLink');
|
||||
objNextLink.setAttribute('href','#');
|
||||
objHoverNav.appendChild(objNextLink);
|
||||
|
||||
var objLoading = document.createElement("div");
|
||||
objLoading.setAttribute('id','loading');
|
||||
objImageContainer.appendChild(objLoading);
|
||||
|
||||
var objLoadingLink = document.createElement("a");
|
||||
objLoadingLink.setAttribute('id','loadingLink');
|
||||
objLoadingLink.setAttribute('href','#');
|
||||
objLoadingLink.onclick = function() { myLightbox.end(); return false; }
|
||||
objLoading.appendChild(objLoadingLink);
|
||||
|
||||
var objLoadingImage = document.createElement("img");
|
||||
objLoadingImage.setAttribute('src', fileLoadingImage);
|
||||
objLoadingLink.appendChild(objLoadingImage);
|
||||
|
||||
var objImageDataContainer = document.createElement("div");
|
||||
objImageDataContainer.setAttribute('id','imageDataContainer');
|
||||
objLightbox.appendChild(objImageDataContainer);
|
||||
|
||||
var objImageData = document.createElement("div");
|
||||
objImageData.setAttribute('id','imageData');
|
||||
objImageDataContainer.appendChild(objImageData);
|
||||
|
||||
var objImageDetails = document.createElement("div");
|
||||
objImageDetails.setAttribute('id','imageDetails');
|
||||
objImageData.appendChild(objImageDetails);
|
||||
|
||||
var objCaption = document.createElement("span");
|
||||
objCaption.setAttribute('id','caption');
|
||||
objImageDetails.appendChild(objCaption);
|
||||
|
||||
var objNumberDisplay = document.createElement("span");
|
||||
objNumberDisplay.setAttribute('id','numberDisplay');
|
||||
objImageDetails.appendChild(objNumberDisplay);
|
||||
|
||||
var objBottomNav = document.createElement("div");
|
||||
objBottomNav.setAttribute('id','bottomNav');
|
||||
objImageData.appendChild(objBottomNav);
|
||||
|
||||
var objBottomNavCloseLink = document.createElement("a");
|
||||
objBottomNavCloseLink.setAttribute('id','bottomNavClose');
|
||||
objBottomNavCloseLink.setAttribute('href','#');
|
||||
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
|
||||
objBottomNav.appendChild(objBottomNavCloseLink);
|
||||
|
||||
var objBottomNavCloseImage = document.createElement("img");
|
||||
objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
|
||||
objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// updateImageList()
|
||||
// Loops through anchor tags looking for 'lightbox' references and applies onclick
|
||||
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
|
||||
//
|
||||
updateImageList: function() {
|
||||
if (!document.getElementsByTagName){ return; }
|
||||
var anchors = document.getElementsByTagName('a');
|
||||
var areas = document.getElementsByTagName('area');
|
||||
|
||||
// loop through all anchor tags
|
||||
for (var i=0; i<anchors.length; i++){
|
||||
var anchor = anchors[i];
|
||||
|
||||
var relAttribute = String(anchor.getAttribute('rel'));
|
||||
|
||||
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
||||
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
||||
anchor.onclick = function () {myLightbox.start(this); return false;}
|
||||
}
|
||||
}
|
||||
|
||||
// loop through all area tags
|
||||
// todo: combine anchor & area tag loops
|
||||
for (var i=0; i< areas.length; i++){
|
||||
var area = areas[i];
|
||||
|
||||
var relAttribute = String(area.getAttribute('rel'));
|
||||
|
||||
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
||||
if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
||||
area.onclick = function () {myLightbox.start(this); return false;}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
// start()
|
||||
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
|
||||
//
|
||||
start: function(imageLink) {
|
||||
|
||||
hideSelectBoxes();
|
||||
hideFlash();
|
||||
|
||||
// stretch overlay to fill page and fade in
|
||||
var arrayPageSize = getPageSize();
|
||||
Element.setWidth('overlay', arrayPageSize[0]);
|
||||
Element.setHeight('overlay', arrayPageSize[1]);
|
||||
|
||||
new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
|
||||
|
||||
imageArray = [];
|
||||
imageNum = 0;
|
||||
|
||||
if (!document.getElementsByTagName){ return; }
|
||||
var anchors = document.getElementsByTagName( imageLink.tagName);
|
||||
|
||||
// if image is NOT part of a set..
|
||||
if((imageLink.getAttribute('rel') == 'lightbox')){
|
||||
// add single image to imageArray
|
||||
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
|
||||
} else {
|
||||
// if image is part of a set..
|
||||
|
||||
// loop through anchors, find other images in set, and add them to imageArray
|
||||
for (var i=0; i<anchors.length; i++){
|
||||
var anchor = anchors[i];
|
||||
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
|
||||
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
|
||||
}
|
||||
}
|
||||
imageArray.removeDuplicates();
|
||||
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
|
||||
}
|
||||
|
||||
// calculate top and left offset for the lightbox
|
||||
var arrayPageScroll = getPageScroll();
|
||||
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
|
||||
var lightboxLeft = arrayPageScroll[0];
|
||||
Element.setTop('lightbox', lightboxTop);
|
||||
Element.setLeft('lightbox', lightboxLeft);
|
||||
|
||||
Element.show('lightbox');
|
||||
|
||||
this.changeImage(imageNum);
|
||||
},
|
||||
|
||||
//
|
||||
// changeImage()
|
||||
// Hide most elements and preload image in preparation for resizing image container.
|
||||
//
|
||||
changeImage: function(imageNum) {
|
||||
|
||||
activeImage = imageNum; // update global var
|
||||
|
||||
// hide elements during transition
|
||||
if(animate){ Element.show('loading');}
|
||||
Element.hide('lightboxImage');
|
||||
Element.hide('hoverNav');
|
||||
Element.hide('prevLink');
|
||||
Element.hide('nextLink');
|
||||
Element.hide('imageDataContainer');
|
||||
Element.hide('numberDisplay');
|
||||
|
||||
imgPreloader = new Image();
|
||||
|
||||
// once image is preloaded, resize image container
|
||||
imgPreloader.onload=function(){
|
||||
Element.setSrc('lightboxImage', imageArray[activeImage][0]);
|
||||
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
|
||||
|
||||
imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
|
||||
}
|
||||
imgPreloader.src = imageArray[activeImage][0];
|
||||
},
|
||||
|
||||
//
|
||||
// resizeImageContainer()
|
||||
//
|
||||
resizeImageContainer: function( imgWidth, imgHeight) {
|
||||
|
||||
// get curren width and height
|
||||
this.widthCurrent = Element.getWidth('outerImageContainer');
|
||||
this.heightCurrent = Element.getHeight('outerImageContainer');
|
||||
|
||||
// get new width and height
|
||||
var widthNew = (imgWidth + (borderSize * 2));
|
||||
var heightNew = (imgHeight + (borderSize * 2));
|
||||
|
||||
// scalars based on change from old to new
|
||||
this.xScale = ( widthNew / this.widthCurrent) * 100;
|
||||
this.yScale = ( heightNew / this.heightCurrent) * 100;
|
||||
|
||||
// calculate size difference between new and old image, and resize if necessary
|
||||
wDiff = this.widthCurrent - widthNew;
|
||||
hDiff = this.heightCurrent - heightNew;
|
||||
|
||||
if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
|
||||
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
|
||||
|
||||
// if new and old image are same size and no scaling transition is necessary,
|
||||
// do a quick pause to prevent image flicker.
|
||||
if((hDiff == 0) && (wDiff == 0)){
|
||||
if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
|
||||
}
|
||||
|
||||
Element.setHeight('prevLink', imgHeight);
|
||||
Element.setHeight('nextLink', imgHeight);
|
||||
Element.setWidth( 'imageDataContainer', widthNew);
|
||||
|
||||
this.showImage();
|
||||
},
|
||||
|
||||
//
|
||||
// showImage()
|
||||
// Display image and begin preloading neighbors.
|
||||
//
|
||||
showImage: function(){
|
||||
Element.hide('loading');
|
||||
new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
|
||||
this.preloadNeighborImages();
|
||||
},
|
||||
|
||||
//
|
||||
// updateDetails()
|
||||
// Display caption, image number, and bottom nav.
|
||||
//
|
||||
updateDetails: function() {
|
||||
|
||||
// if caption is not null
|
||||
if(imageArray[activeImage][1]){
|
||||
Element.show('caption');
|
||||
Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
|
||||
}
|
||||
|
||||
// if image is part of set display 'Image x of x'
|
||||
if(imageArray.length > 1){
|
||||
Element.show('numberDisplay');
|
||||
Element.setInnerHTML( 'numberDisplay', "Obrazek " + eval(activeImage + 1) + " z " + imageArray.length);
|
||||
}
|
||||
|
||||
new Effect.Parallel(
|
||||
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
|
||||
new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],
|
||||
{ duration: resizeDuration, afterFinish: function() {
|
||||
// update overlay size and update nav
|
||||
var arrayPageSize = getPageSize();
|
||||
Element.setHeight('overlay', arrayPageSize[1]);
|
||||
myLightbox.updateNav();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//
|
||||
// updateNav()
|
||||
// Display appropriate previous and next hover navigation.
|
||||
//
|
||||
updateNav: function() {
|
||||
|
||||
Element.show('hoverNav');
|
||||
|
||||
// if not first image in set, display prev image button
|
||||
if(activeImage != 0){
|
||||
Element.show('prevLink');
|
||||
document.getElementById('prevLink').onclick = function() {
|
||||
myLightbox.changeImage(activeImage - 1); return false;
|
||||
}
|
||||
}
|
||||
|
||||
// if not last image in set, display next image button
|
||||
if(activeImage != (imageArray.length - 1)){
|
||||
Element.show('nextLink');
|
||||
document.getElementById('nextLink').onclick = function() {
|
||||
myLightbox.changeImage(activeImage + 1); return false;
|
||||
}
|
||||
}
|
||||
|
||||
this.enableKeyboardNav();
|
||||
},
|
||||
|
||||
//
|
||||
// enableKeyboardNav()
|
||||
//
|
||||
enableKeyboardNav: function() {
|
||||
document.onkeydown = this.keyboardAction;
|
||||
},
|
||||
|
||||
//
|
||||
// disableKeyboardNav()
|
||||
//
|
||||
disableKeyboardNav: function() {
|
||||
document.onkeydown = '';
|
||||
},
|
||||
|
||||
//
|
||||
// keyboardAction()
|
||||
//
|
||||
keyboardAction: function(e) {
|
||||
if (e == null) { // ie
|
||||
keycode = event.keyCode;
|
||||
escapeKey = 27;
|
||||
} else { // mozilla
|
||||
keycode = e.keyCode;
|
||||
escapeKey = e.DOM_VK_ESCAPE;
|
||||
}
|
||||
|
||||
key = String.fromCharCode(keycode).toLowerCase();
|
||||
|
||||
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
|
||||
myLightbox.end();
|
||||
} else if((key == 'p') || (keycode == 37)){ // display previous image
|
||||
if(activeImage != 0){
|
||||
myLightbox.disableKeyboardNav();
|
||||
myLightbox.changeImage(activeImage - 1);
|
||||
}
|
||||
} else if((key == 'n') || (keycode == 39)){ // display next image
|
||||
if(activeImage != (imageArray.length - 1)){
|
||||
myLightbox.disableKeyboardNav();
|
||||
myLightbox.changeImage(activeImage + 1);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//
|
||||
// preloadNeighborImages()
|
||||
// Preload previous and next images.
|
||||
//
|
||||
preloadNeighborImages: function(){
|
||||
|
||||
if((imageArray.length - 1) > activeImage){
|
||||
preloadNextImage = new Image();
|
||||
preloadNextImage.src = imageArray[activeImage + 1][0];
|
||||
}
|
||||
if(activeImage > 0){
|
||||
preloadPrevImage = new Image();
|
||||
preloadPrevImage.src = imageArray[activeImage - 1][0];
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//
|
||||
// end()
|
||||
//
|
||||
end: function() {
|
||||
this.disableKeyboardNav();
|
||||
Element.hide('lightbox');
|
||||
new Effect.Fade('overlay', { duration: overlayDuration});
|
||||
showSelectBoxes();
|
||||
showFlash();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// getPageScroll()
|
||||
// Returns array with x,y page scroll values.
|
||||
// Core code from - quirksmode.com
|
||||
//
|
||||
function getPageScroll(){
|
||||
|
||||
var xScroll, yScroll;
|
||||
|
||||
if (self.pageYOffset) {
|
||||
yScroll = self.pageYOffset;
|
||||
xScroll = self.pageXOffset;
|
||||
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
|
||||
yScroll = document.documentElement.scrollTop;
|
||||
xScroll = document.documentElement.scrollLeft;
|
||||
} else if (document.body) {// all other Explorers
|
||||
yScroll = document.body.scrollTop;
|
||||
xScroll = document.body.scrollLeft;
|
||||
}
|
||||
|
||||
arrayPageScroll = new Array(xScroll,yScroll)
|
||||
return arrayPageScroll;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// getPageSize()
|
||||
// Returns array with page width, height and window width, height
|
||||
// Core code from - quirksmode.com
|
||||
// Edit for Firefox by pHaez
|
||||
//
|
||||
function getPageSize(){
|
||||
|
||||
var xScroll, yScroll;
|
||||
|
||||
if (window.innerHeight && window.scrollMaxY) {
|
||||
xScroll = window.innerWidth + window.scrollMaxX;
|
||||
yScroll = window.innerHeight + window.scrollMaxY;
|
||||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||||
xScroll = document.body.scrollWidth;
|
||||
yScroll = document.body.scrollHeight;
|
||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
xScroll = document.body.offsetWidth;
|
||||
yScroll = document.body.offsetHeight;
|
||||
}
|
||||
|
||||
var windowWidth, windowHeight;
|
||||
|
||||
// console.log(self.innerWidth);
|
||||
// console.log(document.documentElement.clientWidth);
|
||||
|
||||
if (self.innerHeight) { // all except Explorer
|
||||
if(document.documentElement.clientWidth){
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
} else {
|
||||
windowWidth = self.innerWidth;
|
||||
}
|
||||
windowHeight = self.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
windowHeight = document.documentElement.clientHeight;
|
||||
} else if (document.body) { // other Explorers
|
||||
windowWidth = document.body.clientWidth;
|
||||
windowHeight = document.body.clientHeight;
|
||||
}
|
||||
|
||||
// for small pages with total height less then height of the viewport
|
||||
if(yScroll < windowHeight){
|
||||
pageHeight = windowHeight;
|
||||
} else {
|
||||
pageHeight = yScroll;
|
||||
}
|
||||
|
||||
// console.log("xScroll " + xScroll)
|
||||
// console.log("windowWidth " + windowWidth)
|
||||
|
||||
// for small pages with total width less then width of the viewport
|
||||
if(xScroll < windowWidth){
|
||||
pageWidth = xScroll;
|
||||
} else {
|
||||
pageWidth = windowWidth;
|
||||
}
|
||||
// console.log("pageWidth " + pageWidth)
|
||||
|
||||
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
|
||||
return arrayPageSize;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// getKey(key)
|
||||
// Gets keycode. If 'x' is pressed then it hides the lightbox.
|
||||
//
|
||||
function getKey(e){
|
||||
if (e == null) { // ie
|
||||
keycode = event.keyCode;
|
||||
} else { // mozilla
|
||||
keycode = e.which;
|
||||
}
|
||||
key = String.fromCharCode(keycode).toLowerCase();
|
||||
|
||||
if(key == 'x'){
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
//
|
||||
// listenKey()
|
||||
//
|
||||
function listenKey () { document.onkeypress = getKey; }
|
||||
|
||||
// ---------------------------------------------------
|
||||
|
||||
function showSelectBoxes(){
|
||||
var selects = document.getElementsByTagName("select");
|
||||
for (i = 0; i != selects.length; i++) {
|
||||
selects[i].style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------
|
||||
|
||||
function hideSelectBoxes(){
|
||||
var selects = document.getElementsByTagName("select");
|
||||
for (i = 0; i != selects.length; i++) {
|
||||
selects[i].style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------
|
||||
|
||||
function showFlash(){
|
||||
var flashObjects = document.getElementsByTagName("object");
|
||||
for (i = 0; i < flashObjects.length; i++) {
|
||||
flashObjects[i].style.visibility = "visible";
|
||||
}
|
||||
|
||||
var flashEmbeds = document.getElementsByTagName("embed");
|
||||
for (i = 0; i < flashEmbeds.length; i++) {
|
||||
flashEmbeds[i].style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------
|
||||
|
||||
function hideFlash(){
|
||||
var flashObjects = document.getElementsByTagName("object");
|
||||
for (i = 0; i < flashObjects.length; i++) {
|
||||
flashObjects[i].style.visibility = "hidden";
|
||||
}
|
||||
|
||||
var flashEmbeds = document.getElementsByTagName("embed");
|
||||
for (i = 0; i < flashEmbeds.length; i++) {
|
||||
flashEmbeds[i].style.visibility = "hidden";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// ---------------------------------------------------
|
||||
|
||||
//
|
||||
// pause(numberMillis)
|
||||
// Pauses code execution for specified time. Uses busy code, not good.
|
||||
// Help from Ran Bar-On [ran2103@gmail.com]
|
||||
//
|
||||
|
||||
function pause(ms){
|
||||
var date = new Date();
|
||||
curDate = null;
|
||||
do{var curDate = new Date();}
|
||||
while( curDate - date < ms);
|
||||
}
|
||||
/*
|
||||
function pause(numberMillis) {
|
||||
var curently = new Date().getTime() + sender;
|
||||
while (new Date().getTime();
|
||||
}
|
||||
*/
|
||||
// ---------------------------------------------------
|
||||
|
||||
|
||||
|
||||
function initLightbox() { myLightbox = new Lightbox(); }
|
||||
Event.observe(window, 'load', initLightbox, false);
|
||||
24
web/js/photoGallery/stStartGallery.js
Normal file
24
web/js/photoGallery/stStartGallery.js
Normal file
@@ -0,0 +1,24 @@
|
||||
jQuery(function($)
|
||||
{
|
||||
$(document).ready(function() {
|
||||
|
||||
var trigger = $('.zoom_image_trigger');
|
||||
|
||||
var links = $('.gallery a');
|
||||
|
||||
links.add(trigger).lightBox();
|
||||
|
||||
links.unbind('click');
|
||||
|
||||
trigger.jqzoom({
|
||||
zoomType: 'innerzoom',
|
||||
lens:true,
|
||||
preloadImages: false,
|
||||
showEffect : 'fadein',
|
||||
hideEffect: 'fadeout',
|
||||
title: false
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
7
web/js/photoGallery/textGallery.js
Normal file
7
web/js/photoGallery/textGallery.js
Normal file
@@ -0,0 +1,7 @@
|
||||
jQuery(function ($)
|
||||
{
|
||||
$(document).ready(function()
|
||||
{
|
||||
$('a.lightbox').lightBox();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user