"Magnifying Glass for Images"
Bootstrap 3.1.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
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%
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
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));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I am using ASP.NET, when using modal does not work, could anyone help?

Eric Pacheco () - 7 years ago - Reply 0


Excellent! Great Work!

Gustavo () - 8 years ago - Reply 0


Wow

Prem Kumar () - 8 years ago - Reply 0


Simply awesome, Huge thanks to share :)

Goyllo () - 9 years ago - Reply 0


Really Nice Tanks ...Great Job.

Asif Hingora () - 9 years ago - Reply 0


One of my favorite effects, thanks!

Callan () - 9 years ago - Reply 0


manliest man alive. period.

DimaNYC () - 10 years ago - Reply 0


Simply clever ! Check http://www.mathieugazaix.co... to see it in use !

Webrunner () - 10 years ago - Reply 0


Very Good , Cool
I like it
Thanks

Mohamed Tahhan () - 10 years ago - Reply 0


It would be nice if this worked with the iPhone too. Right now I can't 'zoom in' with my phone.

Tom () - 10 years ago - Reply 0


really coollllll...................

Nino Frenn () - 10 years ago - Reply 0


great job mate however when you try to intergrate it with other css like http://bootsnipp.com/snippe... it would be awesome it it worked with that

Smithy () - 10 years ago - Reply 0


Thanks everyone. Mario: Danke für den Kommentar. Ich bin auf mehr funktioniert. Dieser kann den deutschen Rechtschreibprüfung eher als Englisch geändert werden.
http://bootsnipp.com/iframe...
http://bootsnipp.com/mrmcco...

Mr. M.'s w3.org Tools: Validator, Spell Check and Link Checker- I just submitted it as a featured snipp.

mrmccormack () - 10 years ago - Reply 0


Echt tolle Arbeit!
Danke

Mario () - 10 years ago - Reply 0


Really Cool!!!

I can't wait until I come with something that I can use this for!

Great work!

Timmy () - 10 years ago - Reply 0


Good ;)

Alim Alibaev () - 10 years ago - Reply 0