"Resource efficient image zoom jQuery plugin"
Bootstrap 4.1.1 Snippet by MMLTech

Post to Facebook Tweet this

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="//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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Resource efficient image zoom jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container pt-5">
<div class="row">
<div class="col-12">
<h1>Resource efficient image zoom jQuery</h1>
<hr>
<p>Initialize the plugin:</p>
<textarea class="form-control mb-4" rows="3">$(document).ready(function () {
$(document).find('[data-toggle="image-zoom"]').modalZoom();
});</textarea>
<p>Element sample:</p>
<textarea class="form-control mb-4" rows="8"><img
src="https://plhold.com/img/150/000/fff?Text=mmltools.com"
data-toggle="image-zoom"
data-src="https://plhold.com/img/1920x1080/000/fff?Text=mmltools.com"
data-caption="Test Caption"
data-description="Test description"
alt=""
class="mr-3 image-zoom" /></textarea>
<p>Data elements:</p>
<ul>
<li><strong>src</strong> - Full or relative path to the thumbnail</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.image-zoom-modal .modal-fit-content {
max-width: 70%;
width: -moz-fit-content;
width: fit-content;
}
.image-zoom-modal .modal-fit-content .image-zoom-out {
max-width: 100%;
cursor: zoom-out;
}
.image-zoom {
cursor: zoom-in;
}
/*# sourceMappingURL=style.css.map */
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
(function($){
$.fn.modalZoom = function(options) {
let caption = "",
description = "",
src = "";
let ShowModal = function(){
let modal_element = $('<div class="modal image-zoom-modal" tabindex="-1" role="dialog" id="DonationModal"></div>'),
dialog_element = $('<div class="modal-dialog modal-fit-content" role="document"></div>'),
content_element = $('<div class="modal-content"></div>'),
body_element = $('<div class="modal-body mt-4"></div>'),
src_element = $('<img class="image-zoom-out">'),
caption_element = $('<h4 class="image-zoom-caption">' + caption + '</h4>'),
description_element = $('<p class="image-zoom-description">' + description + '</p>'),
close_element = $('<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>');
close_element.css({
position: "absolute",
right: "5px",
opacity: 1
});
if(src.length > 0)
{
src_element.attr("src", src);
body_element.append(src_element);
}
if(caption.length > 0)
body_element.append(caption_element);
if(src.length > 0)
body_element.append(description_element);
content_element.append(close_element);
content_element.append(body_element);
dialog_element.append(content_element);
modal_element.append(dialog_element);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: