Nexus Logo
Profile
Gallery
Chat
Draw
Home
API

Public Gallery

114020 images
🔍
Previous Page 34 of 3801 Next
// Update the showModal function const showModal = (index) => { const images = document.querySelectorAll('.gallery-item'); if (index >= 0 && index < images.length) { const item = images[index]; const img = item.querySelector('img'); const modalImg = document.getElementById('modal-image'); const modal = document.getElementById('image-modal'); const promptText = modal.querySelector('.prompt-text'); const modelText = modal.querySelector('.model-text'); // Update image and text content modalImg.src = img.src; promptText.textContent = item.querySelector('.prompt-text').textContent; modelText.textContent = item.querySelector('.text-yellow-500').textContent; // Update interaction buttons with current counts and state const likeBtn = modal.querySelector('button[onclick^="likeImage"]'); const dislikeBtn = modal.querySelector('button[onclick^="dislikeImage"]'); const favoriteBtn = modal.querySelector('button[onclick^="favoriteImage"]'); // Set the image ID for the buttons const imageId = item.dataset.imageId; likeBtn.dataset.imageId = imageId; dislikeBtn.dataset.imageId = imageId; favoriteBtn.dataset.imageId = imageId; // Update counts likeBtn.querySelector('span').textContent = item.dataset.likes || '0'; dislikeBtn.querySelector('span').textContent = item.dataset.dislikes || '0'; favoriteBtn.querySelector('span').textContent = item.dataset.favorites || '0'; // Update button states based on user interaction if (item.dataset.userLiked === 'true') { likeBtn.classList.add('text-green-500'); likeBtn.classList.remove('text-gray-400'); } if (item.dataset.userDisliked === 'true') { dislikeBtn.classList.add('text-red-500'); dislikeBtn.classList.remove('text-gray-400'); } if (item.dataset.userFavorited === 'true') { favoriteBtn.classList.add('text-yellow-500'); favoriteBtn.classList.remove('text-gray-400'); } modal.classList.add('show'); currentImageIndex = index; } }; // Update the navigateModal function const navigateModal = (direction) => { const images = document.querySelectorAll('.gallery-item'); currentImageIndex = (currentImageIndex + direction + images.length) % images.length; showModal(currentImageIndex); }; // Add keyboard navigation document.addEventListener('keydown', (e) => { if (document.getElementById('image-modal').classList.contains('show')) { if (e.key === 'ArrowLeft') navigateModal(-1); if (e.key === 'ArrowRight') navigateModal(1); if (e.key === 'Escape') document.getElementById('image-modal').classList.remove('show'); } }); // Add these modal-related functions to your existing script section let currentImageIndex = 0; // Add click event listeners to gallery items document.querySelectorAll('.gallery-item').forEach((item, index) => { item.addEventListener('click', () => showModal(index)); }); // Close modal when clicking close button or outside the image document.querySelector('#image-modal .close').addEventListener('click', () => { document.getElementById('image-modal').classList.remove('show'); }); document.getElementById('image-modal').addEventListener('click', (e) => { if (e.target.id === 'image-modal') { document.getElementById('image-modal').classList.remove('show'); } }); // Navigation buttons document.querySelector('#image-modal .prev').addEventListener('click', () => { navigateModal(-1); }); document.querySelector('#image-modal .next').addEventListener('click', () => { navigateModal(1); }); // Show modal function const showModal = (index) => { const images = document.querySelectorAll('.gallery-item'); if (index >= 0 && index < images.length) { const item = images[index]; const img = item.querySelector('img'); const modalImg = document.getElementById('modal-image'); const modal = document.getElementById('image-modal'); const promptText = modal.querySelector('.prompt-text'); const modelText = modal.querySelector('.model-text'); // Update image and text content modalImg.src = img.src; promptText.textContent = item.querySelector('p').textContent; modelText.textContent = item.querySelector('.text-yellow-500').textContent; // Update interaction buttons with current counts and state const likeBtn = modal.querySelector('button[onclick^="likeImage"]'); const dislikeBtn = modal.querySelector('button[onclick^="dislikeImage"]'); const favoriteBtn = modal.querySelector('button[onclick^="favoriteImage"]'); // Set the image ID for the buttons const imageId = item.dataset.imageId; likeBtn.dataset.imageId = imageId; dislikeBtn.dataset.imageId = imageId; favoriteBtn.dataset.imageId = imageId; // Update counts likeBtn.querySelector('span').textContent = item.dataset.likes || '0'; dislikeBtn.querySelector('span').textContent = item.dataset.dislikes || '0'; favoriteBtn.querySelector('span').textContent = item.dataset.favorites || '0'; // Update button states based on user interaction if (item.dataset.userLiked === 'true') { likeBtn.classList.add('text-green-500'); likeBtn.classList.remove('text-gray-400'); } if (item.dataset.userDisliked === 'true') { dislikeBtn.classList.add('text-red-500'); dislikeBtn.classList.remove('text-gray-400'); } if (item.dataset.userFavorited === 'true') { favoriteBtn.classList.add('text-yellow-500'); favoriteBtn.classList.remove('text-gray-400'); } modal.classList.add('show'); currentImageIndex = index; } }; // Navigate between images const navigateModal = (direction) => { const images = document.querySelectorAll('.gallery-item'); currentImageIndex = (currentImageIndex + direction + images.length) % images.length; showModal(currentImageIndex); }; // Keyboard navigation document.addEventListener('keydown', (e) => { if (document.getElementById('image-modal').classList.contains('show')) { if (e.key === 'ArrowLeft') navigateModal(-1); if (e.key === 'ArrowRight') navigateModal(1); if (e.key === 'Escape') document.getElementById('image-modal').classList.remove('show'); } }); // Optional: Add zoom functionality let isZoomed = false; document.getElementById('modal-image').addEventListener('click', function(e) { if (!isZoomed) { this.style.transform = 'scale(1.5)'; this.style.cursor = 'zoom-out'; } else { this.style.transform = 'scale(1)'; this.style.cursor = 'zoom-in'; } isZoomed = !isZoomed; e.stopPropagation(); }); -->