Image Gallery DND

A beautiful Image Gallery with Drag and Drop feature

Explore the docs »

View Demo · Report Bug · Request Feature

---

Table of Contents

• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Features
  • Featured Image
  • Hover Overlay
  • Drag And Drop
  • Set Featured
  • Selection
  • Image Box/Expand Image
  • Zoom, Pan and Pinch
  • Add Your Own Images
• Contributing
• License
• Contact

About The Project

A beautiful Image Gallery with Sorting and Drag and Drop Support. For full feature list, head over to the Features section below.

(back to top)

Built With

(back to top)

Getting Started

🌐 The project is already live at: https://webdevsk.github.io/Image-Gallery-DND/

OR

🖥️ You can test it on your local machine by following the steps below.

⭐ Want to build a Drag and Drop only component from scratch? You can follow my own instructions here:

( )=> Quick Setup DND Kit

Prerequisites

1. Install NODE.JS and Git

2. Open your projects base folder and launch any terminal of your choice.

3. Run this command:

   npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/webdevsk/Image-Gallery-DND.git

2. Install NPM packages

   npm install

3. Fill in a .env.local file following the patterns of envSample.txt

4. Run Dev server

   npm run dev

(back to top)

Features

Featured Image

• Built using CSS Grid layout. Fully responsive on all devices.
• First image spans by 2 cells in both direction indicating a Featured Image.

Hover Overlay

• Hover over an image to reveal an Overlay with action buttons.
• useState hook allows each button to show up indivisually based on different scenarios.

Drag And Drop

• Uses dnd kit library to allow drag and drop feature.
• Supports Pointer, Mouse, Touch and Keyboard interactions for better accessibility.
• Shows a Duplicate element that floats while dragging.
• Shows a Drop zone with proper styling.
• Animates on drop end.
• Sorts the state variable based on drop source and target.
• Animates on every Sort operations.

Set Featured

• Overlay features a Set as Featured button.
• Sorts the state variable array to move current item to the beginning.
• Animates while being sorted.

Selection

• Overlay features a Selection button.
• Select/Mark, Unselect/Unmark items for deletion.
• Gallery Header shows Selected items count, a Batch Selection button and Delete button.
• Items are removed from State variable array upon deletion.

Image Box/Expand Image

• Overlay features a Expand button.
• Shows a Dialogue with the current image for a bigger view.
• Button for closing the Dialogue. Clicking outside closes the dialogue as well.
• Carefully setup Dialogue height and width for the Mobile support.

Zoom, Pan and Pinch

• Uses react-zoom-pan-pinch library to allow expanded image to be interactive.
• Supports Mouse, Mouse Wheel and Touch to effectively zoom, pan and pinch image.

Add Your Own Images

• Press Add Images button to add your own.
• File size validation:
  • Upto 2MB (2048KB)
• File format validation:
  • Only allow types of file: image

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Project Link: https://github.com/webdevsk/Image-Gallery-DND

(back to top)