(function($) { $.fn.thumbPopup = function(options) { //Combine the passed in options with the default settings settings = jQuery.extend({ popupId: "thumbPopup", popupCSS: {'border': '1px solid #000000', 'background': '#FFFFFF', 'z-index':99999, 'padding': '5px 5px 5px 5px'}, imgSmallFlag: "_t", imgLargeFlag: "_l", cursorTopOffset: 15, cursorLeftOffset: 15, loadingHtml: "Loading" }, options); //Create our popup element popup = $("
") .css(settings.popupCSS) .attr("id", settings.popupId) .css("position", "absolute") .appendTo("body").hide(); //Attach hover events that manage the popup $(this) .hover(setPopup) .mousemove(updatePopupPosition) .mouseout(hidePopup); function setPopup(event) { var fullImgURL = $(this).attr("src").replace(settings.imgSmallFlag, settings.imgLargeFlag); $(this).data("hovered", true); //Load full image in popup $("") .bind("load", {thumbImage: this}, function(event) { //Only display the larger image if the thumbnail is still being hovered if ($(event.data.thumbImage).data("hovered") == true) { $(popup).empty().append(this); updatePopupPosition(event); $(popup).show(); } $(event.data.thumbImage).data("cached", true); }) .attr("src", fullImgURL) .attr("width", 300) .attr("height", 225); //If no image has been loaded yet then place a loading message if ($(this).data("cached") != true) { $(popup).append($(settings.loadingHtml)); $(popup).show(); } updatePopupPosition(event); } function updatePopupPosition(event) { var windowSize = getWindowSize(); var popupSize = getPopupSize(); if (windowSize.width + windowSize.scrollLeft < event.pageX + popupSize.width + settings.cursorLeftOffset){ $(popup).css("left", event.pageX - popupSize.width - settings.cursorLeftOffset); } else { $(popup).css("left", event.pageX + settings.cursorLeftOffset); } if (windowSize.height + windowSize.scrollTop < event.pageY + popupSize.height + settings.cursorTopOffset){ $(popup).css("top", event.pageY - popupSize.height - settings.cursorTopOffset); } else { $(popup).css("top", event.pageY + settings.cursorTopOffset); } } function hidePopup(event) { $(this).data("hovered", false); $(popup).empty().hide(); } function getWindowSize() { return { scrollLeft: $(window).scrollLeft(), scrollTop: $(window).scrollTop(), width: $(window).width(), height: $(window).height() }; } function getPopupSize() { return { width: $(popup).width(), height: $(popup).height() }; } //Return original selection for chaining return this; }; })(jQuery);