Up next in 10
Build a React.js Image Gallery or Carousel Component With Transition Using react-photo-view Library
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:06
actually display images in a gallery
0:09
like Carousel like structure inside
0:11
react chairs and for this we have a spe
0:13
special package which is available I'm
0:16
showing you a live demo of this package
0:18
so if you let's suppose if you have a
0:19
series of images that you want to
0:21
display inside your react sh application
0:23
you can display this like this in a
0:25
gallery like structure and when the user
0:28
navigates and they can clearly see all
0:30
the images and the images will appear in
0:33
this Gallery like structure with these
0:36
custom detail
0:38
controls and you can see that so nice
0:40
little transition animation will also
0:42
take place as they click on the
0:44
individual image you will see the image
0:46
will display like this and when they go
0:48
to the next image this transition
0:50
animations will take place so it's a
0:52
carousel or Gallery like structure so if
0:55
you have a series of images that you
0:56
want to display inside your application
0:58
this react Chas package is very much
1:00
helpful and now I will show you the name
1:03
of the package which is this react photo
1:06
view this is an react photo preview
1:10
component and it is almost having 24,000
1:14
weekly downloads this is actually the
1:16
command here I have already installed
1:18
this package so I will just show you a
1:21
very basic
1:25
example so what I will do
1:30
just make a simple functional component
1:33
and just import
1:34
this package and this package contains
1:38
these two functions photo provider and
1:40
photo
1:42
view so you can see we are importing it
1:45
from react photo View and it also need
1:49
to offer the CSS file as well we do need
1:51
to import the CSS file so in the same
1:54
package react photo view we need to
1:57
import the CSS files dis react photo
2:03
view. CSS so we are importing the CSS
2:07
file if you see we are importing the CSS
2:10
file as well and now we need some
2:13
photographs that we are importing it
2:15
from internet if you see we are
2:16
importing it from unsplash API so we
2:20
just pasted these four images that we
2:22
will be displaying it in the gallery
2:23
like structures we have just declared an
2:25
array here of photos it contains these
2:28
four photographs
2:30
so now in order to display this it's
2:33
very
2:33
simple now we come to the jsx and we
2:38
actually display inside the div like
2:41
structure I will just give it a display
2:44
property
2:45
of
2:48
flex and flex wrap will be around wrap
2:52
and I will just have a gap of 10 pixel
2:55
in between each image so now we'll have
2:58
this component which is photo provider
3:00
and inside this component we will be
3:02
wrapping wrapping everything that we
3:04
want to display so these are my
3:06
photographs I will just Loop through you
3:09
can see we are looping through this
3:11
variable so we are using the map
3:14
function so we'll simply use the map
3:16
function for each photograph we will
3:19
look through and display the content in
3:22
this custom fun component photo view
3:25
which we are importing if you see from
3:27
this package so now this package can we
3:30
need to pass some properties first is
3:32
the key parameter that we need to pass
3:34
which is the index variable second one
3:37
is the source which is the address of
3:40
the
3:41
photograph and inside this we need to
3:43
actually render
3:45
out the source of the image so which is
3:49
photo secondly if you
3:52
also need to pass let's suppose some
3:57
custom Styles if you just refresh the
4:00
application and just look it will look
4:02
something like this you can see now the
4:05
images if you click on individual images
4:07
it will display like this if you also
4:09
want to add some transition animations
4:11
as well when when we click on the
4:14
individual image it should have some
4:16
slight little animation as
4:18
well so we can even provide some custom
4:21
styles to this image I will just make
4:23
this width just make sure it appears
4:26
like a gallery so I will just make the
4:30
width of each image as 150 pixel and
4:32
cursor will be changed to pointer and uh
4:38
a third style will be a border
4:42
radius of I think I will give it 8
4:46
pixel so these are the Styles I'm given
4:50
and it will look something like this if
4:51
you see it will appear side by side each
4:54
image will have this much width and
4:56
Border radius has also been applied so
4:59
whenever you click on the individual
5:00
image it will appear something like this
5:02
in a carousel structure so now if you
5:05
want to apply some animations to it you
5:07
can go to this tag photo provider and
5:10
right here you can add some speed here
5:14
let's suppose if you want to add some
5:16
speeding
5:19
animation so 800 millisecond we have
5:21
added this speed animation so if you now
5:24
click on the image it will have this
5:26
slight little animation that you see
5:30
and you can change the type of animation
5:33
by the property of easing and then you
5:35
can specifically provide which type of
5:37
Animation that you want to apply so we
5:40
have various animation types you can
5:42
check the documentation as well of this
5:45
plugin so we are applying these
5:46
animations cubic B so if you refresh now
5:52
and click it you will see that it will
5:55
have this nice
5:57
little animation
6:03
uh apart from that it also have various
6:06
other components as well you can check
6:08
the GitHub repo as well and it has got a
6:12
nice little documentation you will
6:17
see it has shown it's a photo preview
6:20
component and it can even be operated in
6:22
Mobile as well you can simply drag in
6:25
and then it can even do it it's a great
6:29
photo previewer component for
6:31
specifically made for reactj
6:32
applications so thank you very much for
6:35
watching this video and do check out my
6:38
website as well freem mediat tools.com
6:40
which contains thousands of tools
6:43
regarding audio video and image and I
6:45
will be seeing you in the next video
#Clip Art & Animated GIFs
#Multimedia Software
#Online Image Galleries