"Image Magnifier"
Bootstrap 3.3.0 Snippet by rasheedbhutto

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 mrgntop"> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/1/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/2/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/3/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/4/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/5/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/1/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/2/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/6/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/7/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/8/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/9/" alt=""> </div> </div><!--/span--> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="mag"> <img data-toggle="magnify" class="img-responsive" src="http://lorempixel.com/1000/1000/food/5/" alt=""> </div> </div><!--/span--> </div><!--/row--> <a href="http://hkmbhutto.wix.com/abdulrasheed">more</a> </div> <!-- / .container -->
/* Image Magnifier by: http://hkmbhutto.wix.com/abdulrasheed */ .mrgntop{ margin-top:20px; } .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: 300px; height: 300px; z-index:999999; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100% } a{ color:#333; margin:20px; font-size:22px; } a:hover{ text-decoration:none; color:#333; }
!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: