Changeset 11947
- Timestamp:
- Aug 14, 2011, 5:41:48 PM (13 years ago)
- Location:
- extensions/imgpreview
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
extensions/imgpreview/css/imgpreview.css
r11946 r11947 6 6 min-width: 32px; 7 7 padding: 12px; 8 z-index: 900;8 z-index: 1000; 9 9 } 10 10 #tooltip img { … … 12 12 max-width:600px; 13 13 } 14 /* Text below image */ 15 #tooltip span { 16 color: #000; 17 text-align: center; 18 display: block; 19 padding: 10px 0 3px 0; 20 } -
extensions/imgpreview/js/imgpreview.js
r11079 r11947 1 /*2 * imgPreview jQuery plugin3 * Copyright (c) 2009 James Padolsey4 * j@qd9.co.uk | http://james.padolsey.com5 * Dual licensed under MIT and GPL.6 * Updated: 09/02/097 * @author James Padolsey8 * @version 0.229 */10 /*11 (function(c){c.expr[':'].linkingToImage=function(a,g,e){return!!(c(a).attr(e[3])&&c(a).attr(e[3]).match(/\.(gif|jpe?g|png|bmp)$/i))};c.fn.imgPreview=function(j){var b=c.extend({imgCSS:{},distanceFromCursor:{top:10,left:10},preloadImages:true,onShow:function(){},onHide:function(){},onLoad:function(){},containerID:'imgPreviewContainer',containerLoadingClass:'loading',thumbPrefix:'',srcAttr:'href'},j),d=c('<div/>').attr('id',b.containerID).append('<img/>').hide().css('position','absolute').appendTo('body'),f=c('img',d).css(b.imgCSS),h=this.filter(':linkingToImage('+b.srcAttr+')');function i(a){return a.replace(/(\/?)([^\/]+)$/,'$1'+b.thumbPrefix+'$2')}if(b.preloadImages){(function(a){var g=new Image(),e=arguments.callee;g.src=i(c(h[a]).attr(b.srcAttr));g.onload=function(){h[a+1]&&e(a+1)}})(0)}h.mousemove(function(a){d.css({top:a.pageY+b.distanceFromCursor.top+'px',left:a.pageX+b.distanceFromCursor.left+'px'})}).hover(function(){var a=this;d.addClass(b.containerLoadingClass).show();f.load(function(){d.removeClass(b.containerLoadingClass);f.show();b.onLoad.call(f[0],a)}).attr('src',i(c(a).attr(b.srcAttr)));b.onShow.call(d[0],a)},function(){d.hide();f.unbind('load').attr('src','').hide();b.onHide.call(d[0],this)});return this}})(jQuery);12 */13 1 /* 14 2 * imgPreview jQuery plugin … … 23 11 * !!!!!!! -> This plugin contains ADDITIONS. 'considerBorders' param. You will have to add 24 12 * it yourself to newest version, if you use this param 25 13 */ 26 14 (function($){ 27 15 28 16 $.expr[':'].linkingToImage = function(elem, index, match){ 29 17 // This will return true if the specified attribute contains a valid link to an image: 30 18 return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i)); 31 19 }; 32 20 33 21 $.fn.imgPreview = function(userDefinedSettings){ 34 22 35 23 var s = $.extend({ 36 24 37 25 /* DEFAULTS */ 38 minWidth: 32, 39 imgSrcHide: 'about:blank', 26 40 27 // CSS to be applied to image: 41 28 imgCSS: {}, 42 29 // Distance between cursor and preview: 43 distanceFromCursor: {top: 20, left:20},30 distanceFromCursor: {top:10, left:10}, 44 31 // Boolean, whether or not to preload images: 45 32 preloadImages: true, … … 58 45 // Where to retrieve the image from: 59 46 srcAttr: 'href', 60 //The script moves the box depending on window borders 61 // Added by Ujeen 62 considerBorders: 'false' 63 47 considerBorders:'false' 48 64 49 }, userDefinedSettings), 65 50 66 51 $container = $('<div/>').attr('id', s.containerID) 67 52 .append('<img/>').hide() 68 53 .css('position','absolute') 69 54 .appendTo('body'), 70 55 71 56 $img = $('img', $container).css(s.imgCSS), 72 57 73 58 // Get all valid elements (linking to images / ATTR with image link): 74 59 $collection = this.filter(':linkingToImage(' + s.srcAttr + ')'); 75 60 76 61 // Re-usable means to add prefix (from setting): 77 62 function addPrefix(src) { 78 63 return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2'); 79 64 } 80 65 81 66 if (s.preloadImages) { 82 67 (function(i){ … … 89 74 })(0); 90 75 } 91 76 92 77 $collection 93 78 .mousemove(function(e){ … … 120 105 // #--considerBorders 121 106 } else { 122 123 124 125 126 127 107 $container.css({ 108 top: e.pageY + s.distanceFromCursor.top + 'px', 109 left: e.pageX + s.distanceFromCursor.left + 'px' 110 }); 111 } 112 128 113 }) 129 114 .hover(function(){ 130 115 131 116 var link = this; 132 117 $container … … 137 122 $container.removeClass(s.containerLoadingClass); 138 123 $img.show(); 139 $container.width($img.width());140 124 s.onLoad.call($img[0], link); 141 125 }) 142 .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ) 143 .$(function(){ 144 // 'considerBorders' functionality 145 if (s.considerBorders == 'true') { 146 $(this).css({'display':'none'}); 147 } 148 // #--considerBorders 149 }); 150 126 .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ); 127 151 128 s.onShow.call($container[0], link); 152 129 153 130 }, function(){ 154 131 155 132 $container.hide(); 156 $img.unbind('load').attr('src', s.imgSrcHide).hide(); 157 $container.width(s.minWidth); 133 $img.unbind('load').attr('src','').hide(); 158 134 s.onHide.call($container[0], this); 159 135 160 136 }); 161 137 162 138 // Return full selection, not $collection! 163 139 return this; 164 140 165 141 }; 166 142 167 143 })(jQuery); -
extensions/imgpreview/js/init.js
r11086 r11947 1 1 //$(document).ready(function(){ 2 /* 2 3 (function($) { 3 4 previewBoxId = 'tooltip'; … … 14 15 15 16 //}); 16 })(jQuery); 17 })(jQuery);*/ 18 19 $('.thumbnails a, #thumbnails a').imgPreview({ 20 containerID: 'tooltip', 21 srcAttr: 'imgsrc', 22 considerBorders:'true', 23 // When container is shown: 24 onShow: function(link){ 25 $('<span>' + $(link).children().attr("title") + '</span>').appendTo(this); 26 // Animate link: 27 $(link).stop().animate({opacity:0.4}); 28 // Reset image: 29 $('img', this).stop().css({opacity:0}); 30 31 }, 32 onLoad: function(){ 33 // Animate image 34 $(this).animate({opacity:1}, 300); 35 }, 36 // When container hides: 37 onHide: function(link){ 38 $('span', this).remove(); 39 // Animate link: 40 $(link).stop().animate({opacity:1}); 41 42 } 43 });
Note: See TracChangeset
for help on using the changeset viewer.