"Microscope 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 ---------->
<!-- Submitted to feature snippets Feb 28, 2014 @ 11:00pm -->
<!--
Code:
https://github.com/marcaube/bootstrap-magnify
Images: Creative Commons License
http://www.flickr.com/photos/jingleslenobel/7191333770/sizes/l/
http://www.flickr.com/photos/adamtheo/5471091312/sizes/l/
http://www.flickr.com/photos/josh-rokman/9550963282/sizes/l/
-->
<div class="container">
<div class="row">
<h3>Mr. M.'s Microscope</h3>
<p>
Different size images and magnification.
<br>
<a href="http://bootsnipp.com/iframe/dd1M" target="_blank">View Full Screen</a>
</div> <!--/.row-->
<div class="row">
<div class="col-md-12">
<div class="mag1">
<img data-toggle="magnify" src="http://farm8.staticflickr.com/7291/9550963282_872a6feb2f_o.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div> <!--/.cool-md-12-->
<div class="col-md-12">
<div class="mag1">
<img data-toggle="magnify" src="http://farm9.staticflickr.com/8158/7191333770_9815024f89_k.jpg" class="img-responsive img-rounded center-block" 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
37
/*
Credits:
https://github.com/marcaube/bootstrap-magnify
*/
/* for validator */
a:link {
text-decoration:none;
}
.green, .green a {
color: #339900;
}
body{
background-color:#111;
color:white;
}
.col-md-12{
padding: 120px;
}
.mag {
width:450px;
margin: 0 auto;
float: none;
}
.mag img {
max-width: 100%;
}
.mag1 {
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:

very nice ... makes me think of a macro website where all images are small and you need to hover over to see them big like in your example.

DK () - 8 years ago - Reply 0


really long time to find

nev3rmi () - 9 years ago - Reply 0


This is way too cool!

AZU () - 10 years ago - Reply 0


Just Awesome Dude!

PShah () - 10 years ago - Reply 0


Uau!!! Very cool dude!!

David Rocha () - 10 years ago - Reply 0


Very, very nice :)

tretasdanet () - 10 years ago - Reply 0