jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Yas and
welcome to your 21st Tori on jQuery and
this tutorial we are going to start
writing some jQuery code for our
portfolio alright and but first I want
to get rid of this empty space so that
we have four pictures in in a row know a
line so you know every unordered lists
have default padding left of 20 pixels
and we want to overwrite it
to zero pixels and now it looks better
yes and the next thing I want to create
I want to create a frame I hope you
already know what lightbox is so
lightbox is simple plugin written in
jquery or javascript which allows you to
view pictures in a very good way you
just click on the thumbnail and pictures
appears slowly on the screen and the
rest of the page gets dark and this is
something what we are going to create
and how the rest of the pictures gets
dark we well the most picture viewers
just have an overlay which covers the
whole page and makes it like look dark
so let's create an overlay first just a
div element and I will just create a div
element and named overlay then style the
overlay so what the aurélie is going to
be it's going to be width and a
development with with 100% width and
100% height so it's going to cover the
whole page and it also have to has to
have a fixed position and background
color of black but we'll also set some
opacity so it will be a semi-transparent
and opacity let's just set it to 0.7
opacity now we can already take a look
at the overlay you see there the whole
page gets dark and this effect is caused
by this overlay but we don't need these
órale over time of course and we'll hide
it as default some the early wood will
only appear when we need it and the the
next step we want to create a frame a
frame which will appear above the
overlay just in centre of the page to
display a picture so let's create a
frame it doesn't matter where we created
since if you have the position fixed so
you can just create a div element just
underneath the overlay encode frame and
inside of this frame I would create an
image element and it shouldn't have any
source and just create an empty image
element and then let's hide it let's say
frame image or we can actually hide the
whole frame because we don't need it the
frame display:none
and we need to Center this frame and I
will also add background color white and
so what I'm also going to do is I'm
gonna Center it so first I have to add a
width of I'll just say 500 pixels and
the height of 400 pixels and I have to
Center it and how do I do that I can use
this margin lack property and set it
negative to the half of the width minus
250 pixels this is how we can Center it
and now let's test it see how it's going
to look like yeah but we forgot to set
position fixed of course position fixed
and now we would we see this frame
somewhere here on the left side but and
I think I did a mistake by using this
margin left and it's margin left yeah I
forgot something very important you need
to set it all
left 250 percent and then it's going to
be centered so now the frame is centered
but I don't like that frame is too small
so let's make it bigger I will just say
700 pixels to 500 pixels yeah and of
course adjust the margin left to 350
pixels and now we are going to have a
frame right here this white frame and
the rest of the page will be will be
dark because of the overlay and let's
just see how it's going to look like so
we'll basically see the rest of the page
is dark and right in the center is going
to be a frame with an image and I'm
afraid we are not going to make it in
this tutorial so in next tutorial we are
going to add this feature so that when
we click on this on the some on the
thumbnail the rest of the page gets dark
through this overlay and this frame will
appear and it's and will also have an
image here which just displays in the
context of the thumb or the thumb
thumbnail image alright guys I hope you
kind of learned stuff and you now you
know what overlay is and how you create
this effect so thanks for watching guys
and I'll see you in the next tutorial