Audio Recordings
@@ -243,6 +277,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Image could not be loaded
+
+
@@ -269,6 +352,30 @@ export default {
const showVideoLightbox = ref(false)
const currentVideoIndex = ref(0)
const lightboxVideo = ref(null)
+
+ // Image lightbox state
+ const showImageLightbox = ref(false)
+ const currentImageIndex = ref(0)
+
+ // Define available gallery images from thumbs folder
+ const galleryImageNames = [
+ 'aaron-huber-RLs8LZcONCA-unsplash.jpg',
+ 'andrew-bui-z7rzbFHXym0-unsplash.jpg',
+ 'becca-tapert--A_Sx8GrRWg-unsplash.jpg',
+ 'fuu-j-r2nJPbEYuSQ-unsplash.jpg',
+ 'ian-dooley-hpTH5b6mo2s-unsplash.jpg',
+ 'ishan-seefromthesky-TobZaa8ZwI4-unsplash.jpg',
+ 'javier-allegue-barros-55bVEzGVnzY-unsplash.jpg',
+ 'jay-antol-Xbf_4e7YDII-unsplash.jpg',
+ 'jorgen-hendriksen-8qg-hy6VbYE-unsplash.jpg',
+ 'mohamed-nohassi-odxB5oIG_iA-unsplash.jpg',
+ 'saad-chaudhry-cYpqYxGeqts-unsplash.jpg',
+ 'taryn-kaahanui-J5b23iaAHis-unsplash.jpg',
+ 'tirza-van-dijk-hbwdmqcmP6k-unsplash.jpg',
+ ]
+
+ // Mark specific images as favorites (indices 2, 5, and 9)
+ const favoriteImageIndices = [2, 5, 9]
// Sample entry data (for testing)
const sampleEntry = {
@@ -331,12 +438,27 @@ export default {
return images
})
+
+ // Additional images gallery - Updated to include favorite status
+ const additionalImagesGallery = computed(() => {
+ return galleryImageNames.map((imageName, index) => ({
+ thumbnail: `/images/thumbs/${imageName}`,
+ fullSize: `/images/gallery/${imageName}`,
+ name: imageName,
+ isFavorite: favoriteImageIndices.includes(index)
+ }))
+ })
+
+ // Current lightbox image
+ const currentLightboxImage = computed(() =>
+ additionalImagesGallery.value[currentImageIndex.value]
+ )
// Current video for lightbox
const currentVideo = computed(() =>
entry.value.videoRecordings?.[currentVideoIndex.value]
)
-
+
// Methods
const formatDate = (dateString) => {
const date = new Date(dateString)
@@ -400,6 +522,24 @@ export default {
const onVideoLoaded = () => {
// Video metadata loaded, can add additional logic here if needed
}
+
+ // Image lightbox methods
+ const openImageLightbox = (image, index) => {
+ currentImageIndex.value = index
+ showImageLightbox.value = true
+ }
+
+ const previousImage = () => {
+ if (currentImageIndex.value > 0) {
+ currentImageIndex.value--
+ }
+ }
+
+ const nextImage = () => {
+ if (currentImageIndex.value < additionalImagesGallery.value.length - 1) {
+ currentImageIndex.value++
+ }
+ }
const editEntry = () => {
// TODO: Navigate to edit page or open edit modal
@@ -419,12 +559,17 @@ export default {
return {
entry,
allImages,
+ additionalImagesGallery,
+ favoriteImageIndices, // Added this to fix the ESLint error
currentSlide,
currentVideoSlide,
showVideoLightbox,
currentVideoIndex,
currentVideo,
lightboxVideo,
+ showImageLightbox,
+ currentImageIndex,
+ currentLightboxImage,
formatDate,
getEmotionalLevelClass,
getEmotionalLevelText,
@@ -434,6 +579,9 @@ export default {
previousVideo,
nextVideo,
onVideoLoaded,
+ openImageLightbox,
+ previousImage,
+ nextImage,
editEntry
}
}
@@ -895,6 +1043,102 @@ export default {
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
+/* Additional Images Gallery Styles */
+.additional-images-section {
+ background: white;
+ border-radius: 16px;
+ padding: 24px;
+ margin-bottom: 24px;
+}
+
+.additional-images-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 16px;
+}
+
+.image-tile {
+ position: relative;
+ aspect-ratio: 1;
+ border-radius: 12px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.image-tile:hover {
+ transform: translateY(-4px);
+}
+
+.tile-image {
+ width: 100%;
+ height: 100%;
+ border-radius: 12px;
+}
+
+.image-tile-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.image-tile:hover .image-tile-overlay {
+ opacity: 1;
+}
+
+/* Image Lightbox Styles */
+.image-lightbox-card {
+ background: #000;
+}
+
+.image-lightbox-header {
+ background: transparent;
+ color: white;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-start;
+ padding: 16px 24px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1001;
+}
+
+.image-lightbox-content {
+ background: #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 80vh;
+ padding: 20px;
+}
+
+.lightbox-image {
+ max-width: 100%;
+ max-height: 80vh;
+ border-radius: 8px;
+}
+
+.image-lightbox-actions {
+ background: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 16px;
+}
+
+.image-counter {
+ color: white;
+ font-weight: 500;
+ margin: 0 16px;
+}
+
/* Responsive */
@media (max-width: 600px) {
.entry-container {
@@ -920,5 +1164,35 @@ export default {
.person-item {
min-width: auto;
}
+
+ .additional-images-grid {
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 12px;
+ }
+
+ .additional-images-section {
+ padding: 16px;
+ }
+}
+
+/* Favorite Star Badge */
+.favorite-star-badge {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 2;
+ transition: all 0.3s ease;
+}
+
+.image-tile:hover .favorite-star-badge {
+ background: rgba(255, 255, 255, 1);
+ transform: scale(1.1);
}
\ No newline at end of file