Gallery Snippet
created by:dragon-heist
BootstrapMiscellaneous
Copy
<!-----------------------------------------------------------------
To edit this code, change out the [ --image-url ] variable at the top of each container code (this is the link of the image you want to have shown.
⭐ Remember that it MUST be formatted like [ url('LINK') ] or the image may not be shown! ⭐
Paste the same link under the "Full Image Link" link as well.
------------------------------------------------------------------->
<div class="row no-gutters justify-content-center" style="
--img-box-height: 420px;
--btn-radius: .5rem;
--btn-border-width: 2px;
--btn-min-height: 225px;
">
<!-- IMG1: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706312_1pSjHjyTuoZdxrI.png');
">
<!-- IMG1: Image Button -->
<a href="#IMG1"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG1: Image Popup -->
<div id="IMG1"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG1" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG1: Close Button -->
<a href="#IMG1"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG1: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG1: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/71706312_1pSjHjyTuoZdxrI.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG1: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG1: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
<!-- IMG2: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706322_4F3IXAaPFXCWQRO.png');
">
<!-- IMG2: Image Button -->
<a href="#IMG2"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG2: Image Popup -->
<div id="IMG2"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG2" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG2: Close Button -->
<a href="#IMG2"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG2: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG2: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/71706322_4F3IXAaPFXCWQRO.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG2: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG2: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
<!-- IMG3: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706305_X0attYGyFVzrQHM.png');
">
<!-- IMG3: Image Button -->
<a href="#IMG3"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG3: Image Popup -->
<div id="IMG3"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG3" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG3: Close Button -->
<a href="#IMG3"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG3: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG3: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/71706305_X0attYGyFVzrQHM.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG3: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG3: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
<!-- IMG4: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/73134224_YBWKWxRqUttS3Jq.png');
">
<!-- IMG4: Image Button -->
<a href="#IMG4"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG4: Image Popup -->
<div id="IMG4"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG4" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG4: Close Button -->
<a href="#IMG4"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG4: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG4: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/73134224_YBWKWxRqUttS3Jq.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG4: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG4: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
<!-- IMG5: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png');
">
<!-- IMG5: Image Button -->
<a href="#IMG5"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG5: Image Popup -->
<div id="IMG5"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG5" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG5: Close Button -->
<a href="#IMG5"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG5: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG5: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/71706311_TJ1t0rQV6agATV2.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG5: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG5: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
<!-- IMG6: Image Container -->
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 p-sm-2 my-sm-0 my-2" style="
--image-url: url('https://f2.toyhou.se/file/f2-toyhou-se/images/71706316_d29UfRpzwQ43LML.png');
">
<!-- IMG6: Image Button -->
<a href="#IMG6"
class="btn btn-primary bg-faded d-flex w-100 h-100 justify-content-center" style="min-height:var(--btn-min-height); border-width:var(--btn-border-width); border-radius:var(--btn-radius);" data-toggle="collapse">
<span style="background:var(--image-url);
background-repeat:no-repeat; background-size:contain; background-position:center;" class="w-100 h-100"></span>
</a> <!-- image button end -->
<!-- IMG6: Image Popup -->
<div id="IMG6"
class="modal collapse" style="transition:none; padding-top:120px;">
<div class="modal-backdrop" style="z-index:-1;opacity:0.5; background:black;">
<a href="#IMG6" style="position:absolute; top:0; bottom:0; left:0; right:0; cursor:default;" data-toggle="collapse"></a>
</div>
<div class="mx-auto p-0 col-10 col-md-6 col-xl-4 card bg-faded" style="overflow:hidden; border-radius:var(--btn-radius);">
<!-- IMG6: Close Button -->
<a href="#IMG6"
class="text-right text-secondary px-2 pt-1" data-toggle="collapse"><i class="fas fa-xmark fa-xl"></i></a> <!-- close button end -->
<!-- IMG6: Image Box -->
<div class="px-3 pt-3 pb-2">
<div class="card p-2" style="height:var(--img-box-height); position:relative;">
<!-- IMG6: Image Display -->
<div class="w-100 h-100" style="background:var(--image-url); background-repeat:no-repeat; background-size:contain; background-position:center;"></div> <!-- image display end -->
<ul class="magnific-gallery image-gallery auto-clear gallery-row p-0 m-0 tooltipster" title="Expand image" style="position:absolute; bottom:3px; right:33px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));">
<li class="gallery-item">
<div class="gallery-thumb thumb p-0 m-0">
<div class="thumb-image p-0 m-0">
<!-- Full Image Link (can use the same link as --image-url in the variables) -->
<a class="magnific-item img-thumbnail border-0 p-0 m-0"
href="https://f2.toyhou.se/file/f2-toyhou-se/images/71706316_d29UfRpzwQ43LML.png">
<i class="fa-solid fa-expand fa-lg"></i>
</a> <!-- full image link end -->
</div>
</div>
</li>
</ul>
<!-- IMG6: Artist Credit -->
<a style="position:absolute; bottom:3px; right:5px; filter:drop-shadow(0 0 2px black) drop-shadow(0 0 2px rgba(0,0,0,0.5));" class="tooltipster"
title="Artist"
href="#">
<i class="fa-duotone fa-paintbrush fa-lg"></i>
</a> <!-- artist credit end -->
</div>
</div> <!-- image box end -->
<!-- IMG6: Caption -->
<div class="text-center mt-2 mb-3 px-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- caption end -->
</div>
</div> <!-- image popup end -->
</div> <!-- image container end -->
</div>
<!-- CREDITS; do not remove! -->
<div class="text-right px-2">
<a href="https://toyhou.se/37829827." data-class="tooltip" title="code by dragon-heist"><i class="fa-solid fa-code"></i></a>
</div> <!-- credits end -->