Video Gallery Generator Tool
`;
codeOutput.textContent = htmlCode;
}
function resetGallery() {
// Reset to default values
currentGallery = {
layout: 'grid',
width: 1000,
columns: 3,
title: 'My Video Gallery',
showFilters: true,
showTitles: true,
showDescriptions: true,
modalEnabled: true,
hoverEffect: true,
colors: {
bg: '#f8f9fa',
primary: '#8b5cf6',
text: '#1e293b'
},
fontSize: '16px',
borderRadius: '8px',
fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
videos: [
{
url: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
thumbnail: 'https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg',
title: 'Amazing Nature Documentary',
description: 'Explore the wonders of nature in this breathtaking documentary showcasing wildlife and landscapes.',
duration: '10:25',
category: 'nature'
},
{
url: 'https://www.youtube.com/embed/9xwazD5SyVg',
thumbnail: 'https://img.youtube.com/vi/9xwazD5SyVg/maxresdefault.jpg',
title: 'Travel Adventure Series',
description: 'Join us on an exciting travel adventure exploring hidden gems around the world.',
duration: '15:42',
category: 'travel'
},
{
url: 'https://www.youtube.com/embed/LDU_Txk06tM',
thumbnail: 'https://img.youtube.com/vi/LDU_Txk06tM/maxresdefault.jpg',
title: 'Coding Tutorial for Beginners',
description: 'Learn the basics of coding with this comprehensive tutorial for absolute beginners.',
duration: '22:15',
category: 'tutorial'
}
]
};
// Update UI controls
galleryWidth.value = 1000;
galleryWidthValue.textContent = '1000px';
columns.value = 3;
columnsValue.textContent = '3';
galleryTitle.value = 'My Video Gallery';
showFilters.checked = true;
showTitles.checked = true;
showDescriptions.checked = true;
modalEnabled.checked = true;
hoverEffect.checked = true;
bgColor.value = '#f8f9fa';
bgColorHex.value = '#f8f9fa';
bgColorPreview.style.background = '#f8f9fa';
primaryColor.value = '#8b5cf6';
primaryColorHex.value = '#8b5cf6';
primaryColorPreview.style.background = '#8b5cf6';
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 videos
const videoControls = document.querySelector('.video-controls');
videoControls.innerHTML = '';
currentGallery.videos.forEach((video, index) => {
const newVideo = document.createElement('div');
newVideo.className = 'video-item';
newVideo.innerHTML = `
`;
videoControls.appendChild(newVideo);
// Add event listeners
newVideo.querySelector('.remove-video').addEventListener('click', function() {
newVideo.remove();
updateVideos();
});
newVideo.querySelectorAll('input, textarea, select').forEach(input => {
input.addEventListener('input', updateVideos);
});
});
// 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 = 'video-gallery.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Video gallery code downloaded successfully!');
}
function saveGallery() {
const galleryName = prompt('Enter a name for your video gallery:');
if (galleryName) {
alert(`Video gallery "${galleryName}" saved successfully!`);
}
}
});
