Click to enlarge is a common feature on many sites nowadays. And while it may seem like a trivial feature to add to your website, just try it, and then try it on every browser and screen size, and you'll soon find that you're better off forgetting the whole thing and using some 3rd party library instead. Which is why I created the following for your coding pleasure.
It is designed to be a simple plug and play file and will work with any image element on any site. Feel free to modify it and improve it in any way that you wish for all of your web projects. And if you find it useful, feel free to send me a kind word or two.
Features
The script is designed to generate a responsive modal window for an image element once it has been clicked. It will dynamically render the appropriate control buttons, such as 'close' on each item and will dispose of those elements when its closed. A slight hover animation is also added to each element that is being targeted. An overlay is dynamically generated on click as well, and disposed of when needed. All styles are created dynamically in JavaScript, so there is no need to reference any external stylesheet.
In Action
But because actions speak louder than words, here is a quick example of the script in action.
The new image size is calculated based on the current browser dimensions and the original image size. If the original image is large enough, the modal will be created to wrap the image in its entirety. And if the image is larger than the allowable size, it will be sized to fit the max allowable size. Again, feel free to play with these sizes yourself to whatever makes the most sense for your applications.
How to use it
The script is designed to be class-based. That is, you will need to specify a certain class in each element that you wish to target. On load any elements with that class will generate the necessary controls and events. In order to use it, you reference the script as you would any other script.
<script type="text/javascript" src="clicktoenlarge.js"></script>
Then you simply add a class to each element that you wish to target.
<div>
<img src="img1.jpg" class="clicktoenlarge" />
<img src="img2.jpg" class="clicktoenlarge" />
</div>
And that is essentially it. You'll have a fully functional click to enlarge script that can be used on any website and that will work with any screen size. The full source is down below for your copy and paste pleasure. Feel free to play around with it and use it as you will and if you found it useful also feel free to throw a few kind words my way.
<script>
var rand = Math.floor(Math.random() * 1000); // keeps collisions at bay
var maxWidth = 0;
var maxHeight = 0;
var newWidth = 0;
var newHeight = 0;
// offset between window and image
// used for centering
var offsetx = 0;
var offsety = 0;
function init131() {
var images = document.querySelectorAll(".clicktoenlarge");
var body = document.querySelector("body");
var body_rect = body.getBoundingClientRect(); // used to calculate the maximum allowable (80%)
maxWidth = Math.floor(window.innerWidth * .8); // maximum allowable width based on screen size
maxHeight = Math.floor(window.innerHeight * .8); // maximum allowable height based on screen size
for (var i = 0 ; i < images.length; i++) {
var image = images[i];
var rect = image.getBoundingClientRect();
var hover_text = document.createElement("div");
hover_text.style.textAlign = "center";
hover_text.style.width = rect.width + "px";
image.style.transition = ".8s opacity";
image.style.cursor = "pointer";
hover_text.innerHTML = "click to enlarge";
image.addEventListener('click', function () {
var div = document.createElement("div"); // max allowable parent
var overlay = document.createElement("div");
var close = document.createElement("div");
var img = document.createElement("img");
div.style.cssText = "position:fixed;z-index:2000;border:solid 6px #777;border-radius:8px;overflow:hidden;background:white;text-align:center;";
overlay.style.cssText = "background:#444;opacity:.8;position:fixed;top:0px;width:100%;height:1000px;z-index:1000;left:0px;";
close.style.cssText = "background:#222;color:white;cursor:pointer;position:absolute;top:0px;right:0px;font-size:10pt;width:20px;height:20px;border-radius:50%;text-align:center;";
overlay.className = "overlay_" + rand;
div.className = "clicktoenlarge_" + rand;
// only do this if the image size is larger than the max allowable
img.src = this.src;
// image is larger than the allowable space of 80%
if (this.naturalWidth > maxWidth || this.naturalHeight > maxHeight) {
newWidth = maxWidth;
newHeight = maxHeight;
div.style.width = maxWidth + "px";
div.style.height = maxHeight + "px";
}
else {
newWidth = this.naturalWidth;
newHeight = this.naturalHeight;
div.style.width = this.naturalWidth + "px";
div.style.height = this.NaturalHeight + "px";
}
img.style.maxHeight = div.style.height;
div.style.width = img.style.width + "px";
offsetx = Math.floor((window.innerWidth - newWidth) / 2);
offsety = Math.floor((window.innerHeight - newHeight) / 2);
div.style.top = offsety + "px";
div.style.left = offsetx + "px";
close.innerHTML = "x";
close.addEventListener('click', function () {
var overlay = document.querySelector(".overlay_" + rand);
var clicktoenlarge = document.querySelector(".clicktoenlarge_" + rand);
body.removeChild(overlay);
body.removeChild(clicktoenlarge);
});
div.appendChild(close);
div.appendChild(img);
body.appendChild(div);
body.appendChild(overlay);
});
image.addEventListener('mouseover', function () {
this.style.opacity = ".7";
this.style.boxSizing = "border-box";
});
image.addEventListener('mouseout', function () {
this.style.opacity = "1";
});
if (image.nextSibling) {
image.parentNode.insertBefore(hover_text, image.nextSibling);
}
else {
image.parentNode.appendChild(hover_text);
}
}
}
window.addEventListener('load', function () {
init131();
});
</script>
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.