IMAGG is a lightweight script that triggers modal windows upon clicking a specific image.
You can define the images that will initiate the modal window giving them the class "triggerIMAGG".
The title of the modal window can be defined/modified by assigning/editing the "title" attribute in the HTML code for the "triggerIMAGG".
The caption of the modal window can be defined/modified by assigning/editing the "alt" attribute in the HTML code for the "triggerIMAGG". You can use the 'IMAGG_ls' keyword in the 'alt' attribute to separate multiple paragraphs in your modal image.
GG, easy! :)
Implementing IMAGG is straightforward.
You have the option to customize its appearance by implementing your custom CSS styles.
<!-- Place the following code in the HTML head -->
<link rel="stylesheet" href="https://manuelmsni.github.io/IMAGG/css/IMAGG_default.css">
<!-- Place the following code at the end of the body in your HTML file -->
<script src="https://manuelmsni.github.io/IMAGG/IMAGG_1.0/js/IMAGG.js"></script>
<!-- If you choose this option, you will need to import the jQuery libraries -->
<!-- Place the following code at the end of the body in your HTML file -->
<script src="https://manuelmsni.github.io/IMAGG/IMAGG_1.0_jQuery/js/IMAGG.js"></script>
Here is an example of the implementation in the html: https://github.com/manuelmsni/IMAGG/blob/main/index.html
You can test it here: https://manuelmsni.github.io/IMAGG