This project is a responsive image gallery built with Svelte that features:

• A lightbox for viewing images in a larger format.
• Keyboard navigation (Next/Prev using arrow keys, Close with ESC key).
• A slideshow mode that plays images in fullscreen automatically.

• Displays a collection of images.
• Click on any thumbnail to open the lightbox.

• Opens images in a larger view.
• Keyboard Controls:
  • ← or → to navigate between images.
  • Esc to close the lightbox.

• Clicking the slideshow button starts an automatic fullscreen slideshow.
• Images change every 3 seconds.
• Clicking anywhere or pressing Esc closes the slideshow.

git clone https://github.com/yourusername/image-gallery.git
cd image-gallery/sourcecode

npm install

npm run dev

npm run build

Project available under sourcecode/public

• Replace the hosturl in sourcecode/gallery.svelte with your image hosting url
• Start the dev server and open the browser to view the gallery.

• Add a pause/play button in slideshow mode.
• Implement lazy loading for better performance.
• Allow users to select images for a custom slideshow.
• Add a hovering download button to each image

This project is open-source and available under the MIT License.

• https://www.geeksforgeeks.org/how-to-add-a-button-to-an-image-using-css/
• https://github.com/BerkinAKKAYA/svelte-image-gallery