<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>
<li><strong>data-toggle="image-zoom"</strong> - Tells the script that this image can be zoomed</li>
<li><strong>data-src</strong> - Full or relative path to the big image</li>
<li><strong>data-caption</strong> - Title of the image, if not set, it won't show anything</li>
<li><strong>data-description</strong> - Description of the image, if not set, it won't show anything</li>
</ul>
<p>Click the image below:</p>
<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" />
</div>
</div>
</div>
</body>
<div style="position: fixed;bottom: 5%;right: 5%;padding: 1rem;background: #fff;border: 1px solid #e9ecef;border-radius: 0.35rem;color: #a9aeb3;box-shadow: 0 0 20px #e9ecef;">
<h5 style="margin-bottom: 1rem;padding-bottom: 1rem;text-align: center;">Support my work @ MMLTech</h5>
<div style="display: flex;align-items: center;">
<a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a>
<a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
.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 */
(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);
$("body").append(modal_element);
modal_element.modal("show");
};
let build = function (e) {
/**
* Build the modal using the dom element data items
*/
$(e).on("click", function () {
caption = $(this).attr("data-caption");
description = $(this).attr("data-description");
src = $(this).attr("data-src");
ShowModal();
});
/**
* Close the modal if zoom-out image is clicked
*/
$(document).on("click", ".image-zoom-out", function () {
$(document).find(".modal").modal("hide");
});
/**
* Remove the modal from DOM
*/
$(document).on("hidden.bs.modal", ".image-zoom-modal", function () {
$(this).remove();
})
};
return this.each(function() {
return new build(this);
});
};
})(jQuery);
$(document).ready(function () {
$(document).find('[data-toggle="image-zoom"]').modalZoom();
});
