lightbox diaporama site
This commit is contained in:
parent
f60cb1b088
commit
ec5fc137d4
File diff suppressed because one or more lines are too long
|
@ -193,7 +193,7 @@ h2 {
|
||||||
}
|
}
|
||||||
.layout-container main {
|
.layout-container main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 320px;
|
padding-top: 280px;
|
||||||
}
|
}
|
||||||
@media (max-width: 810px) {
|
@media (max-width: 810px) {
|
||||||
.layout-container main {
|
.layout-container main {
|
||||||
|
@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 {
|
||||||
}
|
}
|
||||||
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
|
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
|
||||||
display: none;
|
display: none;
|
||||||
height: 320px;
|
height: 280px;
|
||||||
}
|
}
|
||||||
@media (max-width: 891px) {
|
@media (max-width: 891px) {
|
||||||
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
|
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
|
||||||
|
@ -316,7 +316,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .
|
||||||
header .header_left_container img {
|
header .header_left_container img {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: calc(320px - 5rem);
|
height: calc(280px - 1rem);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||||
}
|
}
|
||||||
|
@ -379,6 +379,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
|
||||||
header .header_nav_container {
|
header .header_nav_container {
|
||||||
flex: 0 0 0%;
|
flex: 0 0 0%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: fit-content;
|
||||||
background: rgb(7, 50, 194);
|
background: rgb(7, 50, 194);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
@ -398,10 +399,9 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 80px;
|
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
margin: 0;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
@media (max-width: 1025px) {
|
@media (max-width: 1025px) {
|
||||||
header .header_nav_container #block-quartiers-de-demain-entete ul {
|
header .header_nav_container #block-quartiers-de-demain-entete ul {
|
||||||
|
@ -409,11 +409,6 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 1090px) {
|
|
||||||
header .header_nav_container #block-quartiers-de-demain-entete ul {
|
|
||||||
top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1090px) {
|
@media (max-width: 1090px) {
|
||||||
header .header_nav_container #block-quartiers-de-demain-entete ul li {
|
header .header_nav_container #block-quartiers-de-demain-entete ul li {
|
||||||
padding-top: 0.3rem;
|
padding-top: 0.3rem;
|
||||||
|
@ -464,7 +459,7 @@ header .header:hover + .header_nav_container {
|
||||||
|
|
||||||
/* Taille définitive du header après l'animation */
|
/* Taille définitive du header après l'animation */
|
||||||
.header--collapsed {
|
.header--collapsed {
|
||||||
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||||
width: 35%;
|
width: 35%;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transition: all 1s ease-in-out;
|
transition: all 1s ease-in-out;
|
||||||
|
@ -495,6 +490,7 @@ header .header:hover + .header_nav_container {
|
||||||
.header--collapsed .header_nav_container {
|
.header--collapsed .header_nav_container {
|
||||||
flex: 0 0 30%;
|
flex: 0 0 30%;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
|
min-width: fit-content;
|
||||||
}
|
}
|
||||||
@media (max-width: 810px) {
|
@media (max-width: 810px) {
|
||||||
.header--collapsed .header_nav_container {
|
.header--collapsed .header_nav_container {
|
||||||
|
@ -505,7 +501,7 @@ header .header:hover + .header_nav_container {
|
||||||
}
|
}
|
||||||
|
|
||||||
.header--collapsed-already {
|
.header--collapsed-already {
|
||||||
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||||
width: 35%;
|
width: 35%;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transition: all 0s ease-in-out;
|
transition: all 0s ease-in-out;
|
||||||
|
@ -530,6 +526,7 @@ header .header:hover + .header_nav_container {
|
||||||
}
|
}
|
||||||
.header--collapsed-already .header_nav_container {
|
.header--collapsed-already .header_nav_container {
|
||||||
flex: 0 0 30%;
|
flex: 0 0 30%;
|
||||||
|
min-width: fit-content;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
}
|
}
|
||||||
@media (max-width: 810px) {
|
@media (max-width: 810px) {
|
||||||
|
@ -1633,6 +1630,64 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diaporama {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diaporama img {
|
||||||
|
width: 150px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox img {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 40px;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev, .next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next {
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
/*pages*/
|
/*pages*/
|
||||||
#home .config_pages--type--diaporama-home {
|
#home .config_pages--type--diaporama-home {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -2847,6 +2902,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--first div {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--first div {
|
||||||
|
width: fit-content;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
|
||||||
|
@ -2915,13 +2971,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
||||||
padding-left: 0.2rem;
|
padding-left: 0.2rem;
|
||||||
}
|
}
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--second {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second {
|
||||||
flex: 0 1 80%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-left: 2.5rem;
|
margin-left: 3.5rem;
|
||||||
}
|
}
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
|
||||||
|
@ -3000,6 +3056,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
||||||
font-size: 0.5rem;
|
font-size: 0.5rem;
|
||||||
color: rgb(7, 50, 194);
|
color: rgb(7, 50, 194);
|
||||||
}
|
}
|
||||||
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties div {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
|
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -463,6 +463,70 @@
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
//////////////// lightbox galerie image page site////////////////////////
|
||||||
|
|
||||||
|
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
|
||||||
|
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
|
||||||
|
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||||
|
let currentIndex;
|
||||||
|
|
||||||
|
// Créer le lightbox et ses éléments
|
||||||
|
const lightbox = document.createElement('div');
|
||||||
|
lightbox.id = 'lightbox';
|
||||||
|
lightbox.classList.add('lightbox');
|
||||||
|
document.body.appendChild(lightbox);
|
||||||
|
|
||||||
|
const img = document.createElement('img');
|
||||||
|
lightbox.appendChild(img);
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('span');
|
||||||
|
closeBtn.classList.add('close');
|
||||||
|
closeBtn.innerHTML = '×';
|
||||||
|
lightbox.appendChild(closeBtn);
|
||||||
|
|
||||||
|
const prevBtn = document.createElement('a');
|
||||||
|
prevBtn.classList.add('prev');
|
||||||
|
prevBtn.innerHTML = '❮';
|
||||||
|
lightbox.appendChild(prevBtn);
|
||||||
|
|
||||||
|
const nextBtn = document.createElement('a');
|
||||||
|
nextBtn.classList.add('next');
|
||||||
|
nextBtn.innerHTML = '❯';
|
||||||
|
lightbox.appendChild(nextBtn);
|
||||||
|
|
||||||
|
// Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox
|
||||||
|
images.forEach((image, index) => {
|
||||||
|
image.addEventListener('click', () => {
|
||||||
|
lightbox.style.display = 'flex';
|
||||||
|
img.src = image.src;
|
||||||
|
currentIndex = index;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer le lightbox
|
||||||
|
closeBtn.addEventListener('click', () => {
|
||||||
|
lightbox.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Naviguer vers l'image précédente
|
||||||
|
prevBtn.addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
|
||||||
|
img.src = images[currentIndex].src;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Naviguer vers l'image suivante
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
|
||||||
|
img.src = images[currentIndex].src;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer le lightbox quand on clique en dehors de l'image
|
||||||
|
lightbox.addEventListener('click', (e) => {
|
||||||
|
if (e.target === lightbox) {
|
||||||
|
lightbox.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
$header-height : 320px;
|
$header-height : 280px;
|
||||||
$header-height-pad : 160px;
|
$header-height-pad : 160px;
|
||||||
$header-height-small : 70px;
|
$header-height-small : 70px;
|
||||||
$header-height-ultrasmall : 50px;
|
$header-height-ultrasmall : 50px;
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout--threecol-25-50-25{
|
.layout--threecol-25-50-25{
|
||||||
|
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
@media(max-width: 500px){
|
@media(max-width: 500px){
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -26,7 +27,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div{
|
div{
|
||||||
// width: fit-content;
|
width: fit-content;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
// #sites-map-container.fixed{
|
// #sites-map-container.fixed{
|
||||||
// width: auto;
|
// width: auto;
|
||||||
|
@ -102,12 +103,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout__region--second{
|
.layout__region--second{
|
||||||
flex: 0 1 80%;
|
// flex: 0 1 60%;
|
||||||
|
width: 60%;
|
||||||
.block-region-second{
|
.block-region-second{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-left: 2.5rem;
|
margin-left: 3.5rem;
|
||||||
@media(max-width: 500px){
|
@media(max-width: 500px){
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
@ -197,7 +199,10 @@
|
||||||
color: $blue_QDD;
|
color: $blue_QDD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.field_field_parties{
|
||||||
|
div{width: fit-content;}
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
div:has(.field_field_parties){
|
div:has(.field_field_parties){
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
@media(max-width: 500px){
|
@media(max-width: 500px){
|
||||||
|
|
|
@ -60,7 +60,7 @@ header{
|
||||||
img{
|
img{
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: calc($header-height - 5rem);
|
height: calc($header-height - 1rem);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||||
@media(max-width: 891px){
|
@media(max-width: 891px){
|
||||||
|
@ -114,6 +114,7 @@ header{
|
||||||
.header_nav_container{
|
.header_nav_container{
|
||||||
flex: 0 0 0%;
|
flex: 0 0 0%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: fit-content;
|
||||||
background: $blue_QDD;
|
background: $blue_QDD;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
@ -135,10 +136,11 @@ header{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: calc($header-height / 4 );
|
// top: calc($header-height / 4 );
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
margin: 0;
|
margin-top: 2rem;
|
||||||
|
|
||||||
// @media(max-width: 1200px){
|
// @media(max-width: 1200px){
|
||||||
// top:0;
|
// top:0;
|
||||||
// }
|
// }
|
||||||
|
@ -148,7 +150,7 @@ header{
|
||||||
// margin: 1rem;
|
// margin: 1rem;
|
||||||
}
|
}
|
||||||
@media(max-width: 1090px){
|
@media(max-width: 1090px){
|
||||||
top: calc($header-height-pad / 10);
|
// top: calc($header-height-pad / 10);
|
||||||
}
|
}
|
||||||
li{
|
li{
|
||||||
@media(max-width: 1090px){
|
@media(max-width: 1090px){
|
||||||
|
@ -234,6 +236,7 @@ header{
|
||||||
.header_nav_container{
|
.header_nav_container{
|
||||||
flex: 0 0 30%;
|
flex: 0 0 30%;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
|
min-width: fit-content;
|
||||||
@media(max-width: 810px){
|
@media(max-width: 810px){
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -263,6 +266,7 @@ header{
|
||||||
}
|
}
|
||||||
.header_nav_container{
|
.header_nav_container{
|
||||||
flex: 0 0 30%;
|
flex: 0 0 30%;
|
||||||
|
min-width: fit-content;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
@media(max-width: 810px){
|
@media(max-width: 810px){
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%;
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diaporama {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diaporama img {
|
||||||
|
width: 150px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox img {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 40px;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev, .next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next {
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
@import "partials/formes-animees";
|
@import "partials/formes-animees";
|
||||||
@import "partials/animation-pilliers";
|
@import "partials/animation-pilliers";
|
||||||
@import "partials/map";
|
@import "partials/map";
|
||||||
|
@import "partials/lightbox";
|
||||||
|
|
||||||
|
|
||||||
// @import "partials/slick_custom";
|
// @import "partials/slick_custom";
|
||||||
|
|
|
@ -74,5 +74,11 @@
|
||||||
{% if multiple %}
|
{% if multiple %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<div id="lightbox" class="lightbox">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<img class="lightbox-content" id="lightbox-img">
|
||||||
|
<a class="prev" id="prev">❮</a>
|
||||||
|
<a class="next" id="next">❯</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation of an image.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - attributes: HTML attributes for the img tag.
|
||||||
|
* - style_name: (optional) The name of the image style applied.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_image()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
<img class="lightbox-trigger" {{ attributes }} />
|
Loading…
Reference in New Issue