Responsive Image gallery in React js | Build a Photo Gallery With React js | Image Gallery in React
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- Responsive Image gallery in React js | Build a Photo Gallery With React js
________________________________________
Buy me a coffee: www.buymeacoff...
React js frontend Project Tutorial Playlist :
• React js frontend Proj...
Telegram Channel Link-
t.me/Reactjs_B...
Instagram Link -
/ codewithyd
Fb group-
/ 849818908701780
_____________________________________________________
This video is only education proposed
This video is not designed to harm anyone.
_____________________________________________________
Track: Arc North - Meant To Be (feat. Krista Marina)
Link: • Arc North - Meant To B...
______________________________________________________
Track: Culture Code - Make Me Move (feat. Karra) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Culture Code - Make Me...
Free Download / Stream: ncs.io/makememove
______________________________________________________
Track: Killercats - Kaibu [NCS Release]
Music provided by NoCopyrightSounds.
Video: • Killercats - Kaibu | T...
Free Download / Stream: ncs.io/kaibu
______________________________________________________
#codewithyd
I tried so many galleries and libraries. This one was the nicest looking and the simplest to build! thank you, you're awesome
i love this video, thanks. ideally if git repo link is attached, that would have helped to see, why my result / behaviour is slightly different at end.
Everything works up until the CloseIcon section! i implement the closeicon i get
"ERROR Invalid hook call. "
do you have the repo ? i have a problem and i can't fix it.
the image when I click it shows me the stretched width
Thanks man you solve my big problem by this short video thanks again💖
Thank you! I used styled components instead of a css file and it worked great!
Great support thanks 👍
How did you style (model? 'model open' : "model") class using styled components?
@@codewithyd how to add prev/next slide arrows?
@@sandikos4943 theres a great video for that
Cool, Круто спасибо! просто и ясно, а галерея получилась супер!
Excellent work
Exactly what I was looking for. Thanks
thank you so much for this video 🥰
The downside is that the order of the images goes from top to bottom and then to the next column. In most cases, we would want the order to be left to right.
what is key={index}?? at 7:44
BTW awesome tutorial man really loved it
Thank you so much for this tutorial !! 🤗
beautiful work but how can we add the prev/next slide to this project
Thank you very much for this .. Wish all the best in your development journey
Vielen dank du hast mir sehr gut geholfen! Alles gute
Thank you for your great support 👍👍
thank you , you saved a lot of my time
thanks man, you save my life
Amazing bro🎉🎉😊
makes complete sense thanks bro
thanks it works but i have add more steps from my slef
That's the great thing
when I click the cross icon the modal doesn't ckise, i ahve 2 hours tryting to find the error and fix it, i used font awesome react icon, and exactly followed your code. even chatgpt couldn't figure out
thank you so much
Thank you very much for this
Welcome bro 🤗
Hey, how about adding a see more button to show more images, i implemented but the sequence is broken of the image, some images go up
It doesn't work after deployment
Thanks you it's amazing !
wht is the different between js and JSX..? because mine it isn't work but when i used tailwind class this is work
It helps, thanks!
Thank you, very cool! ^^
Thank you soo much for your great support .
Hello, and how to implement on that "template" to move to another image? with side arrows (left, right) .. when opened last img, then reroll to first one
Thank you 🥰
What would be the best approach to incorporate a "about me" and "contact" view? And why are my images not responsive or distortioned? I copy the exact same code.
Is it possible to make like this in Gatsbyjs? There are very few video about it in youtube.
Excelent! thanks
Welcome to CodeWithYd 🤗
Dude, Why does my pictures looks like the side of the website even with the CSS code? It is organized in column of 3, but no margin no nothing.
Thanks//
Welcome to CodeWithYd bro 🤗
please what extension on chrome are you using to test the responsiveness
I'm using chrome developer tool
@@codewithyd thank You. please can you make a tutorial on how to add videos to the gallery? and a way to add many pictures without having to import them one by one and giving each one an id... like using a loop to add many pictures from a folder to the gallery
Thanks bro ❤
close button is now working help me plz...
Would rather have words.
mast yaar,
Thank you bro 🤗
sir with your code i have face many errors because i havedoing react with typescript can you plz do this gallary with typescript
Can you please share with me your source code
I have looked at this 3 times now and I can't get my images to open up. I don't know what I am doing wrong
Watch this video proper and code
And thanks for your support 👍
If anyone watching in the future has the same problems check your spacing for the names in the CSS.
E.g.
.model.open Not .model .open
there should be no spacing, that was my problem
@@cherishi.o9051 Hi cherish I am not able to close my model pointer is not displaying can you help
.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%;
padding: 0 12px;
}
.gallery .pics {
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
cursor: pointer;
margin-bottom: 12px;
}
.gallery .pics:hover {
filter: opacity(.8);
}
@media (max-width: 991px){
.gallery {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 480px){
.gallery {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}
/*model */
.model {
width: 100;
height: 100vh;
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
transition: opacity .4s ease, visibility .4s ease, transform .5s ease-in-out ;
visibility: hidden;
opacity: 0;
transform: scale(0);
overflow: hidden;
z-index: 999;
}
.model.open {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.model img{
width: auto;
max-width: 100%;
max-height: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 20px 0 20px;
margin: 0 auto;
}
.model.open svg{
position: fixed;
top: 10px;
right: 10px;
width: 2rem;
height: 2rem;
padding: 5px;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
cursor: pointer;
}
import React,{useState} from "react";
import '../CSS/gallery.css';
import CloseIcon from '@material-ui/icons/Close';
const Gallery = () => {
let data = [
{
id:1,
imgSrc: 'Images/Home1.jpg',
alt:''
},
{
id:2,
imgSrc: 'Images/Home2.jpg',
alt:''
},
{
id:3,
imgSrc: 'Images/Home3.jpg',
alt:''
},
{
id:4,
imgSrc: 'Images/collage.jpg',
alt:''
},
{
id:5,
imgSrc: 'Images/Fantasy.jpg',
alt:''
},
{
id:6,
imgSrc: 'Images/collage2.jpg',
alt:''
},
{
id:7,
imgSrc: 'Images/home.jpg',
alt:''
},
{
id:8,
imgSrc: 'Images/Home7.png',
alt:''
},
{
id:9,
imgSrc: 'Images/Home8.jpg',
alt:''
},
{
id:10,
imgSrc: 'Images/Home9.png',
alt:''
},
{
id:11,
imgSrc: 'Images/Home10.jpg',
alt:''
},
{
id:12,
imgSrc: 'Images/Home11.jpg',
alt:''
},
{
id:13,
imgSrc: 'Images/Home12.jpg',
alt:''
},
{
id:14,
imgSrc: 'Images/Home13.jpg',
alt:''
},
{
id:15,
imgSrc: 'Images/Home14.jpg',
alt:''
},
{
id:16,
imgSrc: 'Images/Home15.jpg',
alt:''
},
{
id:17,
imgSrc: 'Images/Home16.jpg',
alt:''
},
{
id:18,
imgSrc: 'Images/Home17.png',
alt:''
},
{
id:19,
imgSrc: 'Images/Home18.jpg',
alt:''
},
{
id:20,
imgSrc: 'Images/Home19.jpg',
alt:''
},
]
const [model, setModel] = useState(false);
const [tempimgSrc, setTempImgSrc] = useState('');
const getImg = (imgSrc) => {
setTempImgSrc(imgSrc);
setModel(true);
}
return(
setModel(false)} />
{ data.map((item,index)=>{
return (
getImg(item.imgSrc)}>
)
})}
)
}
export default Gallery;
how to add load more function to this project
pics are unable to load
whats the title of the song
can i get source code and pics
source code??
Hi cannot close the model can you help me can you share the code
Check your project css and thank you for your support
@@codewithyd Hi I have checked the video 5 times have not been able to resolve this issue im on last step cannot close the image after clicking it
import React,{useState} from "react";
import '../CSS/gallery.css';
import CloseIcon from '@material-ui/icons/Close';
const Gallery = () => {
let data = [
{
id:1,
imgSrc: 'Images/Home1.jpg',
alt:''
},
{
id:2,
imgSrc: 'Images/Home2.jpg',
alt:''
},
{
id:3,
imgSrc: 'Images/Home3.jpg',
alt:''
},
{
id:4,
imgSrc: 'Images/collage.jpg',
alt:''
},
{
id:5,
imgSrc: 'Images/Fantasy.jpg',
alt:''
},
{
id:6,
imgSrc: 'Images/collage2.jpg',
alt:''
},
{
id:7,
imgSrc: 'Images/home.jpg',
alt:''
},
{
id:8,
imgSrc: 'Images/Home7.png',
alt:''
},
{
id:9,
imgSrc: 'Images/Home8.jpg',
alt:''
},
{
id:10,
imgSrc: 'Images/Home9.png',
alt:''
},
{
id:11,
imgSrc: 'Images/Home10.jpg',
alt:''
},
{
id:12,
imgSrc: 'Images/Home11.jpg',
alt:''
},
{
id:13,
imgSrc: 'Images/Home12.jpg',
alt:''
},
{
id:14,
imgSrc: 'Images/Home13.jpg',
alt:''
},
{
id:15,
imgSrc: 'Images/Home14.jpg',
alt:''
},
{
id:16,
imgSrc: 'Images/Home15.jpg',
alt:''
},
{
id:17,
imgSrc: 'Images/Home16.jpg',
alt:''
},
{
id:18,
imgSrc: 'Images/Home17.png',
alt:''
},
{
id:19,
imgSrc: 'Images/Home18.jpg',
alt:''
},
{
id:20,
imgSrc: 'Images/Home19.jpg',
alt:''
},
]
const [model, setModel] = useState(false);
const [tempimgSrc, setTempImgSrc] = useState('');
const getImg = (imgSrc) => {
setTempImgSrc(imgSrc);
setModel(true);
}
return(
setModel(false)} />
{ data.map((item,index)=>{
return (
getImg(item.imgSrc)}>
)
})}
)
}
export default Gallery;
.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%;
padding: 0 12px;
}
.gallery .pics {
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
cursor: pointer;
margin-bottom: 12px;
}
.gallery .pics:hover {
filter: opacity(.8);
}
@media (max-width: 991px){
.gallery {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 480px){
.gallery {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}
/*model */
.model {
width: 100;
height: 100vh;
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
transition: opacity .4s ease, visibility .4s ease, transform .5s ease-in-out ;
visibility: hidden;
opacity: 0;
transform: scale(0);
overflow: hidden;
z-index: 999;
}
.model.open {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.model img{
width: auto;
max-width: 100%;
max-height: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 20px 0 20px;
margin: 0 auto;
}
.model.open svg{
position: fixed;
top: 10px;
right: 10px;
width: 2rem;
height: 2rem;
padding: 5px;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
cursor: pointer;
}
@@codewithyd hi it is resolved thanks for help
@@shrion3128Hii bro, can u please send me the working code u have.. Please bez I got lots of error.. Please
The downside is that the order of the images goes from top to bottom and then to the next column. In most cases, we would want the order to be left to right.
thanks for the great tutorial. I've tried to add a caption under the image. this doesn't work maybe because of the flex prop from the model class?
I solved it with a div on the bottom, give it position fixed, width 100%, text-align center, some padding and background.
Great 👍
That's great, thanks man! Saved a ton of time
if i want to move specific picture somewhere else ,how do i use this id in css file ?i try but..
bro where are you I am eagerly waiting for your videos
Sorry bro me thoda busy hu is liye
Bro error is coming while importing gallery from './gallery';
You check the code of './gallery' once, there must have been some mistake, that's why this error is there.
This is awesome, thank you.😀
Welcome to code with yd
Awesome work sir, thank you!
thanks
Welcome bro 🤗
good job
Thanks 😊
Thanks for the Tutorial. Great work.