SimpleImagePopup.v2.2.0.jquery (+ next/prev + groups)

with $.fn.cssPseudo() - single JS file -- Responsive, flexbox, centered, img-zoom within the img element

by BananaAcid

HTML

<div data-mm-gal="zoom">
  <!-- close= Key:Escape Key:Enter Mouse:LeftClick, Next= Key:LeftArrow Key:Space Mouse:RightClick Mouse:ScrollDown, Prev= Key:LeftArrow Key:BackSpace Mouse:ScrollUp -->
  <img src="//picsum.photos/200/200?image=1027" data-mm-big-group="a" data-mm-big="//picsum.photos/800/300?image=1027" title="Roksolana Zasiadko" />
  <img src="//picsum.photos/200/200?image=832" data-mm-big-group="a" data-mm-big="//picsum.photos/300/800?image=832" title="hieu le" />
  <img src="//picsum.photos/200/200?image=64" data-mm-big-group="a" data-mm-big="//picsum.photos/800/800?image=64" title="Alexander Shustov" />
  <img src="//picsum.photos/200/200?image=65" data-mm-big-group="a" data-mm-big="//picsum.photos/5000/4920?image=65" title="" alt="Alexander Shustov"/>
</div>

CSS

/* page design, not overlay */
body, html, body>div {height: 100%;}
body>div {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}
body>div>img {flex: 0 1 auto; max-width: 25%; min-width: 100px; max-height: 25%; min-height: 100px; box-sizing: border-box;}

body>div>img:hover:after {content: attr(title);} /* <- not all browsers will do this: img:after and img:before! */

JavaScript

(function($) {
    /**
     * gallery styling - hover effect
     */
    $(function() {
        $('[data-mm-big]', '[data-mm-gal=zoom]').each(function() {
          
            var $ref = $(this);
            
            // make the images react to the mouse
            $ref
            .css({
                cursor: 'pointer', 
                transition: 'all 400ms',
            })
            .cssPseudo(null, { // just add it as css definition, not as pseudo class (to allow us to to overwrite with hover - setting it with .css() on he element would always overrule this)
                clipPath: 'inset(-1px -1px -1px -1px)',
            })
            .cssPseudo('hover', {
                filter: 'saturate(2)', // some filter as an example
                transform: 'scale(calc((200 + 23) / 200))',   // ... 23 -> 10px + 10px + 3px . (3px because of strange spaces)
                clipPath: 'inset(10px 10px 10px 10px)',
            });
        });
    });
})(jQuery);

(function($) {
    /**
     * Simple Image Popup Script
     * @short SimpleImagePopup.v2.0.0.jquery
     * @author Nabil Redmann. repo+jsfiddle@bananaacid.de
     * @version 2.2.0
     *
     * @node supports keyboard and mouse/touch swipe navigation
     *
     * @description
     *   data-mm-big="large image path"  to setup and reference the large image
     *   data-mm-big-group="...name..."  to chain elements 
     */

    $(function() {

        $.cssPseudo.createSeperateStylesheet();

        // click on image -> open [data-mm-big="img"]
        $(document)
        .on('click', '[data-mm-big]', function() {
            var $ref = $(this);

            // the overlay
            $('<mm-big tabindex="0"/>')         // our web-component, tabindex makes it accept keyevents
            .cssPseudo('before', {
                content: '""',        // jQuery will not add empty properties to css. We need to enforce the quotes.
                position: 'fixed',
                top: 0,
             ...