.tp-galeria-bloco {
width: 100%;
margin: 35px auto;
padding: 10px 0;
clear: both;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.tp-galeria-bloco *,
.tp-galeria-bloco *::before,
.tp-galeria-bloco *::after {
box-sizing: border-box;
}
.tp-galeria-titulo {
text-align: center;
font-size: 26px;
font-weight: 800;
color: #1f1f1f;
margin: 0 0 8px;
line-height: 1.2;
}
.tp-galeria-subtitulo {
text-align: center;
font-size: 15px;
color: #666;
margin: 0 0 24px;
}
.tp-galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
width: 100%;
}
.tp-galeria-grid a {
display: block;
position: relative;
overflow: hidden;
border-radius: 14px;
background: #111;
aspect-ratio: 4 / 3;
box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
text-decoration: none !important;
cursor: zoom-in;
}
.tp-galeria-grid img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
transition: transform .35s ease, opacity .35s ease;
}
.tp-galeria-grid a:hover img {
transform: scale(1.08);
opacity: .84;
}
.tp-galeria-grid a::after {
content: “Ampliar”;
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, .72);
color: #fff;
font-size: 13px;
opacity: 0;
transform: translateY(8px);
transition: all .3s ease;
pointer-events: none;
}
.tp-galeria-grid a:hover::after {
opacity: 1;
transform: translateY(0);
}
.tp-galeria-dialog {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
margin: 0 !important;
padding: 72px 80px 65px !important;
border: 0 !important;
background: rgba(0, 0, 0, .94) !important;
box-sizing: border-box !important;
overflow: hidden !important;
z-index: 2147483647 !important;
display: none !important;
}
.tp-galeria-dialog::backdrop {
background: rgba(0, 0, 0, .94) !important;
}
.tp-galeria-dialog[open] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.tp-galeria-dialog-img {
width: auto !important;
max-width: calc(100vw – 180px) !important;
max-height: calc(100vh – 150px) !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
border-radius: 14px !important;
box-shadow: 0 0 45px rgba(0, 0, 0, .85) !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
margin: auto !important;
}
.tp-galeria-fechar,
.tp-galeria-voltar,
.tp-galeria-proxima {
position: fixed !important;
z-index: 2147483647 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .18) !important;
color: #fff !important;
border: 2px solid rgba(255, 255, 255, .35) !important;
text-align: center !important;
font-family: Arial, Helvetica, sans-serif !important;
text-decoration: none !important;
cursor: pointer !important;
backdrop-filter: blur(6px);
padding: 0 !important;
appearance: none !important;
}
.tp-galeria-fechar:hover,
.tp-galeria-voltar:hover,
.tp-galeria-proxima:hover {
background: rgba(255, 255, 255, .34) !important;
}
.tp-galeria-fechar {
top: 22px !important;
right: 28px !important;
width: 52px !important;
height: 52px !important;
font-size: 38px !important;
line-height: 47px !important;
font-weight: bold !important;
}
.tp-galeria-voltar,
.tp-galeria-proxima {
top: 50% !important;
transform: translateY(-50%) !important;
width: 58px !important;
height: 58px !important;
font-size: 46px !important;
line-height: 51px !important;
}
.tp-galeria-voltar {
left: 28px !important;
}
.tp-galeria-proxima {
right: 28px !important;
}
.tp-galeria-contador {
position: fixed !important;
left: 50% !important;
bottom: 24px !important;
transform: translateX(-50%) !important;
z-index: 2147483647 !important;
color: #fff !important;
background: rgba(255, 255, 255, .18) !important;
border: 1px solid rgba(255, 255, 255, .28) !important;
padding: 8px 15px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-family: Arial, Helvetica, sans-serif !important;
backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
.tp-galeria-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.tp-galeria-titulo {
font-size: 22px;
}
.tp-galeria-dialog {
padding: 65px 14px 58px !important;
}
.tp-galeria-dialog-img {
max-width: calc(100vw – 32px) !important;
max-height: calc(100vh – 145px) !important;
}
.tp-galeria-fechar {
top: 12px !important;
right: 12px !important;
width: 44px !important;
height: 44px !important;
font-size: 32px !important;
line-height: 39px !important;
}
.tp-galeria-voltar,
.tp-galeria-proxima {
width: 44px !important;
height: 44px !important;
font-size: 34px !important;
line-height: 38px !important;
}
.tp-galeria-voltar {
left: 10px !important;
}
.tp-galeria-proxima {
right: 10px !important;
}
.tp-galeria-contador {
bottom: 16px !important;
}
}
Galeria de imagens
Clique em uma imagem para ampliar
(function () {
var galleries = document.querySelectorAll(“.tp-galeria-bloco:not([data-tp-galeria-init])”);
var dialog;
var dialogImg;
var counter;
var closeButton;
var prevButton;
var nextButton;
var activeLinks = [];
var current = 0;
var oldBodyOverflow = “”;
var oldHtmlOverflow = “”;
function createDialog() {
if (dialog) return;
dialog = document.createElement(“dialog”);
dialog.className = “tp-galeria-dialog”;
dialog.innerHTML =
‘×’ +
‘‹’ +
” +
‘›’ +
‘
‘;
document.body.appendChild(dialog);
dialogImg = dialog.querySelector(“.tp-galeria-dialog-img”);
counter = dialog.querySelector(“.tp-galeria-contador”);
closeButton = dialog.querySelector(“.tp-galeria-fechar”);
prevButton = dialog.querySelector(“.tp-galeria-voltar”);
nextButton = dialog.querySelector(“.tp-galeria-proxima”);
closeButton.addEventListener(“click”, closeDialog);
prevButton.addEventListener(“click”, prevImage);
nextButton.addEventListener(“click”, nextImage);
dialog.addEventListener(“click”, function (event) {
if (event.target === dialog) closeDialog();
});
document.addEventListener(“keydown”, function (event) {
if (!dialog || !dialog.open) return;
if (event.key === “Escape”) {
event.preventDefault();
closeDialog();
}
if (event.key === “ArrowLeft”) {
event.preventDefault();
prevImage();
}
if (event.key === “ArrowRight”) {
event.preventDefault();
nextImage();
}
});
}
function setImage(index) {
if (!activeLinks.length) return;
current = (index + activeLinks.length) % activeLinks.length;
dialogImg.src = activeLinks[current].href;
counter.textContent = (current + 1) + ” / ” + activeLinks.length;
}
function openDialog(links, index) {
createDialog();
activeLinks = links;
setImage(index);
oldBodyOverflow = document.body.style.overflow || “”;
oldHtmlOverflow = document.documentElement.style.overflow || “”;
document.body.style.overflow = “hidden”;
document.documentElement.style.overflow = “hidden”;
if (typeof dialog.showModal === “function”) {
if (!dialog.open) dialog.showModal();
} else {
dialog.setAttribute(“open”, “open”);
}
}
function closeDialog() {
if (!dialog) return;
if (dialog.open && typeof dialog.close === “function”) {
dialog.close();
}
dialog.removeAttribute(“open”);
if (dialogImg) dialogImg.removeAttribute(“src”);
document.body.style.overflow = oldBodyOverflow;
document.documentElement.style.overflow = oldHtmlOverflow;
}
function prevImage() {
setImage(current – 1);
}
function nextImage() {
setImage(current + 1);
}
Array.prototype.forEach.call(galleries, function (gallery) {
var grid = gallery.querySelector(“.tp-galeria-grid”);
var links = grid ? Array.prototype.slice.call(grid.querySelectorAll(“a[href]”)) : [];
gallery.setAttribute(“data-tp-galeria-init”, “1”);
if (!links.length) return;
links.forEach(function (link, index) {
link.addEventListener(“click”, function (event) {
event.preventDefault();
openDialog(links, index);
});
});
});
})();
Fonte: Tribuna Popular
