http://www.yohonsha-japan.co.jp/js/jquery/imgpreview/imgpreview.js

1/*
2 * imgPreview jQuery plugin
3 * Copyright (c) 2009 James Padolsey
4 * [email protected] | http://james.padolsey.com
5 * Dual licensed under MIT and GPL.
6 * Updated: 09/02/09
7 * @author James Padolsey
8 * @version 0.22
9 */
10(function($){
11    
12    $.expr[':'].linkingToImage = function(elem, index, match){
13        // This will return true if the specified attribute contains a valid link to an image:
14        return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i));
15    };
16    
17    $.fn.imgPreview = function(userDefinedSettings){
18        
19        var s = $.extend({
20            
21            /* DEFAULTS */
22            
23            // CSS to be applied to image:
24            imgCSS: {},
25            // Distance between cursor and preview:
26            distanceFromCursor: {top: -100, left:30},
27            // Boolean, whether or not to preload images:
28            preloadImages: true,
29            // Callback: run when link is hovered: container is shown:
30            onShow: function(){},
31            // Callback: container is hidden:
32            onHide: function(){},
33            // Callback: Run when image within container has loaded:
34            onLoad: function(){},
35            // ID to give to container (for CSS styling):
36            containerID: 'imgPreviewContainer',
37            // Class to be given to container while image is loading:
38            containerLoadingClass: 'loading',
39            // Prefix (if using thumbnails), e.g. 'thumb_'
40            thumbPrefix: '',
41            // Where to retrieve the image from:
42            srcAttr: 'href'
43            
44        }, userDefinedSettings),
45        

46        $container = $('<div/>').attr('id', s.containerID)
47                        .append('<img/>').hide()
48                        .css('position','absolute')
49                        .appendTo('body'),
50            
51        $img = $('img', $container).css(s.imgCSS),
52        
53        // Get all valid elements (linking to images / ATTR with image link):
54        $collection = this.filter(':linkingToImage(' + s.srcAttr + ')');
55        
56        // Re-usable means to add prefix (from setting):
57        function addPrefix(src) {
58            return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2');
59        }
60        
61        if (s.preloadImages) {
62            (function(i){
63                var tempIMG = new Image(),
64                    callee = arguments.callee;
65                tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr));
66                tempIMG.onload = function(){
67                    $collection[i + 1] && callee(i + 1);
68                };
69            })(0);
70        }
71        
72        $collection
73            .mousemove(function(e){
74                
75                $container.css({
76                    top: e.pageY + s.distanceFromCursor.top + 'px',
77                    left: e.pageX + s.distanceFromCursor.left + 'px'
78                });
79                
80            })
81            .hover(function(){
82                
83                var link = this;
84                $container
85                    .addClass(s.containerLoadingClass)
86                    .show();
87                $img
88                    .load(function(){
89                        $container.removeClass(s.containerLoadingClass);
90                        $img.show();
91                        s.onLoad.call($img[0], link);
92                    })
93                    .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) );
94                s.onShow.call($container[0], link);
95                
96            }, function(){
97                
98                $container.hide();
99                $img.unbind('load').attr('src','').hide();
100                s.onHide.call($container[0], this);
101                
102            });
103        
104        // Return full selection, not $collection!
105        return this;
106        
107    };
108    
109})(jQuery);