| Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/css/jquery.ucompare.css |
| — | — | @@ -7,6 +7,45 @@ |
| 8 | 8 | * Version 1.0.0 |
| 9 | 9 | * |
| 10 | 10 | */ |
| 11 | | - .uc-mask {position:absolute; top:0; left:0; z-index:100; border-right:3px solid #333; overflow:hidden; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);} |
| 12 | | -.uc-bg {position:absolute; top:0; left:0; z-index:0;} |
| 13 | | -.uc-caption {position:absolute; bottom:10px; left:10px; z-index:120; background:#000; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; color:#fff; text-align:center;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:5px; font-size:12px; font-family:arial; display:none;} |
| \ No newline at end of file |
| | 11 | + .uc-mask { |
| | 12 | + position: absolute; |
| | 13 | + top: 0; |
| | 14 | + left: 0; |
| | 15 | + z-index: 100; |
| | 16 | + border-right: 3px solid #333; |
| | 17 | + overflow: hidden; |
| | 18 | + box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6); |
| | 19 | + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); |
| | 20 | + -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); |
| | 21 | + -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6); |
| | 22 | +} |
| | 23 | +.uc-bg { |
| | 24 | + position: absolute; |
| | 25 | + top: 0; |
| | 26 | + left: 0; |
| | 27 | + z-index: 0; |
| | 28 | +} |
| | 29 | +.uc-caption { |
| | 30 | + position: absolute; |
| | 31 | + bottom: 10px; |
| | 32 | + left: 10px; |
| | 33 | + z-index: 120; |
| | 34 | + |
| | 35 | + background: #000; |
| | 36 | + filter: alpha(opacity=80); |
| | 37 | + -moz-opacity:0.8; |
| | 38 | + -khtml-opacity: 0.8; |
| | 39 | + opacity: 0.8; |
| | 40 | + |
| | 41 | + color: #fff; |
| | 42 | + text-align: center; |
| | 43 | + font-size: 12px; |
| | 44 | + font-family: arial; |
| | 45 | + |
| | 46 | + -webkit-border-radius: 5px; |
| | 47 | + -moz-border-radius: 5px; |
| | 48 | + border-radius: 5px; |
| | 49 | + |
| | 50 | + padding: 5px; |
| | 51 | + display: none; |
| | 52 | +} |
| Index: trunk/extensions/VipsScaler/modules/jquery.ucompare/js/jquery.ucompare.js |
| — | — | @@ -7,27 +7,32 @@ |
| 8 | 8 | * Version 1.0.0 |
| 9 | 9 | * |
| 10 | 10 | */ |
| 11 | | -(function ($) { |
| 12 | | - $.fn.extend({ |
| 13 | | - ucompare: function (b) { |
| 14 | | - var c = { |
| | 11 | +( function ( $ ) { |
| | 12 | + $.fn.extend( { |
| | 13 | + // Hook into jquery.ucompage |
| | 14 | + ucompare: function ( localConfig ) { |
| | 15 | + // Configuration variable |
| | 16 | + var config = { |
| 15 | 17 | defaultgap: 50, |
| 16 | 18 | leftgap: 10, |
| 17 | 19 | rightgap: 10, |
| 18 | 20 | caption: false, |
| 19 | 21 | reveal: .5 |
| 20 | 22 | }; |
| 21 | | - var b = $.extend(c, b); |
| 22 | | - return this.each(function () { |
| 23 | | - var c = b; |
| 24 | | - var d = $(this); |
| 25 | | - var e = d.children("img:eq(0)").attr("src"); |
| 26 | | - var f = d.children("img:eq(1)").attr("src"); |
| 27 | | - var g = d.children("img:eq(0)").attr("alt"); |
| 28 | | - var h = d.children("img:eq(0)").width(); |
| 29 | | - var i = d.children("img:eq(0)").height(); |
| 30 | | - d.children("img").hide(); |
| 31 | | - d.css({ |
| | 23 | + $.extend( config, localConfig ); |
| | 24 | + return this.each( function () { |
| | 25 | + /** Initialization function */ |
| | 26 | + |
| | 27 | + var container = $(this); |
| | 28 | + // Extract image attributes |
| | 29 | + var imageLeftSource = container.children("img:eq(0)").attr("src"); |
| | 30 | + var imageRightSource = container.children("img:eq(1)").attr("src"); |
| | 31 | + var caption = container.children("img:eq(0)").attr("alt"); |
| | 32 | + var width = container.children("img:eq(0)").width(); |
| | 33 | + var height = container.children("img:eq(0)").height(); |
| | 34 | + // Hide both images |
| | 35 | + container.children("img").hide(); |
| | 36 | + container.css({ |
| 32 | 37 | overflow: "hidden", |
| 33 | 38 | position: "relative" |
| 34 | 39 | }); |
| — | — | @@ -36,38 +41,57 @@ |
| 37 | 42 | * MediaWiki hack: |
| 38 | 43 | * Parent element height can still be 0px after hiding the images |
| 39 | 44 | * so we really want to update its dimensions. |
| 40 | | - */ |
| 41 | | - d.width(h); d.height(i); |
| | 45 | + */ |
| | 46 | + container.width(width); container.height(height); |
| 42 | 47 | |
| 43 | | - d.append('<div class="uc-mask"></div>'); |
| 44 | | - d.append('<div class="uc-bg"></div>'); |
| 45 | | - d.append('<div class="uc-caption">' + g + "</div>"); |
| 46 | | - d.children(".uc-mask, .uc-bg").width(h); |
| 47 | | - d.children(".uc-mask, .uc-bg").height(i); |
| 48 | | - d.children(".uc-mask").animate({ |
| 49 | | - width: h - c.defaultgap |
| | 48 | + // The left part is the foreground image |
| | 49 | + container.append('<div class="uc-mask"></div>'); |
| | 50 | + // The right part is the background image |
| | 51 | + container.append('<div class="uc-bg"></div>'); |
| | 52 | + // Caption |
| | 53 | + container.append( $( '<div class="uc-caption" />' ).text( caption ) ); |
| | 54 | + // Set the foreground and background image dimensions |
| | 55 | + container.children(".uc-mask, .uc-bg").width(width); |
| | 56 | + container.children(".uc-mask, .uc-bg").height(height); |
| | 57 | + // Fancy initial animation |
| | 58 | + container.children(".uc-mask").animate({ |
| | 59 | + width: width - config.defaultgap |
| 50 | 60 | }, 1e3); |
| 51 | | - d.children(".uc-mask").css("backgroundImage", "url(" + e + ")"); |
| 52 | | - d.children(".uc-bg").css("backgroundImage", "url(" + f + ")"); |
| 53 | | - if (c.caption) d.children(".uc-caption").show() |
| 54 | | - }).mousemove(function (c) { |
| 55 | | - var d = b; |
| 56 | | - var e = $(this); |
| 57 | | - pos_img = e.position()["left"]; |
| 58 | | - pos_mouse = c.pageX - e.children(".uc-mask").offset().left; |
| 59 | | - new_width = pos_mouse - pos_img; |
| 60 | | - img_width = e.width(); |
| 61 | | - img_cap_one = e.children("img:eq(0)").attr("alt"); |
| 62 | | - img_cap_two = e.children("img:eq(1)").attr("alt"); |
| 63 | | - if (new_width > d.leftgap && new_width < img_width - d.rightgap) { |
| 64 | | - e.children(".uc-mask").width(new_width) |
| | 61 | + // Set the images |
| | 62 | + container.children(".uc-mask").css("backgroundImage", "url(" + imageLeftSource + ")"); |
| | 63 | + container.children(".uc-bg").css("backgroundImage", "url(" + imageRightSource + ")"); |
| | 64 | + if ( config.caption ) { |
| | 65 | + container.children(".uc-caption").show() |
| | 66 | + } |
| | 67 | + }).mousemove(function (event) { |
| | 68 | + /** Mouse movent event handler */ |
| | 69 | + |
| | 70 | + // Create a jQuery object of the container |
| | 71 | + var container = $(this); |
| | 72 | + |
| | 73 | + // Calculate mouse position relative to the left of the image |
| | 74 | + var mousePosition = event.pageX - container.children(".uc-mask").offset().left; |
| | 75 | + |
| | 76 | + // Extract image width |
| | 77 | + var imageWidth = container.width(); |
| | 78 | + |
| | 79 | + // Extract caption |
| | 80 | + var captionLeft = container.children("img:eq(0)").attr("alt"); |
| | 81 | + var captionRight = container.children("img:eq(1)").attr("alt"); |
| | 82 | + |
| | 83 | + if ( mousePosition > config.leftgap && |
| | 84 | + mousePosition < imageWidth - config.rightgap ) { |
| | 85 | + // Set the width of the left image |
| | 86 | + container.children(".uc-mask").width( mousePosition ); |
| 65 | 87 | } |
| 66 | | - if (new_width < img_width * d.reveal) { |
| 67 | | - e.children(".uc-caption").html(img_cap_two) |
| | 88 | + |
| | 89 | + // Set caption |
| | 90 | + if ( mousePosition < imageWidth * config.reveal ) { |
| | 91 | + container.children(".uc-caption").text( captionRight ); |
| 68 | 92 | } else { |
| 69 | | - e.children(".uc-caption").html(img_cap_one) |
| | 93 | + container.children(".uc-caption").text( captionLeft ); |
| 70 | 94 | } |
| 71 | | - }) |
| 72 | | - } |
| 73 | | - }) |
| 74 | | -})(jQuery) |
| | 95 | + } ); // End of return statement |
| | 96 | + } // End of ucompare function |
| | 97 | + } ); |
| | 98 | +} )( jQuery ); |