This is an image gallery that can be embedded into a Shopify Blog or Page without any apps.
- Open your page/blog
- Click the code view (screenshot below)
- Copy and paste the code at the bottom of this page
- Replace the image links in the code with your images
- Increase/decrease the images as you need
- Save
Features
- Mobile responsive
- Click the image to open it
- Use left & right arrow buttons or keyboard buttons to select the previous image or the next image
- Use the escape key or close button to close an open image
- Hides next/previous button when there are no more images further left or right
Things to note
- Make sure your images are of same dimension. If not, the grid will look messy.
- If your default blog/page is not full width, the gallery won't look nice.
Code
<style>
.lp-img-gallery {
width: 80%;
margin: 100px auto 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 30px;
}
.lp-img-gallery img {
width: 100%;
cursor: pointer;
transition: 1s ease;
}
.lp-img-gallery img:hover {
transform: scale(0.8);
box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
}
/* Wrapper */
.lp-image-wrapper {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
z-index: 100;
}
.lp-image-wrapper img {
width: 80%;
max-width: 500px;
}
.lp-image-wrapper span {
position: absolute;
font-family: sans-serif;
color: #fff;
cursor: pointer;
padding: 5px 8px;
}
#lpImgModalClose {
top: 5%;
right: 5%;
border: 0.5px #fff solid;
border-radius: 20%;
}
#lpNextImage {
top: 45%;
right: 5%;
border: 0.5px #fff solid;
border-radius: 20%;
}
#lpPrevImage {
top: 45%;
left: 5%;
border: 0.5px #fff solid;
border-radius: 20%;
}
@media (min-width: 640px) {
#lpImgModalClose,
#lpNextImage,
#lpPrevImage {
background-color: unset;
border: unset;
}
}
</style>
<div class="lp-image-wrapper" id="lpModalWrapper">
<img src="" id="fullImg" />
<span id="lpImgModalClose">✕ </span>
<span id="lpNextImage">→</span>
<span id="lpPrevImage">←</span>
</div>
<div class="lp-img-gallery" id="lpImgGallery">
<img src="https://picsum.photos/id/237/800/600" />
<img src="https://picsum.photos/id/238/800/600" />
<img src="https://picsum.photos/id/239/800/600" />
<img src="https://picsum.photos/id/240/800/600" />
<img src="https://picsum.photos/id/241/400/800" />
<img src="https://picsum.photos/id/242/800/600" />
<img src="https://picsum.photos/id/243/800/600" />
<img src="https://picsum.photos/id/244/800/600" />
</div>
<script>
let images = document.querySelectorAll('#lpImgGallery img');
let wrapper = document.getElementById("lpModalWrapper");
let imgWrapper = document.getElementById("fullImg");
let close = document.getElementById("lpImgModalClose");
let next = document.getElementById("lpNextImage");
let prev = document.getElementById("lpPrevImage");
let indexOfCurrent = null;
images.forEach((img, index) => {
img.addEventListener("click", () => {
indexOfCurrent = index;
openModal(indexOfCurrent);
});
});
function openModal(index) {
wrapper.style.display = "flex";
imgWrapper.src = images[index].getAttribute('src');
hideArrows();
document.body.style.overflow = "hidden";
}
close.addEventListener("click", () => closeModal());
function closeModal() {
wrapper.style.display = "none";
document.body.style.overflow = "unset";
}
next.addEventListener("click", () => {
if (indexOfCurrent + 1 <= images.length - 1) {
indexOfCurrent = indexOfCurrent + 1;
openModal(indexOfCurrent);
}
});
prev.addEventListener("click", () => {
if (indexOfCurrent - 1 >= 0) {
indexOfCurrent = indexOfCurrent - 1;
openModal(indexOfCurrent);
}
});
function hideArrows() {
prev.style.display = "unset";
next.style.display = "unset";
if (indexOfCurrent == images.length - 1) {
next.style.display = "none";
}
if (indexOfCurrent == 0) {
prev.style.display = "none";
}
}
document.addEventListener("keydown", ({ key }) => {
if (key === "Escape") {
closeModal();
}
if (key === "ArrowRight") {
next.click();
}
if (key === "ArrowLeft") {
prev.click();
}
});
</script>
Support
If you have any questions or face any problems while setting this up. Contact me for Shopify support.