More articles

"Click To Enlarge" Script With Pure JavaScript

Written by
Filed under
Published on
Modified on

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.

Click To Enlarge In JavaScript


Responsive

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.

Walter Guevara is a Computer Scientist, software engineer, startup founder and currently mentors for a coding bootcamp. He has been creating software for the past 15 years.

Discussion / Comments / Questions

No messages posted yet

Add a comment

Send me your weekly newsletter filled with awesome ideas
Post comment