"Magnifier - Image Zoom"
Bootstrap 4.1.1 Snippet by trinhquan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="https://mark-rolich.github.io/Magnifier.js/Event.js"></script>
<script type="text/javascript" src="https://mark-rolich.github.io/Magnifier.js/Magnifier.js"></script>
<link rel="stylesheet" type="text/css" href="https://mark-rolich.github.io/Magnifier.js/magnifier.css">
<h1>Magnifier</h1>
<div class="container">
<div class="magnifier-thumb-wrapper">
<img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/250px-111_Pileated_Woodpecker.jpg">
</div>
<div class="magnifier-preview" id="preview" style="width: 268px; height: 359px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>
<div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
text-align: center;
margin: 30px 0;
}
.container {
display: flex;
justify-content: center;
margin-bottom: 50px;
}
img,
.magnifier-preview {
border: 1px solid #3333;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
var evt = new Event(),
m = new Magnifier(evt);
m.attach({
thumb: '#thumb',
large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/1000px-111_Pileated_Woodpecker.jpg',
zoom: 3,
largeWrapper: 'preview'
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: