//
// imageDetail r1 // 2009.03.27 // jQuery 1.1.2
//
//
/* Copyright (c) 2009 Justin Robert Wehrman (jwehrman@exertionist.com)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*/
// Tested on Windows Firefox 2+, IE 6+, Opera 9+, Safari 3+ and Google Chrome 1+
//
/* ----------------------USAGE----------------------
--- IMAGE SETUP ---
Image must be named specifically using "thumb_" and "full_"...
Prepend Thumbnail Image name with "thumb_" : thumb_Image.jpg
Prepend Fullsize Image name with "full_" : full_Image.jpg
--- HTML SETUP ---
Thumbnail Image needs to be contained in a unique ID
Create a unique ID for the Full Size image to be rendered to
--- CALLING imageDetail function ---
imageDetail function requires the following arguments
Thumbnail Container ID - DO NOT INCLUDE # SIGN
Full Size Container ID - DO NOT INLCUDE # SIGN
Thumbnail Image Width / Thumbnail Image Height - DO NOT INCLUDE "px"
Full Size Image Width / Full Size Image Height - DO NOT INCLUDE "px"
$('Some Selector').imageDetail('ThumbnailContainerID', 'FullsizeContainerID', 'thumbnail width', 'thumbnail height', 'fullsize width', 'fullsize height');
Multiple versions are possible as long as each Thumbnail/FullSize Image Group has a unique ID
*/
/* ----------------------Example----------------------
*/
(function ($) {
$.fn.imageDetail = function (thumbnailID, fullID, thumbWidth, thumbHeight, fullWidth, fullHeight, pth,ImageDetail_Container) {
return this.each(function() {
// Create vars for Thumbnail and Full Containers
var IDthumb = $('#' + thumbnailID);
var IDfull = $('#' + fullID);
// mid width/height of thumbnail container
var MidDisplayWidth = thumbWidth / 2;
var MidDisplayHeight = thumbHeight / 2;
// get full / thumb difference
var widthDiff = fullWidth / thumbWidth;
var heightDiff = fullHeight / thumbHeight;
// Get Thumbnail Image path // Create Full Image path from Thumbnail
var ImageFullPath = pth+"hazardeg600.png";
// Set Thumbnail Container cursor to crosshair
$("#CubeMap").css('cursor','crosshair');
// Thumbnail Mouseover Event
$(".gid18_1px,.gid18b_1px,.gid23b_1px,.gid23_1px").mouseover(function(event) {
// Set Full Image as Full Container background-image
$(IDfull).css({
backgroundImage: 'url(' + ImageFullPath + ')',
backgroundRepeat: 'no-repeat',
backgroundPosition: '-200px -200px'
});
// Thumbnail Mousemove Event
$("#CubeMap").mousemove(function(thumb) {
// get Mouse Position over Thumbnail Container
var pos = $("#grid").offset();
pos.left = parseInt(pos.left);
pos.top = parseInt(pos.top);
// set Full Image background-position
var bgx = (((thumb.pageX - pos.left -470) * -1) * widthDiff) +95;//+ MidDisplayWidth;
var bgy = (((thumb.pageY - pos.top -370) * -1) * heightDiff)+95; //+ MidDisplayHeight;
var fgx = (((thumb.pageX - pos.left -470) * -1));
var fgy = (((thumb.pageY - pos.top -370) * -1));
$(IDfull).css('backgroundPosition', bgx + 'px' + ' ' + bgy + 'px');
$(ImageDetail_Container).css({"left":370-fgx+'px',"top":100-fgy+'px'});
$(IDfull).css('backgroundPosition', bgx + 'px' + ' ' + bgy + 'px');
});
});
});
};
})(jQuery);
