jQuery and AJAX Tutorials 25 | Programming Arrows Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Elias and
welcome to the 25th tutorial on jQuery
and in the previous tutorial we style
this two errors and what we want to do
now we want to do the right arrow
clickable so when we click on the right
arrow the next image should appear on
the screen and we already create
selectors for word in jQuery and now we
want to use all the power of jQuery to
provide this switch and if you use
normal JavaScript it would take you like
lots of lines of code to do such a task
but jQuery is a very powerful tool so
you can solve this problem having only a
few lines of code so the first thing I
want to do I want to figure out how do I
grab the next image and if you see we
have we have this list images inside of
this unordered I mean they have this
list elements inside of this unordered
list element and right now when we click
at an image we use the we use this
selector so we basically track the
current image which was clicked but in
order to proceed to the next one we need
to we need to get this li element so we
need we need to capture this list
element so but it's basically we have to
grab the parent element of this image
element in order to go to the next a
list element well it sounds very
complicated but it will be very clear
when I will just start programming so um
we have to add some some new variable
and I already added this variable I
named it current Li and this current Li
will contain the link to the to the li
element which
which owns the image which was clipped
all right so let's set current Ally
equal to this that parent so we have we
have this ally element and image element
inside of this Li element right and this
image element is stored in this this
reference and we want to get to the this
Li element and we do that using this
parent function so in the variable
current Ally we stored the link to this
parent element of the image which was
clicked and right now we can take
advantage of this of this variable and
we can we can basically fetch the next
list element so let's just go ahead and
do that
let's say let's define a new variable
I'll just go it next Li and set it equal
to current align dot next so this is how
jQuery works you use the small keywords
and they do magic for you so now we have
the next list element which contains the
next week the next picture in this next
Li variable so and then of course we
want to select the image and so if you
must let the image you just say next Li
dot children and you can just type IMG
because it contains only one image but
that's not it we want to get this images
source so you just can say dot ATT R
which stands for attribute and let's
just fetch it's worse like this and of
course we would we better create a
variable for it so I'll just create a
variable and call
what next SRC which stands for next
stores and then we can grab the main the
main image which is this image in the
frame which is this image so we selected
this image and set its source attribute
to this next source all right yep now we
can go ahead and test this functionality
well maybe it sounds kind of complicated
but if you do it a few times you will
get the idea and it will seem very easy
to you so that works but if I want to
switch to the next one again it doesn't
work because I have to update this
current Li value because now this
current li is pointing to the li element
from the first click so let's just
update the current you lie here on the
lion set it equal to the next Li and now
we we have to be able to switch between
the images 1 2 3 4
yeah it works perfectly so we now we
added this functionality so that you can
switch to the right and the next
tutorial will add some cool stuff too
and we'll also add the functionality of
going to the left which will be very
easy and so I hope you guys learn new
stuff and this tutorial sounded kind of
tricky but don't worry if you don't
understand everything if you just as I
said do it like two or three times and I
practice a lot you will get the idea
with very easily so I hope you guys
liked it and I hope to see in the next
tutorial