"Magnifying Glass for Images"
Bootstrap 3.1.0 Snippet by Arcanedev

<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 ----------> <div class="container"> <div class="row"> <h3> Mr. M.'s Magnifying Glass for Images </h3> <p> <a href="http://bootsnipp.com/iframe/x4kM" target="_blank">View Full Screen</a> </p>Reference & Credits: <ul> <li> <a href="https://github.com/marcaube/bootstrap-magnify" target="_blank">marcaube: Github bootstrap-magnify project</a> </li> </ul> <hr> </div> <div class="row"> <div class="col-md-4"> <div class="mag"> iPhone<br> <img data-toggle="magnify" src="http://i.imgur.com/1fgr2IO.jpg" alt=""> </div> </div><!--/span--> <div class="col-md-4"> <div class="mag"> Lion<br> <img data-toggle="magnify" src="http://i.imgur.com/kzGVqbd.jpg" alt=""> </div> </div><!--/span--> <div class="col-md-4"> <div class="mag"> Mixer<br> <img data-toggle="magnify" src="http://i.imgur.com/YZ7AGyF.jpg" alt=""> </div> </div><!--/span--> </div><!--/row--> <hr> <br> <br> <br> <small>Creative Commons images: <br> <a href="http://tinyurl.com/flickrmixer">Desmond Talkington on Flickr.com (mixer)</a> <br> <a href="http://www.flickr.com/photos/fortherock/3898712750/sizes/z/">fortherock on Flickr.com (lion)</a> <br><br> <a href="http://tinyurl.com/tbvalid7" target="_blank">HTML 5 Valid</a></small> </div> <!-- / .container -->
/* Credits: https://github.com/marcaube/bootstrap-magnify */ .mag { width:200px; margin: 0 auto; float: none; } .mag img { max-width: 100%; } .magnify { position: relative; cursor: none } .magnify-large { position: absolute; display: none; width: 175px; height: 175px; -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 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.85), 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.85), 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: