A template made by w3.css for photographers

W3.CSS Photography Template Implementation

<!-- W3.CSS Photography Gallery Layout -->
<div class="w3-container w3-padding-64">
  <h2 class="w3-center">Photography Portfolio</h2>
  <div class="w3-row-padding w3-center" id="photo-gallery">
    <div class="w3-quarter w3-margin-bottom">
      <div class="w3-card-4 photo-item" data-category="landscape">
        <img src="photo1-thumb.webp" alt="Landscape Photography" 
             class="w3-hover-opacity lazy-load"
             data-full="photo1-full.webp"
             loading="lazy"
             onclick="openLightbox('photo1-full.webp')">
        <div class="w3-container w3-white">
          <h4>Mountain Sunrise</h4>
          <p>Captured at 5:30 AM, ISO 100, f/8</p>
        </div>
      </div>
    </div>
    
    <div class="w3-quarter w3-margin-bottom">
      <div class="w3-card-4 photo-item" data-category="portrait">
        <img src="photo2-thumb.webp" alt="Portrait Photography" 
             class="w3-hover-opacity lazy-load"
             data-full="photo2-full.webp"
             loading="lazy"
             onclick="openLightbox('photo2-full.webp')">
        <div class="w3-container w3-white">
          <h4>Professional Portrait</h4>
          <p>Studio lighting, 85mm lens</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Filter Controls -->
<div class="w3-bar w3-center w3-margin-top">
  <button class="w3-button w3-blue w3-margin-right" onclick="filterPhotos('all')">All</button>
  <button class="w3-button w3-white w3-border w3-margin-right" onclick="filterPhotos('landscape')">Landscape</button>
  <button class="w3-button w3-white w3-border w3-margin-right" onclick="filterPhotos('portrait')">Portrait</button>
  <button class="w3-button w3-white w3-border" onclick="filterPhotos('event')">Events</button>
</div>

// Photography Gallery with W3.CSS Integration
class PhotographyGallery {
  constructor() {
    this.currentFilter = 'all';
    this.lightboxOpen = false;
    this.currentImageIndex = 0;
    this.images = [];
    
    this.initializeLazyLoading();
    this.setupKeyboardNavigation();
    this.loadPhotographyData();
  }
  
  async loadPhotographyData() {
    try {
      const response = await fetch('/api/photography/gallery');
      this.images = await response.json();
      this.renderGallery();
    } catch (error) {
      console.error('Error loading photography data:', error);
    }
  }
  
  initializeLazyLoading() {
    const imageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          const fullSrc = img.dataset.full;
          
          if (fullSrc) {
            img.src = fullSrc;
            img.classList.remove('lazy-load');
            observer.unobserve(img);
          }
        }
      });
    });
    
    document.querySelectorAll('.lazy-load').forEach(img => {
      imageObserver.observe(img);
    });
  }
  
  filterPhotos(category) {
    this.currentFilter = category;
    
    const photoItems = document.querySelectorAll('.photo-item');
    photoItems.forEach(item => {
      const itemCategory = item.dataset.category;
      
      if (category === 'all' || itemCategory === category) {
        item.style.display = 'block';
        item.classList.add('w3-animate-opacity');
      } else {
        item.style.display = 'none';
      }
    });
    
    // Update filter button states
    document.querySelectorAll('.w3-button').forEach(btn => {
      btn.classList.remove('w3-blue');
      btn.classList.add('w3-white', 'w3-border');
    });
    
    event.target.classList.add('w3-blue');
    event.target.classList.remove('w3-white', 'w3-border');
  }
  
  openLightbox(imageSrc) {
    const lightboxHTML = `
      <div id="lightbox" class="w3-modal" style="display: block;">
        <span class="w3-button w3-hover-red w3-xlarge w3-display-topright" 
              onclick="closeLightbox()">&times;</span>
        <div class="w3-modal-content w3-animate-zoom">
          <img src="${imageSrc}" alt="Photography" style="width:100%; max-height:90vh; object-fit: contain;">
          <div class="w3-container w3-padding">
            <div class="w3-bar">
              <button class="w3-button w3-left" onclick="previousImage()">❮ Previous</button>
              <button class="w3-button w3-right" onclick="nextImage()">Next ❯</button>
            </div>
          </div>
        </div>
      </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
    this.lightboxOpen = true;
    
    // Set current image index
    this.currentImageIndex = this.images.findIndex(img => img.fullSrc === imageSrc);
  }
  
  setupKeyboardNavigation() {
    document.addEventListener('keydown', (e) => {
      if (this.lightboxOpen) {
        switch(e.key) {
          case 'Escape':
            this.closeLightbox();
            break;
          case 'ArrowLeft':
            this.previousImage();
            break;
          case 'ArrowRight':
            this.nextImage();
            break;
        }
      }
    });
  }
  
  nextImage() {
    if (this.currentImageIndex < this.images.length - 1) {
      this.currentImageIndex++;
      this.updateLightboxImage();
    }
  }
  
  previousImage() {
    if (this.currentImageIndex > 0) {
      this.currentImageIndex--;
      this.updateLightboxImage();
    }
  }
  
  updateLightboxImage() {
    const img = document.querySelector('#lightbox img');
    if (img && this.images[this.currentImageIndex]) {
      img.src = this.images[this.currentImageIndex].fullSrc;
      img.alt = this.images[this.currentImageIndex].title;
    }
  }
  
  closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    if (lightbox) {
      lightbox.remove();
      this.lightboxOpen = false;
    }
  }
}

// Initialize gallery when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  const gallery = new PhotographyGallery();
  window.gallery = gallery; // Make globally accessible
});

/* Photography Template Enhancements */
.photo-item {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.photo-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.photo-item img {
  transition: transform 0.3s ease;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.photo-item:hover img {
  transform: scale(1.05);
}

.lazy-load {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* W3.CSS Modal Enhancements */
.w3-modal {
  backdrop-filter: blur(5px);
  background-color: rgba(0,0,0,0.8);
}

.w3-modal-content {
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Photography Filter Buttons */
.w3-button {
  transition: all 0.3s ease;
  margin: 0.25rem;
  border-radius: 25px;
}

.w3-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Responsive Photography Grid */
@media (max-width: 768px) {
  .w3-quarter {
    width: 50% !important;
  }
  
  .photo-item img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .w3-quarter {
    width: 100% !important;
  }
  
  .photo-item img {
    height: 250px;
  }
}

/* Enhanced Typography for Photography */
.photo-item h4 {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.photo-item p {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin: 0;
}