IMAGG (Easy modal images)

Description:

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! :)

Easy set up IMAGG:

Implementing IMAGG is straightforward.

You have the option to customize its appearance by implementing your custom CSS styles.

- Default stylesheet (CSS)

<!-- Place the following code in the HTML head -->
<link rel="stylesheet" href="https://manuelmsni.github.io/IMAGG/css/IMAGG_default.css">

IMPORTANT! Choose only one of the options bellow:

- (Option 1) JavaScript

<!-- 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>

- (Option 2) jQuery

<!-- 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>

Examples:

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