"Microscope For Images"
Bootstrap 3.1.0 Snippet by DarkLynx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Submitted to feature snippets Feb 28, 2014 @ 11:00pm --> <!-- Code: https://github.com/marcaube/bootstrap-magnify Images: Creative Commons License http://www.flickr.com/photos/jingleslenobel/7191333770/sizes/l/ http://www.flickr.com/photos/adamtheo/5471091312/sizes/l/ http://www.flickr.com/photos/josh-rokman/9550963282/sizes/l/ --> <div class="container"> <div class="row"> <h3>Mr. M.'s Microscope</h3> <p> Different size images and magnification. <br> <a href="http://bootsnipp.com/iframe/dd1M" target="_blank">View Full Screen</a> </div> <!--/.row--> <div class="row"> <div class="col-md-12"> <div class="mag1"> <img data-toggle="magnify" src="http://farm8.staticflickr.com/7291/9550963282_872a6feb2f_o.jpg" class="img-responsive img-rounded center-block" alt=""> </div> </div> <!--/.cool-md-12--> <div class="col-md-12"> <div class="mag1"> <img data-toggle="magnify" src="http://farm9.staticflickr.com/8158/7191333770_9815024f89_k.jpg" class="img-responsive img-rounded center-block" alt=""> </div> </div> <!--/.cool-md-12--> <div class="col-md-12"> <div class="mag"> <img data-toggle="magnify" src="http://currencyguide.eu/cad-en/polymer%2050%20canadian%20dollar%20note%20reverse.jpg" class="img-responsive center-block" alt=""> </div> </div> <!--/.cool-md-12--> <div class="col-md-12"> <div class="mag2"> <img data-toggle="magnify" src="http://farm6.staticflickr.com/5140/5471091312_aa48134c4f_o.jpg" class="img-responsive center-block" alt=""> </div> <!-- /mag --> </div> <!--/.cool-md-12--> </div><!--/.row--> <hr> <p> <a href="http://validator.w3.org/check?uri=http://bootsnipp.com/iframe/dd1M&ss=1"> <span class="glyphicon glyphicon-check green"></span> HTML<sup>5</sup></a> </p> </div> <!-- / .container -->
/* Credits: https://github.com/marcaube/bootstrap-magnify */ /* for validator */ a:link { text-decoration:none; } .green, .green a { color: #339900; } body{ background-color:#111; color:white; } .col-md-12{ padding: 120px; } .mag { width:450px; margin: 0 auto; float: none; } .mag img { max-width: 100%; } .mag1 { width:120px; margin: 0 auto; float: none; } .mag1 img { max-width: 100%; } .mag2 { width:900px; margin: 0 auto; float: none; } .mag2 img { max-width: 100%; } .magnify { position: relative; cursor: none } .magnify-large { position: absolute; display: none; width: 500px; height: 500px; -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100% }
/* Credits: https://github.com/marcaube/bootstrap-magnify */ !function ($) { "use strict"; // jshint ;_; /* MAGNIFY PUBLIC CLASS DEFINITION * =============================== */ var Magnify = function (element, options) { this.init('magnify', element, options) } Magnify.prototype = { constructor: Magnify , init: function (type, element, options) { var event = 'mousemove' , eventOut = 'mouseleave'; this.type = type this.$element = $(element) this.options = this.getOptions(options) this.nativeWidth = 0 this.nativeHeight = 0 this.$element.wrap('<div class="magnify" \>'); this.$element.parent('.magnify').append('<div class="magnify-large" \>'); this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat"); this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this)); this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this)); } , getOptions: function (options) { options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) if (options.delay && typeof options.delay == 'number') { options.delay = { show: options.delay , hide: options.delay } } return options } , check: function (e) { var container = $(e.currentTarget); var self = container.children('img'); var mag = container.children(".magnify-large"); // Get the native dimensions of the image if(!this.nativeWidth && !this.nativeHeight) { var image = new Image(); image.src = self.attr("src"); this.nativeWidth = image.width; this.nativeHeight = image.height; } else { var magnifyOffset = container.offset(); var mx = e.pageX - magnifyOffset.left; var my = e.pageY - magnifyOffset.top; if (mx < container.width() && my < container.height() && mx > 0 && my > 0) { mag.fadeIn(100); } else { mag.fadeOut(100); } if(mag.is(":visible")) { var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1; var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1; var bgp = rx + "px " + ry + "px"; var px = mx - mag.width()/2; var py = my - mag.height()/2; mag.css({left: px, top: py, backgroundPosition: bgp}); } } } } /* MAGNIFY PLUGIN DEFINITION * ========================= */ $.fn.magnify = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('magnify') , options = typeof option == 'object' && option if (!data) $this.data('tooltip', (data = new Magnify(this, options))) if (typeof option == 'string') data[option]() }) } $.fn.magnify.Constructor = Magnify $.fn.magnify.defaults = { delay: 0 } /* MAGNIFY DATA-API * ================ */ $(window).on('load', function () { $('[data-toggle="magnify"]').each(function () { var $mag = $(this); $mag.magnify() }) }) } ( window.jQuery );

Related: See More


Questions / Comments: