<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 );
