You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, additionalUrls = "", thumbnailSize = 200, containerBgColor = "#1a1a1a", titleText = "Image Gallery Viewer") {
// Inject CSS styles for the gallery and lightbox if not already present
const styleId = 'gallery-viewer-styles';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.gv-thumb {
position: relative;
padding-top: 100%;
overflow: hidden;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #333;
}
.gv-thumb:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
z-index: 10;
}
.gv-thumb img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
}
.gv-btn {
position: absolute;
color: rgba(255, 255, 255, 0.6);
font-size: 40px;
cursor: pointer;
user-select: none;
transition: color 0.2s, transform 0.2s;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
}
.gv-btn:hover {
color: #fff;
transform: scale(1.1);
}
.gv-lightbox {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background-color: rgba(0, 0, 0, 0.85);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: none;
opacity: 0;
justify-content: center;
align-items: center;
z-index: 999999;
transition: opacity 0.3s ease;
}
.gv-lightbox img {
max-width: 85vw;
max-height: 85vh;
box-shadow: 0 0 30px rgba(0,0,0,0.9);
border-radius: 8px;
object-fit: contain;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.gv-counter {
position: absolute;
bottom: 25px;
color: rgba(255,255,255,0.7);
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: 2px;
background: rgba(0, 0, 0, 0.5);
padding: 8px 16px;
border-radius: 20px;
}
`;
document.head.appendChild(style);
}
// Main Container
const container = document.createElement('div');
container.style.width = '100%';
container.style.backgroundColor = containerBgColor;
container.style.padding = '30px';
container.style.boxSizing = 'border-box';
container.style.borderRadius = '12px';
container.style.fontFamily = '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif';
// Header
const header = document.createElement('h2');
header.innerText = titleText;
header.style.color = '#fff';
header.style.marginTop = '0';
header.style.marginBottom = '20px';
header.style.fontWeight = '300';
header.style.textAlign = 'center';
header.style.letterSpacing = '1px';
container.appendChild(header);
// Grid Layout
const grid = document.createElement('div');
grid.style.display = 'grid';
grid.style.gridTemplateColumns = `repeat(auto-fill, minmax(${thumbnailSize}px, 1fr))`;
grid.style.gap = '20px';
container.appendChild(grid);
// Prepare images array
const images = [originalImg.src];
if (additionalUrls && additionalUrls.trim() !== "") {
const urls = additionalUrls.split(',').map(s => s.trim()).filter(Boolean);
images.push(...urls);
}
// If only one image is provided, generate a "See all" variations demo gallery
const isDemo = images.length === 1;
if (isDemo) {
// Create variations of original image to enrich gallery UI
for (let i = 0; i < 7; i++) {
images.push(originalImg.src);
}
}
const filters = [
'none', 'grayscale(100%)', 'sepia(80%)', 'invert(100%)',
'blur(3px)', 'hue-rotate(90deg)', 'contrast(200%)', 'saturate(300%)'
];
// Populate thumbnails
images.forEach((src, index) => {
const thumbWrapper = document.createElement('div');
thumbWrapper.className = 'gv-thumb';
const img = document.createElement('img');
img.src = src;
if (isDemo && index > 0) {
img.style.filter = filters[index % filters.length];
}
thumbWrapper.appendChild(img);
thumbWrapper.onclick = () => openLightbox(index);
grid.appendChild(thumbWrapper);
});
// Lightbox Modal setup
const lightbox = document.createElement('div');
lightbox.className = 'gv-lightbox';
const lbImg = document.createElement('img');
lightbox.appendChild(lbImg);
const closeBtn = document.createElement('div');
closeBtn.className = 'gv-btn';
closeBtn.innerHTML = '×';
closeBtn.style.top = '15px';
closeBtn.style.right = '25px';
closeBtn.onclick = closeLightbox;
lightbox.appendChild(closeBtn);
const prevBtn = document.createElement('div');
prevBtn.className = 'gv-btn';
prevBtn.innerHTML = '❮';
prevBtn.style.left = '20px';
prevBtn.onclick = (e) => { e.stopPropagation(); navigate(-1); }
lightbox.appendChild(prevBtn);
const nextBtn = document.createElement('div');
nextBtn.className = 'gv-btn';
nextBtn.innerHTML = '❯';
nextBtn.style.right = '20px';
nextBtn.onclick = (e) => { e.stopPropagation(); navigate(1); }
lightbox.appendChild(nextBtn);
const counter = document.createElement('div');
counter.className = 'gv-counter';
lightbox.appendChild(counter);
container.appendChild(lightbox);
// Lightbox Logic
let currentIndex = 0;
function openLightbox(index) {
currentIndex = index;
updateLightbox();
lightbox.style.display = 'flex';
// Force Reflow for transitions to catch
void lightbox.offsetWidth;
lightbox.style.opacity = '1';
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
lightbox.style.opacity = '0';
document.body.style.overflow = '';
setTimeout(() => {
lightbox.style.display = 'none';
}, 300);
}
function navigate(direction) {
currentIndex += direction;
if (currentIndex < 0) currentIndex = images.length - 1;
if (currentIndex >= images.length) currentIndex = 0;
lbImg.style.transform = 'scale(0.95)';
lbImg.style.opacity = '0.5';
setTimeout(() => {
updateLightbox();
lbImg.style.transform = 'scale(1)';
lbImg.style.opacity = '1';
}, 200);
}
function updateLightbox() {
lbImg.src = images[currentIndex];
if (isDemo) {
lbImg.style.filter = filters[currentIndex % filters.length];
} else {
lbImg.style.filter = 'none';
}
counter.innerText = `${currentIndex + 1} / ${images.length}`;
}
// Close on background click
lightbox.onclick = (e) => {
if (e.target === lightbox) {
closeLightbox();
}
};
// Keyboard support
window.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowLeft') navigate(-1);
if (e.key === 'ArrowRight') navigate(1);
}
});
return container;
}Apply Changes
