http://flashfumetto.it/js/imgpreview.dsign.jquery.js

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

55        $container = $('<div/>').attr('id', s.containerID)
56                        .append('<img/>').hide()
57                        .css('position','absolute')
58                        .appendTo('body'),
59            
60        $img = $('img', $container).css(s.imgCSS),
61        
62        // Get all valid elements (linking to images / ATTR with image link):
63        $collection = this.filter(':linkingToImage(' + s.srcAttr + ')');
64        
65        // Re-usable means to add prefix (from setting):
66        function addPrefix(src) {
67            return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2');
68        }
69        
70        if (s.preloadImages) {
71            (function(i){
72                var tempIMG = new Image(),
73                    callee = arguments.callee;
74                tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr));
75                tempIMG.onload = function(){
76                    $collection[i + 1] && callee(i + 1);
77                };
78            })(0);
79        }
80        
81        $collection
82            .mousemove(function(e){
83/*
84                if($(this).data("dimension").width != undefined) {
85                	var top = e.pageY + s.distanceFromCursor.top - $(window).scrollTop() ;
86                	
87                	// Se la dimensione sfonda verso il basso, diminuisce il top
88                	if((top + $(this).data("dimension").height) > $(window).height())   top = (top + $(this).data("dimension").height) - $(window).height() ;
89                	if(top < 0) top  = 0 ;
90                	
91                	s.distanceFromCursor.top = top ;
92                }
93            
94                $container.css({
95                    top: e.pageY + s.distanceFromCursor.top + 'px',
96                    left: e.pageX + s.distanceFromCursor.left + 'px'
97                });
98*/
99            })
100            .hover(function(e){
101			if($(this).data("dimension") == undefined) {return;}
102		// posizionamento
103                if($(this).data("dimension").width != undefined) {
104    		// Altezza 
105                	var top = $(this).offset().top + s.distanceFromCursor.top   ;
106		if(top < $(window).scrollTop()) top  = $(window).scrollTop() ;
107		top = parseInt(top) ;
108				
109                	// Se la dimensione sfonda verso il basso, diminuisce il top, se c'e' spazio a sufficenza
110                	var height = ($container.height() >  $(this).data("dimension").height) ? $container.height() : $(this).data("dimension").height ;
111                	
112		if(((top - $(window).scrollTop()) + height) > $(window).height()) {		
113			top -= (((top - $(window).scrollTop()) + height+s.offsetBottom) - $(window).height())
114		}
115         	
116		// Larghezza
117		var left = $(this).offset().left + $(this).width() + s.distanceFromCursor.left ;
118		if((left + $(this).data("dimension").width) > $(window).width()) {
119			left = 	$(this).offset().left - ($(this).data("dimension").width +  s.distanceFromCursor.left + s.offsetLeft) ;
120		}
121		if(left < 0) left = 0 ;
122                }
123            
124                $container.css({
125                    top: top + 'px',
126                    left: left + 'px'
127                });
128
129                var link = this;
130                $container
131                    .addClass(s.containerLoadingClass)
132                    .show();
133                $img
134                    .load(function(eventObject){
135                        $container.removeClass(s.containerLoadingClass);
136                        $img.show();
137                        s.onLoad.call($img[0], link);
138                    })
139                    .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) );
140                s.onShow.call($container[0], link);
141               
142            }, function(){
143                
144                $container.hide();
145                $img.unbind('load').attr('src','').hide();
146                s.onHide.call($container[0], this);
147                
148            });
149        
150        // Return full selection, not $collection!
151        return this;
152        
153    };
154    
155})(jQuery);