├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── components ├── WSPGallery.jsx └── wsp-gallery.css ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 WebStylePress 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React JS Image Gallery With Full Screen Modal 2 | 3 | React JS gallery by WebStylePress, that takes array of images and shows images thumbnails. On click of images full screen gallery appears and you can navigate through available images. 4 | 5 | ## How to Use 6 | 7 | Clone or download repo 8 | NodeJS / NPM / Yarn should be installed in your PC 9 | 10 | Open terminal or Git for Windows (Git Bash) 11 | Run these commands: 12 | 13 | ### Install Dependencies 14 | 15 | yarn install 16 | 17 | OR 18 | 19 | npm install 20 | 21 | ### Run app 22 | 23 | yarn start 24 | 25 | OR 26 | 27 | npm start 28 | 29 | ### YouTube Tutorial URL 30 | 31 | Title: Responsive Image Gallery in React JS | NO External Package | Plug & Play ReactJS Gallery 32 | 33 | to be updated 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gallery", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^6.1.1", 7 | "@fortawesome/free-solid-svg-icons": "^6.1.1", 8 | "@fortawesome/react-fontawesome": "^0.1.18", 9 | "@testing-library/jest-dom": "^5.16.4", 10 | "@testing-library/react": "^13.1.1", 11 | "@testing-library/user-event": "^13.5.0", 12 | "react": "^18.1.0", 13 | "react-dom": "^18.1.0", 14 | "react-scripts": "5.0.1", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstylepress/React-JS-Image-Gallery/ea430601874c9c15faaca8bbf6c6097b71094561/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstylepress/React-JS-Image-Gallery/ea430601874c9c15faaca8bbf6c6097b71094561/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstylepress/React-JS-Image-Gallery/ea430601874c9c15faaca8bbf6c6097b71094561/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | box-sizing: border-box; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | } 8 | 9 | .App { 10 | text-align: center; 11 | padding: 20px; 12 | font-size: 24px; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import WSPGallery from './components/WSPGallery'; 2 | import './App.css'; 3 | 4 | function App() { 5 | 6 | const galleryImages = [ 7 | { 8 | img: 'https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' 9 | }, 10 | { 11 | img: "https://images.pexels.com/photos/3861458/pexels-photo-3861458.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 12 | }, 13 | { 14 | img: "https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 15 | }, 16 | { 17 | img: "https://images.pexels.com/photos/1194713/pexels-photo-1194713.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 18 | }, 19 | { 20 | img: "https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 21 | }, 22 | { 23 | img: "https://images.pexels.com/photos/1712/sunglasses-apple-iphone-desk.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 24 | } 25 | ] 26 | 27 | return ( 28 |
29 |
30 |
31 | Responsive Photo Gallery (No External Library) in React JS 32 |
33 |

34 | 35 | 38 | 39 |

40 |
- WebStylePress -
41 |
42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /src/components/WSPGallery.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 4 | import { 5 | faCircleChevronLeft, 6 | faCircleChevronRight, 7 | faCircleXmark 8 | } from '@fortawesome/free-solid-svg-icons' 9 | 10 | import './wsp-gallery.css' 11 | 12 | const WSPGallery = ({galleryImages}) => { 13 | 14 | const [slideNumber, setSlideNumber] = useState(0) 15 | const [openModal, setOpenModal] = useState(false) 16 | 17 | const handleOpenModal = (index) => { 18 | setSlideNumber(index) 19 | setOpenModal(true) 20 | } 21 | 22 | // Close Modal 23 | const handleCloseModal = () => { 24 | setOpenModal(false) 25 | } 26 | 27 | // Previous Image 28 | const prevSlide = () => { 29 | slideNumber === 0 30 | ? setSlideNumber( galleryImages.length -1 ) 31 | : setSlideNumber( slideNumber - 1 ) 32 | } 33 | 34 | // Next Image 35 | const nextSlide = () => { 36 | slideNumber + 1 === galleryImages.length 37 | ? setSlideNumber(0) 38 | : setSlideNumber(slideNumber + 1) 39 | } 40 | 41 | return ( 42 |
43 | 44 | {openModal && 45 |
46 | 47 | 48 | 49 |
50 | 51 |
52 |
53 | } 54 | 55 | {/*
56 | Current slide number: {slideNumber} 57 |
58 | Total Slides: {galleryImages.length} 59 |

*/} 60 | 61 |
62 | { 63 | galleryImages && galleryImages.map((slide, index) => { 64 | return( 65 |
handleOpenModal(index) } 69 | > 70 | 71 |
72 | ) 73 | }) 74 | } 75 |
76 | 77 |
78 | ) 79 | } 80 | 81 | export default WSPGallery -------------------------------------------------------------------------------- /src/components/wsp-gallery.css: -------------------------------------------------------------------------------- 1 | .galleryWrap { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: 10px; 5 | align-items: center; 6 | justify-content: center; 7 | max-width: 620px; 8 | margin: 0 auto; 9 | } 10 | 11 | .galleryWrap .single { 12 | width: 200px; 13 | cursor: pointer; 14 | } 15 | 16 | .galleryWrap .single img { 17 | max-width: 100%; 18 | } 19 | 20 | .galleryWrap .single img:hover { 21 | transform: scale(1.02); 22 | } 23 | 24 | .sliderWrap { 25 | position: fixed; 26 | top: 0; 27 | bottom: 0; 28 | left: 0; 29 | right: 0; 30 | z-index: 999; 31 | background-color: rgba(0, 0, 0, 0.8); 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | width: 100%; 36 | height: 100%; 37 | } 38 | 39 | .sliderWrap .btnClose, .sliderWrap .btnPrev, .sliderWrap .btnNext { 40 | position: fixed; 41 | cursor: pointer; 42 | opacity: 0.6; 43 | color: #fff; 44 | z-index: 9999; 45 | } 46 | 47 | .btnNext:hover, .btnPrev:hover, .btnClose:hover { 48 | opacity: 1; 49 | } 50 | 51 | .sliderWrap .btnClose { 52 | top: 40px; 53 | right: 40px; 54 | } 55 | 56 | .sliderWrap .btnPrev { 57 | top: 50%; 58 | transform: translateY(-50%); 59 | left: 40px; 60 | } 61 | 62 | .sliderWrap .btnNext { 63 | top: 50%; 64 | transform: translateY(-50%); 65 | right: 40px; 66 | } 67 | 68 | .fullScreenImage { 69 | width: calc(100% - 40px); 70 | height: calc(100% - 40px); 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | } 75 | 76 | .fullScreenImage img { 77 | max-width: 100%; 78 | max-height: 100%; 79 | pointer-events: none; 80 | -webkit-user-select: none; /* Safari */ 81 | -ms-user-select: none; /* IE 10 and IE 11 */ 82 | user-select: none; /* Standard syntax */ 83 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------