jQuery and AJAX Tutorials 22 | Interactive Portfolio Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

what's up guys
my name is Elias and this is your twenty
second tutorial on jQuery and you know
the previous tutorials we created this
frame and this overlay and now we are
going to add some interactivity using
jQuery and we'll make this overlay and
frame appear only when we click on the
some thumbnail all right so let's just
go ahead and enable display non I mean
enable display down here in this or
flare frame and overlay so they are
hidden by default and we only want them
to appear when the some nails are
clicked so we want to proceed to our
script but before we start programming
we need to add the script then we need
to add the jQuery core as well so and we
did in the very first tutorials so you
just need the script tag and the stores
property and set it to Jas script Jas
and before that you have to actually add
jQuery so I will just go to our folder
and copy the jQuery file name and just
add the same tag and create the source
property and the jQuery port is stored
in this J's folder yes and yes so now
we're all set now we are connected
jQuery to our web page so now we have
the script and as I told you in one of
the first tutorials you would want to
use this jQuery built-in function which
will run the code only when the whole
the entire page is loaded so don't
forget to add this function and and
please write your the whole code within
this function so what are we going to
what are we going to do now we have to
create a click function a click event
for the thumbnail and let's take a look
at the some nails first well we have
this
ul unordered list of portfolio and this
list elements and images so what I'm
going to do I want to track this image
when it's clicked and this image is
inside of this unordered list with the
idea of portfolio so you can easily
create a jQuery selector on this
portfolio first or folia help is pod
right and then empty space and say IMG
so it will track it'll create an event
for every image inside of this portfolio
and then use this quick function which
we used a lot in the previous tutorials
and inside of this brackets the magic is
going to happen so if you want to select
the image that very image which is
clicked because right now we well this
is a common selector for every image but
if you want to get the image which is
clicked you can use this this reflector
and now we kind of grab the image which
is actually what's clicked and so what
I'm going to do with it I want to get
its worse I want to get its source to
the image I will I'll create a variable
called SRC and set it equal to this dot
8080 TR which means attribute attribute
and let's just grab the attribute of
source of this image element so the in
this variable source we store this
source property so just the path image
because we want to get the past to the
image when we when the image is clicked
and now we can select the frame the
frame because the frame is this white
box with the image and this frame
contains an image and we want to select
the image inside of this frame and set
its source attribute to the
attribute of the thumbnail which was
clicked so let's just go ahead and copy
the source right here so what this line
of code does it grabs this image which
is inside of this frame looks for the
attribute
source and sets it equal to this values
this values this variables value well it
sounds kind of tricky but when we are
done with it
you will see how it works and what you
also are going to do we want to run the
overlay and the frame to appear so let's
like the frame again and use this fading
function we already used and we also
want to fade in the the overlay I forgot
the parenthesis and I forgot the route
overlay dot eight in and make sure you
spell this I uppercase okay and now I
think this code is going to work and we
can go ahead and test it so I'm going to
click on this image and it worked so you
see this image is displayed on the frame
and the rest of the page got dark but we
have we also have to style the the frame
because this picture is too large so we
want this picture to be centered and
this is something we are going to do in
the next tutorials all right guys thanks
for watching I hope you guys learn new
stuff and I'll see you guys in the
twenty-third tutorial have a nice one
you