<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 );
