An url will be detected as an image if it ends with .png, .jpg, .jpeg, .gif or .webp. The data-bblb-alt-attribute is optional but recommended for a better accessibility.

<a href="image.png" data-bblb-alt="my big image" class="bblb">Image</a>
<button type="button" data-bblb-href="image.png" data-bblb-alt="my big image" class="bblb">Image</button>

It is possible to zoom the image. To active this function the data-bblb-zoom-attribute has to be set to true. Alternatively it is possible to specify an alternative zoom-image with this parameter.

<a href="image.png" data-bblb-alt="my big image" class="bblb" data-bblb-zoom="true">Image</a>

or

<a href="image.png" data-bblb-alt="my big image" class="bblb" data-bblb-zoom="zoom-image.png">Image</a>

By default the zoomed image is twice as big as the current image. This can be customized with the data-bblb-zoomfactor-attribute.

<a href="image.png" data-bblb-alt="my big image" class="bblb" data-bblb-zoom="true" data-bblb-zoomfactor="3">Image</a>

If the value is not a number or under 1 the zoomed image will be shown with its original resolution.