The goal of this project is to show the use of an image gallery as it is used in multiple e-commerce websites, with synchronization between the inline gallery and the second gallery that is displayed when clicking on an image.
![Screenshot 2023-05-19 at 17 26 45](https://private-user-images.githubusercontent.com/978229/239575762-40f065c9-ae05-4218-a9f9-db0484a43a3f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNzMxOTIsIm5iZiI6MTcyNjE3Mjg5MiwicGF0aCI6Ii85NzgyMjkvMjM5NTc1NzYyLTQwZjA2NWM5LWFlMDUtNDIxOC1hOWY5LWRiMDQ4NGE0M2EzZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQyMDI4MTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hM2Q3MmFlZTI0OTVmZTNmYTA2ZTk5N2M3ZTIxMjI3OGYzYTU5YzBhZDljM2VjZTY1MDk2ODg2MTI3MTcwNDZjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.vY0uadv_lM-9HE8XBoiq2I0blPiam4ozu45lTcOGTXc)
![Screenshot 2023-05-19 at 17 28 11](https://private-user-images.githubusercontent.com/978229/239575878-9931aeb3-b400-4fde-94ee-2c51e0711519.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNzMxOTIsIm5iZiI6MTcyNjE3Mjg5MiwicGF0aCI6Ii85NzgyMjkvMjM5NTc1ODc4LTk5MzFhZWIzLWI0MDAtNGZkZS05NGVlLTJjNTFlMDcxMTUxOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQyMDI4MTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYzFkOWYwNTc5Nzg3NTJmZTlkOWE0YjE4YjBlODllNzdlMGM3Y2NhY2NjZmIyNThjZDBlOWZlMWY3NDA3ZTg0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.sjiacFyVMc60gucUxLaKY5ECp_O1Vl3ktw5ArbzdgbA)
![Screenshot 2023-05-19 at 17 28 34](https://private-user-images.githubusercontent.com/978229/239575917-be66b4b9-e34a-41c6-9da6-c343bd5649e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNzMxOTIsIm5iZiI6MTcyNjE3Mjg5MiwicGF0aCI6Ii85NzgyMjkvMjM5NTc1OTE3LWJlNjZiNGI5LWUzNGEtNDFjNi05ZGE2LWMzNDNiZDU2NDllMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQyMDI4MTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MmRmZmZjMTA2NWM2ODk3N2QxOTYwN2ViNGI4ZmE1MmM4ZWVhNzg5OWI1NzMxNmJkYzA2MTY0YmM3ZGI4ODYyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.DpBENCxrAZh55dTYCPtZIhCfBLe3MudvIF5HSm0Nco8)
This project uses NextJS 13 along with Tailwind for styling. The image galleries have been created using the Yet Another React Lightbox module customized to work synchronously between two independent galleries and with the styles modified with Tailwind.
Images are dynamically downloaded the first time the project is built using the official JavaScript wrapper for the Unsplash API.
To run this project locally you must clone the repository, create a .env.local
file with your Unsplash access key (see the .env.local.example
file) and run it with npm like any other NextJS project:
npm run dev
One of the best ways to learn and improve is by sharing knowledge, so you can use this project to study and improve. I hope you find it useful!