/*
Image previewer
© 2010 Edward Leigh
Licensed in perpetuity to Clive Nichols Garden Photography
Updated 2010-05-07
Files required in web server folder:
/js/jquery.js
/js/image-preview.js
/images/transparent.gif
thumbnails.html file requires the following lines inside the block:
thumbnails.html file requires the following immediately following the tag:
thumbnails.pl needs editing so that each thumbnail has the following code inside its ![]()
tag:
onmouseover="showPreview('IMAGE-NAME', 'IMAGE-FOLDER', this)" onmouseout="hidePreview()"
*/
// CUSTOMIZABLE PARAMETERS
// Times are in milliseconds
var delayBeforeShow = 250;
var fadeInTime = 150;
var fadeOutTime = 300;
var frameHeight = 414;
var frameWidth = 414;
// CUSTOMIZABLE FUNCTION
function makeURL(image, folder)
{
return 'http://www.clivenichols.com/website/database/gallery/' + folder + '/' + image;
// if (image.substr(-4) != '.jpg')
// url += '.jpg';
// return url;
}
// DO NOT EDIT BELOW THIS LINE
// ---------------------------
var isShowing = false;
var url = '';
var jqImageObj = null;
var currentTimeout = null;
function showPreview(image, folder, imageObj)
{
url = makeURL(image, folder);
jqImageObj = $(imageObj);
currentTimeout = setTimeout("delayedShowPreview()", delayBeforeShow);
}
function delayedShowPreview(image, folder, imageObj)
{
isShowing = true;
var frame = $('div#previewFrame');
var imgPos = jqImageObj.offset();
var framePos = new Object();
var winWidth = $(window).width();
var winHeight = $(window).height();
var winTop = $(window).scrollTop();
var winBottom = winTop + winHeight;
framePos.top = imgPos.top + (jqImageObj.height() - frameHeight) / 2;
framePos.left = imgPos.left + jqImageObj.width();
if (framePos.top < winTop)
framePos.top = winTop;
else if (framePos.top + frameHeight > winBottom)
framePos.top = winBottom - frameHeight;
if (framePos.left < 0)
framePos.left = 0;
else if (framePos.left + frameWidth > winWidth)
framePos.left = imgPos.left - frameWidth;
frame.css('top', framePos.top);
frame.css('left', framePos.left);
$('img#preview').attr('src', url);
frame.fadeIn(fadeInTime);
}
function hidePreview()
{
if (currentTimeout)
{
clearTimeout(currentTimeout);
currentTimeout = null;
}
if (isShowing)
{
$('div#previewFrame').fadeOut(fadeOutTime);
$('img#preview').attr('src', '/images/transparent.gif');
isShowing = false;
}
}
