intense.js is a very simple and effective JavaScript library for displaying an enlarged version of an image when clicked.
In this article, we’ll explain how to use intense.js to enlarge images and scroll the enlarged view both vertically and horizontally.
Required CSS Setup
First, set up the CSS that defines the thumbnail area for images to be enlarged. This thumbnail area is defined as the .demo class.
When the mouse cursor hovers over this area, a zoom icon appears, and clicking it will display the enlarged image.
<style>
* {
padding: 0;
margin: 0;
}
body {
font-size: 14px;
text-align: center;
}
.ttl{
text-align: center;
font-size: 20px;
padding: 20px 0 40px 0;
line-height: 1.8em;
}
.demo {
cursor: url("plus_cursor.png") 25 25, pointer;
display: inline-block;
width: 300px;
height: 200px;
background-size: cover;
background-position: 50% 50%;
background-image: url("yakei.jpg");
}
</style>
HTML Markup
Next, create the thumbnail area in your HTML. The key point here is to correctly set the three data attributes: data-image, data-title, and data-caption.
These attributes control how the enlarged image, title, and caption are displayed when the image is clicked.
<h1 class="ttl">Display enlarged images using intense.js and scroll them vertically and horizontally.<br>Click the image below.</h1>
<div class="demo" data-image="yakei.jpg" data-title="Image Title" data-caption="Image Description"></div>
Controlling Behavior with JavaScript and intense.js
After loading intense.js, use JavaScript to bind a click event to the thumbnail area.
This enables the enlarged image display when a thumbnail is clicked.
<script src="intense.js"></script>
<script>
var elements = document.querySelectorAll( '.demo' );
Intense( elements );
</script>
Demo Page: Enlarging and Scrolling Images Using intense.js
If you’d like to see it in action, please check out the demo page below.
Demo page for enlarging and scrolling images using intense.js
Source: Intense Images
intense.js is a proven library used in many websites and projects.
For details and more information, please refer to the official site below.
Conclusion
intense.js is a simple yet effective library for displaying enlarged images.
It’s easy to set up and widely used across many websites.
Now that you’ve learned the basics, consider implementing it in your own website or project.
* Please use it at your own risk.
Do not reuse the Google Analytics tag found inside the head tag of the demo page.
