Commercial Project 1

Commercial Project 1

Commercial Project 2

Commercial Project 2

Residential Project 1

Residential Project 1

Residential Project 2

Residential Project 2

/* Gallery Container */ .gallery-container { text-align: center; padding: 20px; } /* Filter Buttons */ .gallery-filters button { margin: 5px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; border-radius: 5px; } .gallery-filters button:hover { background-color: #0056b3; } /* Grid Layout */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .gallery-item { position: relative; overflow: hidden; } .gallery-item img { width: 100%; height: auto; transition: transform 0.3s ease; } .gallery-item img:hover { transform: scale(1.1); } .gallery-item p { margin-top: 8px; font-size: 14px; } /* Lightbox */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; justify-content: center; align-items: center; } .lightbox-content { max-width: 80%; max-height: 80%; } .lightbox p { color: white; text-align: center; margin-top: 15px; } .lightbox .close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; cursor: pointer; } // Filter Function function filterGallery(category) { const items = document.querySelectorAll('.gallery-item'); items.forEach(item => { if (category === 'all' || item.classList.contains(category)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } // Lightbox Functionality function openLightbox(imgSrc, captionText) { const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightboxImg'); const lightboxCaption = document.getElementById('lightboxCaption'); lightbox.style.display = 'flex'; lightboxImg.src = imgSrc; lightboxCaption.textContent = captionText; } function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; } // Add Click Event to Images document.querySelectorAll('.gallery-item img').forEach(img => { img.addEventListener('click', () => { openLightbox(img.src, img.alt); }); });
top of page

Residencial Work


"Explore our solar installations gallery featuring a wide range of projects, including residential and commercial systems, battery storage solutions, EV chargers, solar carports, and more. At Sun Diego Solar Construction, we’re proud to showcase the innovative and sustainable energy solutions we’ve designed and installed to power homes and businesses across the region."

bottom of page