JTB_MD's image handlers allows you to effortlessly handle and display images in your projects with simple attributes. You can simplify your workflow by leveraging features which designed to address common challenges in image management.

How to Use

JTB_MD's image handlers are defined in the jtbImg plugin of the library. To use them fully functional, ensure you haven't manually excluded the plugin from the library.

For detailed information on plugins, refer to the JavaScript section.

To create your images in a traditional way, you can define them like you're doing it now. By default,JTB_MD does not interfere with the assets you define using the traditional methods. However, if you want to implement JTB_MD's image features into your assets, use the jtbImg-src attribute instead of defining the image source in the src. Once you create your <img> element with jtbImg-src, the library automatically detects and applies specified features to it.

                <!-- No handler -->
<img src='...' />

<!-- Activates library features -->
<img jtbImg-src='...' />

Handlers

Handlers are versatile controllers and attentive listeners, working behind the scenes to boost the performance and design flexibility of your assets. Each handler specializes in a unique aspect, simplifying the process of incorporating images or backgrounds.

To provide a clearer understanding of their functionalities and purposes, It would be beneficial to go over each of them.

Lazy Loading

When you activate the image handlers using jtbImg-src, JTB_MD doesn't load the images directly on the page load stage. Instead, it intelligently tracks client movements and loads the related images in the background without causing any disruption.

                    <!-- Tracks user movements in page -->
<img jtbImg-src='...' />

Fault Detection

If you specify an image that does not exist or has been removed from the source, the 'fault detection' mechanism of the library detects it and replaces your image with an error image.

The default error image of JTB_MD is:

                    /*----- Default error image -----*/
var jtbImg_Err = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2ODAgNjgwIj48dGl0bGU+YXNkPC90aXRsZT48ZyBpZD0iTGF5ZXJfMyIgZGF0YS1uYW1lPSJMYXllciAzIj48cmVjdCB4PSItMTkuMTMzMDgiIHk9Ii0xOS4xOTE3NCIgd2lkdGg9IjcwNy41NzgyNSIgaGVpZ2h0PSI3MDcuNTc4MjUiIHN0eWxlPSJmaWxsOiNkOWQ5ZDkiLz48L2c+PHBhdGggZD0iTTUzMS4xNzk0MiwyMzkuMTY4NDlWNDQwLjc4OTc3Yy0uNjg4LDIuNDg4NzctMS4yNzIzNSw1LjAxMTctMi4wODAzNyw3LjQ2MDg0LTUuODEsMTcuNjA5NjItMjEuMTk2NDksMjguMzAzLTQwLjgyNCwyOC4zMDc3NHEtMTE1LjUzOTQxLjAyNzY3LTIzMS4wNzg3OS4wMDc3Yy0yMi4yNzQxNS0uMDAwMDctNDQuNTQ5MjEuMTI0MjktNjYuODIyMi0uMDM3MS0yMy41OTkyMy0uMTcxLTQxLjQ1NjA1LTE3LjkxMzcxLTQxLjQ5MjU1LTQxLjM1NnEtLjE0ODIzLTk1LjE5MzgxLjA1NjQxLTE5MC4zODc3OWE0NC4xNjUsNDQuMTY1LDAsMCwxLDIuMTA0MzYtMTMuMTYzNTJjNS41Njk4Ny0xNy4zOTgzNSwyMS4wMjA5My0yOC4yMDU4NCw0MC4wNzg0OC0yOC4yMTI1MnExNDguOTUwNi0uMDUyMTcsMjk3LjkwMTI0LS4wMTI3OSwxLjQ5MjU1LDAsMi45ODQ4OS4wNzdhNDAuOTcsNDAuOTcsMCwwLDEsMzcuMjI0MSwyOC41ODM2NEM1MjkuOTc2MywyMzQuMzk2OTIsNTMwLjUzNDU5LDIzNi43OTY0OSw1MzEuMTc5NDIsMjM5LjE2ODQ5Wm0tMjcuNjMwOSwxMjEuOTI3Yy4xMzIyMi0xLjM5NzU3LjI3Ny0yLjIxNTE5LjI3NzI5LTMuMDMyODZxLjAxNjEtNTYuMTg5ODEtLjAxOTYtMTEyLjM3OTU4Yy0uMDE3ODYtOS42NjI5Mi01LjQxNjI1LTE0Ljg1ODI1LTE1LjE5NTYxLTE0Ljg2MDE1cS0xNDguNTk1NDctLjAyOTA3LTI5Ny4xOTEuMDAwMTFjLTkuOTM1ODkuMDAyLTE1LjIwMTE4LDUuMjM1NzktMTUuMjEwNjMsMTUuMjI4MjhxLS4wNjU3Miw2OS40NDM4NS0uMDA3NzMsMTM4Ljg4NzhjLjAwMDMxLjk5NDA5LjE5MSwxLjk4ODE0LjM2NTE4LDMuNjg4MDYsMTQuNjU5ODctMTQuNjkxNjIsMjguNzA5NjEtMjguNzkwNTYsNDIuNzgxODEtNDIuODY3MDYsNy43NzI0LTcuNzc0NzYsMTUuMTMwNTEtNy43NTcsMjIuOTI4NTQuMDM0NzdxMjAuMDcyMTYsMjAuMDU2LDQwLjEyNDksNDAuMTMxNDljLjkzOTA4LjkzODY5LDEuOTM3MTgsMS44MTgzNywzLjAzMTEzLDIuODQwNzIsMS4xNjgzLTEuMTE4MjcsMi4xNjIxNC0yLjAzNDA5LDMuMTE3MTQtMi45ODg3NnE1My45OTc1MS01My45NzksMTA3Ljk4OTE5LTEwNy45NjM5NWM4LjI1NjUtOC4yNTQxNiwxNS4yMjk4LTguMjY4NTEsMjMuNDYyNjYtLjAzOTlxNDAuMTM4NjEsNDAuMTE3ODIsODAuMjcxNTQsODAuMjQxMjdDNTAxLjE5OCwzNTguOTM5NzYsNTAyLjE3NzMxLDM1OS44MDkwNiw1MDMuNTQ4NTIsMzYxLjA5NTQ1WiIgc3R5bGU9ImZpbGw6IzE0MTQxNCIvPjxwYXRoIGQ9Ik0zMTIuNjI5MSwyOTguODQ2MThhNDAuODgxNDUsNDAuODgxNDUsMCwxLDEtNDAuODc1NDUtNDAuODM4ODRBNDAuODk4MzcsNDAuODk4MzcsMCwwLDEsMzEyLjYyOTEsMjk4Ljg0NjE4WiIgc3R5bGU9ImZpbGw6IzE0MTQxNCIvPjwvc3ZnPg==';

But if you want to use something different as the error image in your projects, you can specify the URL of it via the jtbImg-errSrc attribute:

                    <!-- Uses default error image -->
<img jtbImg-src='...' />

<!-- Uses custom error image -->
<img jtbImg-src='...' jtbImg-errSrc='...' />

Dummy Loaders

If you have a large image that may load slowly, the library automatically includes a placeholder image to avoid disrupting the user's experience.

The default placeholder image for JTB_MD is:

                    /*----- Default dummy (loading) image -----*/
var jtbImg_Dummy = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOmF1dG87YmFja2dyb3VuZDojZmZmO2Rpc3BsYXk6YmxvY2s7IiB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+DQogIDxyZWN0IHg9IjQ3IiB5PSIyMi41IiByeD0iMyIgcnk9IjMuNiIgd2lkdGg9IjYiIGhlaWdodD0iMTUiIGZpbGw9IiM4YzhjOGMiPg0KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuOTIzMDc2OTIzMDc2OTIzMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogIDwvcmVjdD4NCjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNy42OTIzMDc2OTIzMDc2OTMgNTAgNTApIj4NCiAgPHJlY3QgeD0iNDciIHk9IjIyLjUiIHJ4PSIzIiByeT0iMy42IiB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgZmlsbD0iIzhjOGM4YyI+DQogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC44NDYxNTM4NDYxNTM4NDYxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgPC9yZWN0Pg0KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDU1LjM4NDYxNTM4NDYxNTM5IDUwIDUwKSI+DQogIDxyZWN0IHg9IjQ3IiB5PSIyMi41IiByeD0iMyIgcnk9IjMuNiIgd2lkdGg9IjYiIGhlaWdodD0iMTUiIGZpbGw9IiM4YzhjOGMiPg0KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNzY5MjMwNzY5MjMwNzY5M3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogIDwvcmVjdD4NCjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg4My4wNzY5MjMwNzY5MjMwOCA1MCA1MCkiPg0KICA8cmVjdCB4PSI0NyIgeT0iMjIuNSIgcng9IjMiIHJ5PSIzLjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjE1IiBmaWxsPSIjOGM4YzhjIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjY5MjMwNzY5MjMwNzY5MjNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICA8L3JlY3Q+DQo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTEwLjc2OTIzMDc2OTIzMDc3IDUwIDUwKSI+DQogIDxyZWN0IHg9IjQ3IiB5PSIyMi41IiByeD0iMyIgcnk9IjMuNiIgd2lkdGg9IjYiIGhlaWdodD0iMTUiIGZpbGw9IiM4YzhjOGMiPg0KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNjE1Mzg0NjE1Mzg0NjE1NHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogIDwvcmVjdD4NCjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMzguNDYxNTM4NDYxNTM4NDUgNTAgNTApIj4NCiAgPHJlY3QgeD0iNDciIHk9IjIyLjUiIHJ4PSIzIiByeT0iMy42IiB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgZmlsbD0iIzhjOGM4YyI+DQogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41Mzg0NjE1Mzg0NjE1Mzg0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgPC9yZWN0Pg0KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE2Ni4xNTM4NDYxNTM4NDYxNiA1MCA1MCkiPg0KICA8cmVjdCB4PSI0NyIgeT0iMjIuNSIgcng9IjMiIHJ5PSIzLjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjE1IiBmaWxsPSIjOGM4YzhjIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjQ2MTUzODQ2MTUzODQ2MTU2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgPC9yZWN0Pg0KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE5My44NDYxNTM4NDYxNTM4NCA1MCA1MCkiPg0KICA8cmVjdCB4PSI0NyIgeT0iMjIuNSIgcng9IjMiIHJ5PSIzLjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjE1IiBmaWxsPSIjOGM4YzhjIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjM4NDYxNTM4NDYxNTM4NDY0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgPC9yZWN0Pg0KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIyMS41Mzg0NjE1Mzg0NjE1NSA1MCA1MCkiPg0KICA8cmVjdCB4PSI0NyIgeT0iMjIuNSIgcng9IjMiIHJ5PSIzLjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjE1IiBmaWxsPSIjOGM4YzhjIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjMwNzY5MjMwNzY5MjMwNzdzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICA8L3JlY3Q+DQo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQ5LjIzMDc2OTIzMDc2OTIzIDUwIDUwKSI+DQogIDxyZWN0IHg9IjQ3IiB5PSIyMi41IiByeD0iMyIgcnk9IjMuNiIgd2lkdGg9IjYiIGhlaWdodD0iMTUiIGZpbGw9IiM4YzhjOGMiPg0KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMjMwNzY5MjMwNzY5MjMwNzhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICA8L3JlY3Q+DQo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjc2LjkyMzA3NjkyMzA3NjkgNTAgNTApIj4NCiAgPHJlY3QgeD0iNDciIHk9IjIyLjUiIHJ4PSIzIiByeT0iMy42IiB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgZmlsbD0iIzhjOGM4YyI+DQogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4xNTM4NDYxNTM4NDYxNTM4NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogIDwvcmVjdD4NCjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDQuNjE1Mzg0NjE1Mzg0NjQgNTAgNTApIj4NCiAgPHJlY3QgeD0iNDciIHk9IjIyLjUiIHJ4PSIzIiByeT0iMy42IiB3aWR0aD0iNiIgaGVpZ2h0PSIxNSIgZmlsbD0iIzhjOGM4YyI+DQogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wNzY5MjMwNzY5MjMwNzY5M3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogIDwvcmVjdD4NCjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMzIuMzA3NjkyMzA3NjkyMyA1MCA1MCkiPg0KICA8cmVjdCB4PSI0NyIgeT0iMjIuNSIgcng9IjMiIHJ5PSIzLjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjE1IiBmaWxsPSIjOGM4YzhjIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICA8L3JlY3Q+DQo8L2c+DQo8L3N2Zz4=';

If you prefer a different loading image for your projects, you can specify the URL using the jtbImg-loadSrc attribute. This allows you to use a custom loading image instead of the default placeholder:

You can consider using a smaller version (e.g., 10px x 10px) of the actual image as your loading image. This can create a progressive loading effect in your projects.

						<!-- Uses default loading image -->
<img jtbImg-src='...' />

<!-- Uses custom loading image -->
<img jtbImg-src='...' jtbImg-loadSrc='...' />

Background Images

Similar to the <img> tag, JTB_MD allows you to use handlers on any element to manipulate their background images.

The difference between image handlers and background-image handlers is their attribute base. For manipulating <img>, you use attributes starting with jtbImg, and for background-images, you use jtbBg. Once you define the related attributes in your elements, the handlers and features displayed above will automatically detect the element itself and apply the related handling processes to it.

Following table shows the alternative versions of classes:

Attribute	Image Version	Background Version
Attribute to initialize handlers of `jtbImg` plugin.	`jtbImg-src`	`jtbBg-src`
Attribute to define error image if fault detection activated.	`jtbImg-errSrc`	`jtbBg-errSrc`
Attribute to define image for loading process of assets.	`jtbImg-loadSrc`	`jtbBg-loadSrc`

Besides these attributes, jtbBg-src comes with additional attribute jtbBg-cover='true' which allows you to define your backgrounds as covers for your elements.

                <!-- With cover attibute -->
<div jtbBg-src='...' jtbBg-cover='true'></div>