jQuery image fullscreen popup

fullscreen-gallery.js

/*
jQuery's $("") function ist ein selector, mit dem man per css Selektor,
elemente auf der Page auswählen kann. Ist sehr performant und einfach zu nutzen.
jQuery wird durch den Scripttag in der index.html eingebunden.

*/

var images = $("img");
var fullscreenGallery = $('<div id="fullscreen-view"></div>');
var galleryImageWrapper = $('<div id="image-wrapper"></div>');

fullscreenGallery.append(galleryImageWrapper);
fullscreenGallery.append($('<div id="fullscreen-controls"></div>').append($('<span class="close">X</span>')));

$("body").append(fullscreenGallery);
var fullscreenOpen = false;

// Event handler von jQuery.
images.on("click", function(e) {
    var imageUrl = $(this).attr("src-data");
    toggleFullscreen(imageUrl);
});

function toggleFullscreen(url){
    this.fullscreenOpen = !this.fullscreenOpen;
    if(this.fullscreenOpen){
        this.fullscreenGallery.addClass("open");
        this.galleryImageWrapper.css("background-image", "url('" + url + "')");
        $("body").addClass("no-scroll");
    }else{
        this.fullscreenGallery.removeClass("open");
        $("body").removeClass("no-scroll");
    }
}

$('#fullscreen-view .close').on("click", function(e){
    toggleFullscreen("");
});

style.css

/*einfach in eine extra Datei kopieren und einbinden, oder in ein vorhandenes stylsheet kopieren.*/

*{
    box-sizing: border-box; /* Damit der image wrapper vom padding von #fullscreen-view nicht aus dem Bild gedrückt wird. */
    /* Lese: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing */
}

 /* Eine Klasse, die auf dem body getoggelt wird, sobald #fullscreen-view sichtbar ist. Sie verhindert das runter/hoch scrollen. */
.no-scroll{
    overflow-y: hidden; 
}

/* Grundsätzlichen Regeln des #fullscreen-view */
#fullscreen-view{ 
    width: 100vw; /* 1vw = 1% der breite des Viewports; 100vw = 100% */
    height: 100vh; /* 1vh = 1& der höhe des Viewports; 100vh = 100% */
    position: fixed;
    display: none;
    background: rgba(0,0,0,0.7);
    padding: 20px;
    top: 0; 
    left: 0;
}

/* Damit #fullscreen-view sichtbar wird. Wird in der function toggleFullscreen(url) getoggelt*/
#fullscreen-view.open{ 
    display: block;
}

/* Weil wir das Bild per CSS anzeigen und nicht mit einem <img> Element, müssen hier ein par rules gesetzt werden. */
#image-wrapper{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

/* Generelle Rules für die Controls. Damit alle gleich aussehen. Individuelle einstellungen kommen weiter unten. */
#fullscreen-controls span{
    color: #000;
    font-size: 1.5em;
    background: #f8f8f8;
    position: absolute;
    border: 3px solid #2c2c29;
    border-radius: 100px;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
}

/* Individuelle Rules für den Button zum schließen des #fullscreen-view */
#fullscreen-controls .close{
    top: 20px;
    right: 20px;
}