diff --git a/galleryscript.js b/galleryscript.js index 9b554e1..5584c34 100644 --- a/galleryscript.js +++ b/galleryscript.js @@ -84,12 +84,8 @@ function showbigimage(i) { if (fullscreen) { height=height+200; } if (originals) { mediumstr=encodeURIComponent(imagelist[i]); } else { mediumstr='_med/med_'+encodeURIComponent(imagelist[i])+'.jpg'; } - var zoomStr=""; - if (zoom) { - zoomStr=' class="cloud-zoom" rel="position: \'inside\' , showTitle: false, adjustX:-4, adjustY:-4, smoothMove:1"'; - } - ob.innerHTML='
'; + ob.innerHTML='
'+ + '
'; document.getElementById('imagesingle').style.maxWidth=width; ob.style.height=height; document.getElementById('imagesingle').style.maxHeight=height; @@ -97,10 +93,18 @@ function showbigimage(i) { dc.innerHTML=getProgressEl()+currentlink(i)+imagedesc[i]; dc.style.display='block'; if (zoom) { - $('.cloud-zoom').CloudZoom(); - setInterval(function(){ - $('#imagebig').css('width',$('#imagesingle').css('width')); - }, 1000); + $(document).ready(function() { + var options = { + zoomType: 'innerzoom', + preloadImages: false, + alwaysOn:true, + }; + $('#imagesingle').css('width',width); + $('#imagesingle').css('height',height); + $('#imagesingle').css('display','none'); + // hide the distorted imagesingle + $('.linktobig').jqzoom(options); + }); } return; } @@ -892,389 +896,736 @@ f.top,left:d.left-f.left}},offsetParent:function(){return this.map(function(){fo e&&e.document?e.document.compatMode==="CSS1Compat"&&e.document.documentElement["client"+b]||e.document.body["client"+b]:e.nodeType===9?Math.max(e.documentElement["client"+b],e.body["scroll"+b],e.documentElement["scroll"+b],e.body["offset"+b],e.documentElement["offset"+b]):f===w?c.css(e,d):this.css(d,typeof f==="string"?f:f+"px")}});A.jQuery=A.$=c})(window); -////////////////////////////////////////////////////////////////////////////////// -// Cloud Zoom V1.0.2 -// (c) 2010 by R Cecco. -// MIT License -// -// Please retain this copyright header in all versions of the software -////////////////////////////////////////////////////////////////////////////////// - - function format(str) { - for (var i = 1; i < arguments.length; i++) { - str = str.replace('%' + (i - 1), arguments[i]); +/*! + * 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'; } - return str; - } - - function CloudZoom(jWin, opts) { - var sImg = $('img', jWin); - var img1; - var img2; - var zoomDiv = null; - var $mouseTrap = null; - var lens = null; - var $tint = null; - var softFocus = null; - var $ie6Fix = null; - var zoomImage; - var controlTimer = 0; - var cw, ch; - var destU = 0; - var destV = 0; - var currV = 0; - var currU = 0; - var filesLoaded = 0; - var mx, - my; - var ctx = this, zw; - // Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called. - // We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the - // images load really fast, e.g. from the cache. - //var ctx = this; - setTimeout(function () { - // - if ($mouseTrap === null) { - var w = jWin.width(); - jWin.parent().append(format('
Loading...
', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5); - } - }, 200); - - - var ie6FixRemove = function () { - - if ($ie6Fix !== null) { - $ie6Fix.remove(); - $ie6Fix = null; - } - }; - - // Removes cursor, tint layer, blur layer etc. - this.removeBits = function () { - //$mouseTrap.unbind(); - if (lens) { - lens.remove(); - lens = null; - } - if ($tint) { - $tint.remove(); - $tint = null; - } - if (softFocus) { - softFocus.remove(); - softFocus = null; - } - ie6FixRemove(); - - $('.cloud-zoom-loading', jWin.parent()).remove(); - }; - - - this.destroy = function () { - jWin.data('zoom', null); - - if ($mouseTrap) { - $mouseTrap.unbind(); - $mouseTrap.remove(); - $mouseTrap = null; - } - if (zoomDiv) { - zoomDiv.remove(); - zoomDiv = null; - } - //ie6FixRemove(); - this.removeBits(); - // DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES - }; - - - // This is called when the zoom window has faded out so it can be removed. - this.fadedOut = function () { - - if (zoomDiv) { - zoomDiv.remove(); - zoomDiv = null; - } - this.removeBits(); - //ie6FixRemove(); - }; - - this.controlLoop = function () { - if (lens) { - var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0; - var y = (my - sImg.offset().top - (ch * 0.5)) >> 0; - - if (x < 0) { - x = 0; + $.extend(obj, { + create: function () { //create the main objects + //create ZoomPad + if ($(".zoomPad", el).length == 0) { + el.zoomPad = $('
').addClass('zoomPad'); + img.wrap(el.zoomPad); } - else if (x > (sImg.outerWidth() - cw)) { - x = (sImg.outerWidth() - cw); + if(settings.zoomType == 'innerzoom'){ + settings.zoomWidth = smallimage.w; + settings.zoomHeight = smallimage.h; } - if (y < 0) { - y = 0; + //creating ZoomPup + if ($(".zoomPup", el).length == 0) { + lens.append(); } - else if (y > (sImg.outerHeight() - ch)) { - y = (sImg.outerHeight() - ch); + //creating zoomWindow + if ($(".zoomWindow", el).length == 0) { + stage.append(); } - - lens.css({ - left: x, - top: y - }); - lens.css('background-position', (-x) + 'px ' + (-y) + 'px'); - - destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0; - destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0; - currU += (destU - currU) / opts.smoothMove; - currV += (destV - currV) / opts.smoothMove; - - zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px')); - } - controlTimer = setTimeout(function () { - ctx.controlLoop(); - }, 30); - }; - - this.init2 = function (img, id) { - - filesLoaded++; - //console.log(img.src + ' ' + id + ' ' + img.width); - if (id === 1) { - zoomImage = img; - } - //this.images[id] = img; - if (filesLoaded === 2) { - this.init(); - } - }; - - /* Init function start. */ - this.init = function () { - // Remove loading message (if present); - $('.cloud-zoom-loading', jWin.parent()).remove(); - - -/* Add a box (mouseTrap) over the small image to trap mouse events. - It has priority over zoom window to avoid issues with inner zoom. - We need the dummy background image as IE does not trap mouse events on - transparent parts of a div. - */ - $mouseTrap = jWin.parent().append(format("
", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last'); - - ////////////////////////////////////////////////////////////////////// - /* Do as little as possible in mousemove event to prevent slowdown. */ - $mouseTrap.bind('mousemove', this, function (event) { - // Just update the mouse position - mx = event.pageX; - my = event.pageY; - }); - ////////////////////////////////////////////////////////////////////// - $mouseTrap.bind('mouseleave', this, function (event) { - clearTimeout(controlTimer); - //event.data.removeBits(); - if(lens) { lens.fadeOut(299); } - if($tint) { $tint.fadeOut(299); } - if(softFocus) { softFocus.fadeOut(299); } - zoomDiv.fadeOut(300, function () { - ctx.fadedOut(); - }); - return false; - }); - ////////////////////////////////////////////////////////////////////// - $mouseTrap.bind('mouseenter', this, function (event) { - mx = event.pageX; - my = event.pageY; - zw = event.data; - if (zoomDiv) { - zoomDiv.stop(true, false); - zoomDiv.remove(); + //creating Preload + if ($(".zoomPreload", el).length == 0) { + loader.append(); } - - var xPos = opts.adjustX, - yPos = opts.adjustY; - - var siw = sImg.outerWidth(); - var sih = sImg.outerHeight(); - - var w = opts.zoomWidth; - var h = opts.zoomHeight; - if (opts.zoomWidth == 'auto') { - w = siw; + //preloading images + if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) { + obj.load(); } - if (opts.zoomHeight == 'auto') { - h = sih; + 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' + }); } - //$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih ); - var appendTo = jWin.parent(); // attach to the wrapper - switch (opts.position) { - case 'top': - yPos -= h; // + opts.adjustY; - break; - case 'right': - xPos += siw; // + opts.adjustX; - break; - case 'bottom': - yPos += sih; // + opts.adjustY; - break; - case 'left': - xPos -= w; // + opts.adjustX; - break; - case 'inside': - w = siw; - h = sih; - break; - // All other values, try and find an id in the dom to attach to. - default: - appendTo = $('#' + opts.position); - // If dom element doesn't exit, just use 'right' position as default. - if (!appendTo.length) { - appendTo = jWin; - xPos += siw; //+ opts.adjustX; - yPos += sih; // + opts.adjustY; + if (settings.zoomType == 'innerzoom') { + $(".zoomWrapper", el).css({ + cursor: 'crosshair' + }); + } + $(".zoomPad", el).bind('mouseenter mouseover', function (event) { + img.attr('title', ''); + $(el).attr('title', ''); + el.zoom_active = true; + //if loaded then activate else load large image + smallimage.fetchdata(); + if (el.largeimageloaded) { + obj.activate(event); } else { - w = appendTo.innerWidth(); - h = appendTo.innerHeight(); + 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) { + 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; + $(link).addClass('zoomThumbActive'); + $(el).attr('href', largeimage); + img.attr('src', smallimage); + 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; + } } } - - zoomDiv = appendTo.append(format('', xPos, yPos, w, h, zoomImage.src)).find(':last'); - - // Add the title from title tag. - if (sImg.attr('title') && opts.showTitle) { - zoomDiv.append(format('
%0
', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity); + if (borderleft) { + for (i = 0; i < 3; i++) { + if (!isNaN(borderleft.substr(i, 1))) { + bleft = bleft + borderleft.substr(i, 1) + } else { + break; + } + } } - - // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue... - if ($.browser.msie && $.browser.version < 7) { - $ie6Fix = $('').css({ - position: "absolute", - left: xPos, - top: yPos, - zIndex: 99, - width: w, - height: h - }).insertBefore(zoomDiv); - } - - zoomDiv.fadeIn(500); - - if (lens) { - lens.remove(); - lens = null; - } /* Work out size of cursor */ - cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width(); - ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height(); - - // Attach mouse, initially invisible to prevent first frame glitch - lens = jWin.append(format("", cw, ch)).find(':last'); - - $mouseTrap.css('cursor', lens.css('cursor')); - - var noTrans = false; - - // Init tint layer if needed. (Not relevant if using inside mode) - if (opts.tint) { - lens.css('background', 'url("' + sImg.attr('src') + '")'); - $tint = jWin.append(format('
', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last'); - $tint.css('opacity', opts.tintOpacity); - noTrans = true; - $tint.fadeIn(500); - - } - if (opts.softFocus) { - lens.css('background', 'url("' + sImg.attr('src') + '")'); - softFocus = jWin.append(format('
', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last'); - softFocus.css('background', 'url("' + sImg.attr('src') + '")'); - softFocus.css('opacity', 0.5); - noTrans = true; - softFocus.fadeIn(500); - } - - if (!noTrans) { - lens.css('opacity', opts.lensOpacity); - } - if ( opts.position !== 'inside' ) { lens.fadeIn(500); } - - // Start processing. - zw.controlLoop(); - - return; // Don't return false here otherwise opera will not detect change of the mouse pointer type. - }); + $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 +`========================================================*/ - img1 = new Image(); - $(img1).load(function () { - ctx.init2(this, 0); - }); - img1.src = sImg.attr('src'); - - img2 = new Image(); - $(img2).load(function () { - ctx.init2(this, 1); - }); - img2.src = jWin.attr('href'); - } - - $.fn.CloudZoom = function (options) { - // IE6 background image flicker fix - try { - document.execCommand("BackgroundImageCache", false, true); - } catch (e) {} - this.each(function () { - var relOpts, opts; - // Hmm...eval...slap on wrist. - eval('var a = {' + $(this).attr('rel') + '}'); - relOpts = a; - if ($(this).is('.cloud-zoom')) { - $(this).css({ - 'position': 'relative', - 'display': 'block' + function Loader() { + var $obj = this; + this.append = function () { + this.node = $('
').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText); + $('.zoomPad', el).append(this.node); + }; + this.show = function () { + this.node.top = (smallimage.oh - this.node.height()) / 2; + this.node.left = (smallimage.ow - this.node.width()) / 2; + //setting position + this.node.css({ + top: this.node.top, + left: this.node.left, + position: 'absolute', + visibility: 'visible' }); - $('img', $(this)).css({ - 'display': 'block' - }); - // Wrap an outer div around the link so we can attach things without them becoming part of the link. - // But not if wrap already exists. - if ($(this).parent().attr('id') != 'wrap') { - $(this).wrap('
'); + }; + this.hide = function () { + this.node.css('visibility', 'hidden'); + }; + return this; + } +/*========================================================, +| Lens +|---------------------------------------------------------: +| Lens over the image +`========================================================*/ + + function Lens() { + var $obj = this; + this.node = $('
').addClass('zoomPup'); + //this.nodeimgwrapper = $("
").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); } - opts = $.extend({}, $.fn.CloudZoom.defaults, options); - opts = $.extend({}, opts, relOpts); - $(this).data('zoom', new CloudZoom($(this), opts)); - - } else if ($(this).is('.cloud-zoom-gallery')) { - opts = $.extend({}, relOpts, options); - $(this).data('relOpts', opts); - $(this).bind('click', $(this), function (event) { - var data = event.data.data('relOpts'); - // Destroy the previous zoom - $('#' + data.useZoom).data('zoom').destroy(); - // Change the biglink to point to the new big image. - $('#' + data.useZoom).attr('href', event.data.attr('href')); - // Change the small image to point to the new small image. - $('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage); - // Init a new zoom with the new images. - $('#' + event.data.data('relOpts').useZoom).CloudZoom(); - return false; + }; + this.setdimensions = function () { + this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x)); + this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / 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' }); - } - }); - return this; + + + + 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 = $("
"); + this.ieframe = $(''); + 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(settings.zoomWidth) + 'px' , + borderWidth: thickness + 'px' + }); + $('.zoomWrapperImage', this.node).css({ + width: '100%', + height: Math.round(settings.zoomHeight) + 'px' + }); + //zoom title + $('.zoomWrapperTitle', this.node).css({ + width: '100%', + position: 'absolute' + }); + + $('.zoomWrapperTitle', this.node).hide(); + if (settings.title && 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); }; - - $.fn.CloudZoom.defaults = { - zoomWidth: 'auto', - zoomHeight: 'auto', - position: 'right', - tint: false, - tintOpacity: 0.5, - lensOpacity: 0.5, - softFocus: false, - smoothMove: 3, - showTitle: true, - titleOpacity: 0.5, - adjustX: 0, - adjustY: 0 + //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: 'Loading zoom', + 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); diff --git a/gallerystyle.css b/gallerystyle.css index 6c9e65c..2f72189 100644 --- a/gallerystyle.css +++ b/gallerystyle.css @@ -237,42 +237,118 @@ img { margin-top: 1px; } -/* This is the moving lens square underneath the mouse pointer. */ -.cloud-zoom-lens { - border: 4px solid #888; - margin:-4px; /* Set this to minus the border thickness. */ - background-color:#fff; - cursor:move; -} - -/* This is for the title text. */ -.cloud-zoom-title { - font-family:Arial, Helvetica, sans-serif; - position:absolute !important; - background-color:#000; - color:#fff; - padding:3px; - width:100%; - text-align:center; - font-weight:bold; - font-size:10px; - top:0px; -} - -/* This is the zoom window. */ -.cloud-zoom-big { - border:4px solid #ccc; - overflow:hidden; - - -} - -/* This is the loading message. */ -.cloud-zoom-loading { - color:white; - background:#222; - padding:3px; - border:1px solid #000; -} - - +.zoomPad{ + position:relative; + float:left; + z-index:99; + cursor:crosshair; +} + + +.zoomPreload{ + -moz-opacity:0.8; + opacity: 0.8; + filter: alpha(opacity = 80); + color: #333; + font-size: 12px; + font-family: Tahoma; + text-decoration: none; + border: 1px solid #CCC; + /*background-color: white;*/ + padding: 8px; + text-align:center; + background-repeat: no-repeat; + background-position: 43px 30px; + z-index:110; + width:90px; + height:43px; + position:absolute; + top:0px; + left:0px; + * width:100px; + * height:49px; +} + + +.zoomPup{ + overflow:hidden; + background-color: #FFF; + -moz-opacity:0.6; + opacity: 0.6; + filter: alpha(opacity = 60); + z-index:120; + position:absolute; + border:1px solid #CCC; + z-index:101; + cursor:crosshair; +} + +.zoomOverlay{ + position:absolute; + left:0px; + top:0px; + background:#FFF; + /*opacity:0.5;*/ + z-index:5000; + width:100%; + height:100%; + display:none; + z-index:101; +} + +.zoomWindow{ + position:absolute; + left:110%; + top:40px; + background:#FFF; + z-index:6000; + height:auto; + z-index:10000; + z-index:110; +} +.zoomWrapper{ + position:relative; + border:1px solid #999; + z-index:110; +} +.zoomWrapperTitle{ + display:block; + background:#999; + color:#FFF; + height:18px; + line-height:18px; + width:100%; + overflow:hidden; + text-align:center; + font-size:10px; + position:absolute; + top:0px; + left:0px; + z-index:120; + -moz-opacity:0.6; + opacity: 0.6; + filter: alpha(opacity = 60); +} +.zoomWrapperImage{ + display:block; + position:relative; + overflow:hidden; + z-index:110; + +} +.zoomWrapperImage img{ + border:0px; + display:block; + position:absolute; + z-index:101; +} + +.zoomIframe{ + z-index: -1; + filter:alpha(opacity=0); + -moz-opacity: 0.80; + opacity: 0.80; + position:absolute; + display:block; +} +