Tutorial

Lightbox für Elementor

Hier stelle ich ein sehr kleines Script vor mit dem ein Bild in einem Pop-Up geöffnet wird.

Einfach links auf das Bild klicken, um es zu sehen.
Schema des Bildes:

<a href="https://meine-url.de/bildpfad/bild.jpg"><img src="bild.jpg"></a>

Script für WordPress (jQuery)

Folgendes Plugin biete sich an:

jQuery

(function ($) {
var over = false;
var isLoaded = false;
function setPopup(src) {
if (!$(".background-layer").length) {
$("body").append('<div class="background-layer"><div class="image-container"><div class="image-wrap"><div class="closer">×</div><img src="' + src + '" class="full-pic"></div></div></div>');
$(".background-layer").hide();
$($(".full-pic")).on("load", function () {
$(".background-layer").fadeIn(300);
setPic();
});
}
}
$("a").click(function (event) {
if ($(this).find('>img').length) {
var src = $(this).attr("href");
const checkImg = /(?<=\.)(jpg|jpeg|png|gif|JPG|JPEG|webp|svg)$/g;
let resultCheckImg = checkImg.test(src);
if (resultCheckImg) {
event.preventDefault();
setPopup(src);
}
}
});
function setPic() {
var naturalWidth = $(".full-pic").get(0).naturalWidth;
var naturalHeight = $(".full-pic").get(0).naturalHeight;
var offWidth = parseInt($(".image-container").outerWidth());
var offHeight = parseInt($(".image-container").outerHeight());
var natRatio = naturalWidth / naturalHeight;
var screenRatio = offWidth / offHeight;
if (screenRatio > natRatio) {
$(".image-wrap").css("width", offHeight * natRatio);
} else {
$(".image-wrap").css("width", "100%");
}
if (naturalHeight < offHeight) {
$(".image-wrap").css("max-height", naturalHeight);
$(".image-wrap").css("max-width", naturalWidth)
} else {
$(".image-wrap").css("max-width", "100%")
}
isLoaded = true;
}
$(document).on('click', '.closer', function () {$(".background-layer").fadeOut(300, function () {
$(".background-layer").remove();
over = false;
});
});
$(document).on('mouseover', '.image-wrap', function () {
if (isLoaded) {
over = true;
}
});
$(document).on('mouseleave', '.image-wrap', function () {
if (isLoaded) {
over = false;
}
});
$(document).on('click', '.background-layer', function () {
if (!over) {
$(".background-layer").fadeOut(300, function () {
$(".background-layer").remove();
over = false;
});
}
});
$(window).on("resize", function () {
if ($(".image-container").length) {
setPic();
}
});
})(jQuery);

Select Code

CSS

.background-layer {
box-sizing: border-box;
position: fixed;
left:0;
top:0;
width:100%;
height:100vh;
background:rgba(30,30,30,0.7);
z-index: 100;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
z-index: 1000000;
cursor:pointer;
}
.closer {
box-sizing: content-box;
position: absolute;
right: -27px;
top: -27px;
background: #000;
color: #fff;
font-size: 49px;
line-height: 40px;
font-weight: bold;
cursor: pointer;
z-index: 2000;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
border: #fff solid 5px;
}
.image-container {
width:90%;
height:90%;
margin:5%;
margin: 0% 5% 0 5%;
height: calc(100% - 150px);
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
padding-left: 40px;
padding-right: 40px;
z-index:1000;
max-width:1200px;
}
.image-wrap {
position: relative;
display:flex;
border: 10px solid #fff;
outline:1px solid #aaa;
cursor:auto;
}
.full-pic {
width: 100%;
object-fit: cover;
}
Select Code

Elementor-Implementierung

Wem die hauseigene Lightbox-Funktion nicht gefällt, kann mein Script nehmen.

Man fügt ein Bild ein und setzt den Link auf "Medien-Datei"
und Lightbox "Nein". Das war's auch schon!

Das Script sucht nach Bildern, die mit der Mediendatei verlinkt sind und stellt sie als Popup dar.
Bilder die mit URL's verknüpft sind werden nicht angesprochen.

Das alles ohne Plugin und mit einem kleinen Script realisiert.