Image Gallery Generator Tool
`;
codeOutput.textContent = htmlCode;
}
function resetGallery() {
// Reset to default values
currentGallery = {
layout: 'grid',
width: 1000,
columns: 3,
title: 'My Gallery',
showFilters: true,
showTitles: true,
showDescriptions: true,
lightboxEnabled: true,
hoverEffect: true,
colors: {
bg: '#f8f9fa',
primary: '#4f46e5',
text: '#1e293b'
},
fontSize: '16px',
borderRadius: '8px',
fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
images: [
{
url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
title: 'Mountain Landscape',
description: 'Beautiful mountain landscape with trees and clear sky',
category: 'nature'
},
{
url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
title: 'Forest Path',
description: 'Serene forest path surrounded by tall trees and greenery',
category: 'nature'
},
{
url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
title: 'Mountain Peak',
description: 'Majestic mountain peak with snow and clouds',
category: 'nature'
}
]
};
// Update UI controls
galleryWidth.value = 1000;
galleryWidthValue.textContent = '1000px';
columns.value = 3;
columnsValue.textContent = '3';
galleryTitle.value = 'My Gallery';
showFilters.checked = true;
showTitles.checked = true;
showDescriptions.checked = true;
lightboxEnabled.checked = true;
hoverEffect.checked = true;
bgColor.value = '#f8f9fa';
bgColorHex.value = '#f8f9fa';
bgColorPreview.style.background = '#f8f9fa';
primaryColor.value = '#4f46e5';
primaryColorHex.value = '#4f46e5';
primaryColorPreview.style.background = '#4f46e5';
textColor.value = '#1e293b';
textColorHex.value = '#1e293b';
textColorPreview.style.background = '#1e293b';
fontSize.value = 16;
fontSizeValue.textContent = '16px';
borderRadius.value = 8;
borderRadiusValue.textContent = '8px';
fontFamily.value = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
// Reset layout options
layoutOptions.forEach(option => {
option.classList.remove('selected');
if (option.getAttribute('data-layout') === 'grid') {
option.classList.add('selected');
}
});
// Reset images
const imageControls = document.querySelector('.image-controls');
imageControls.innerHTML = '';
currentGallery.images.forEach((image, index) => {
const newImage = document.createElement('div');
newImage.className = 'image-item';
newImage.innerHTML = `
`;
imageControls.appendChild(newImage);
// Add event listeners
newImage.querySelector('.remove-image').addEventListener('click', function() {
newImage.remove();
updateImages();
});
newImage.querySelectorAll('input, textarea, select').forEach(input => {
input.addEventListener('input', updateImages);
});
});
// Apply changes
updateGallery();
updateCode();
}
function exportCode() {
const htmlCode = codeOutput.textContent;
const blob = new Blob([htmlCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'image-gallery.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Image gallery code downloaded successfully!');
}
function saveGallery() {
const galleryName = prompt('Enter a name for your image gallery:');
if (galleryName) {
// In a real implementation, this would save to localStorage or a server
alert(`Image gallery "${galleryName}" saved successfully!`);
}
}
});
