[11079] | 1 | /* |
---|
| 2 | * imgPreview jQuery plugin |
---|
| 3 | * Copyright (c) 2009 James Padolsey |
---|
| 4 | * j@qd9.co.uk | 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 | * |
---|
| 11 | * !!!!!!! -> This plugin contains ADDITIONS. 'considerBorders' param. You will have to add |
---|
| 12 | * it yourself to newest version, if you use this param |
---|
[11947] | 13 | */ |
---|
[11079] | 14 | (function($){ |
---|
[11947] | 15 | |
---|
[11079] | 16 | $.expr[':'].linkingToImage = function(elem, index, match){ |
---|
| 17 | // This will return true if the specified attribute contains a valid link to an image: |
---|
| 18 | return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i)); |
---|
| 19 | }; |
---|
[11947] | 20 | |
---|
[11079] | 21 | $.fn.imgPreview = function(userDefinedSettings){ |
---|
[11947] | 22 | |
---|
[11079] | 23 | var s = $.extend({ |
---|
[11947] | 24 | |
---|
[11079] | 25 | /* DEFAULTS */ |
---|
[11947] | 26 | |
---|
[11079] | 27 | // CSS to be applied to image: |
---|
| 28 | imgCSS: {}, |
---|
| 29 | // Distance between cursor and preview: |
---|
[11947] | 30 | distanceFromCursor: {top:10, left:10}, |
---|
[11079] | 31 | // Boolean, whether or not to preload images: |
---|
[12004] | 32 | preloadImages: false, |
---|
[11079] | 33 | // Callback: run when link is hovered: container is shown: |
---|
| 34 | onShow: function(){}, |
---|
| 35 | // Callback: container is hidden: |
---|
| 36 | onHide: function(){}, |
---|
| 37 | // Callback: Run when image within container has loaded: |
---|
| 38 | onLoad: function(){}, |
---|
| 39 | // ID to give to container (for CSS styling): |
---|
| 40 | containerID: 'imgPreviewContainer', |
---|
| 41 | // Class to be given to container while image is loading: |
---|
| 42 | containerLoadingClass: 'loading', |
---|
| 43 | // Prefix (if using thumbnails), e.g. 'thumb_' |
---|
| 44 | thumbPrefix: '', |
---|
| 45 | // Where to retrieve the image from: |
---|
| 46 | srcAttr: 'href', |
---|
[13923] | 47 | considerBorders:'false' |
---|
[11947] | 48 | |
---|
[11079] | 49 | }, userDefinedSettings), |
---|
[11947] | 50 | |
---|
[11079] | 51 | $container = $('<div/>').attr('id', s.containerID) |
---|
| 52 | .append('<img/>').hide() |
---|
| 53 | .css('position','absolute') |
---|
| 54 | .appendTo('body'), |
---|
[11947] | 55 | |
---|
[11079] | 56 | $img = $('img', $container).css(s.imgCSS), |
---|
[11947] | 57 | |
---|
[11079] | 58 | // Get all valid elements (linking to images / ATTR with image link): |
---|
| 59 | $collection = this.filter(':linkingToImage(' + s.srcAttr + ')'); |
---|
[11947] | 60 | |
---|
[11079] | 61 | // Re-usable means to add prefix (from setting): |
---|
| 62 | function addPrefix(src) { |
---|
| 63 | return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2'); |
---|
| 64 | } |
---|
[11947] | 65 | |
---|
[11079] | 66 | if (s.preloadImages) { |
---|
| 67 | (function(i){ |
---|
| 68 | var tempIMG = new Image(), |
---|
| 69 | callee = arguments.callee; |
---|
| 70 | tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr)); |
---|
| 71 | tempIMG.onload = function(){ |
---|
| 72 | $collection[i + 1] && callee(i + 1); |
---|
| 73 | }; |
---|
| 74 | })(0); |
---|
| 75 | } |
---|
[11947] | 76 | |
---|
[11079] | 77 | $collection |
---|
| 78 | .mousemove(function(e){ |
---|
| 79 | // 'considerBorders' functionality |
---|
| 80 | if (s.considerBorders == 'true') { |
---|
| 81 | if (($img.width() > 0) && ($img.height() > 0) || 1==1) { |
---|
| 82 | if (($img.width() > 0) && ($img.height() > 0)) |
---|
| 83 | $img.css({'display':'block'}); |
---|
| 84 | var cur_bot_dist = $(window).height() - e.clientY; |
---|
| 85 | var cur_lr_dist = $(window).width() - e.clientX; |
---|
| 86 | var position_y = e.pageY+s.distanceFromCursor.top+"px"; |
---|
| 87 | var position_x = e.pageX+s.distanceFromCursor.left+"px"; |
---|
| 88 | var box_height = $container.height()+50; |
---|
| 89 | var box_width = $container.width()+50; |
---|
| 90 | |
---|
| 91 | if (cur_bot_dist < (box_height)) { |
---|
| 92 | position_y = e.pageY-(box_height-cur_bot_dist)+"px"; |
---|
| 93 | } |
---|
| 94 | if (e.clientY < s.distanceFromCursor.top) { |
---|
| 95 | position_y = e.pageY+"px"; |
---|
| 96 | } |
---|
| 97 | if (cur_lr_dist < (box_width)) { |
---|
| 98 | position_x = e.pageX-(box_width+15)+"px"; |
---|
| 99 | } |
---|
| 100 | $container.css({ |
---|
| 101 | top: position_y, |
---|
| 102 | left: position_x |
---|
| 103 | }); |
---|
| 104 | } |
---|
| 105 | // #--considerBorders |
---|
| 106 | } else { |
---|
[11947] | 107 | $container.css({ |
---|
| 108 | top: e.pageY + s.distanceFromCursor.top + 'px', |
---|
| 109 | left: e.pageX + s.distanceFromCursor.left + 'px' |
---|
| 110 | }); |
---|
| 111 | } |
---|
| 112 | |
---|
[11079] | 113 | }) |
---|
| 114 | .hover(function(){ |
---|
[11947] | 115 | |
---|
[11079] | 116 | var link = this; |
---|
| 117 | $container |
---|
| 118 | .addClass(s.containerLoadingClass) |
---|
| 119 | .show(); |
---|
| 120 | $img |
---|
| 121 | .load(function(){ |
---|
| 122 | $container.removeClass(s.containerLoadingClass); |
---|
| 123 | $img.show(); |
---|
| 124 | s.onLoad.call($img[0], link); |
---|
| 125 | }) |
---|
[11947] | 126 | .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ); |
---|
| 127 | |
---|
[11079] | 128 | s.onShow.call($container[0], link); |
---|
[11947] | 129 | |
---|
[11079] | 130 | }, function(){ |
---|
[11947] | 131 | |
---|
[11079] | 132 | $container.hide(); |
---|
[11947] | 133 | $img.unbind('load').attr('src','').hide(); |
---|
[11079] | 134 | s.onHide.call($container[0], this); |
---|
[11947] | 135 | |
---|
[11079] | 136 | }); |
---|
[11947] | 137 | |
---|
[11079] | 138 | // Return full selection, not $collection! |
---|
| 139 | return this; |
---|
[11947] | 140 | |
---|
[11079] | 141 | }; |
---|
[11947] | 142 | |
---|
| 143 | })(jQuery); |
---|