Creating a slideshow
Let's get started with Chapter 3. We start off this chapter with the coolest usable and most commonly prevailing thing on the web - slideshows. By the end of this lesson, you will have a fully operational slideshow. In the process we will discover the "this" command.
The idea behind the this command is simple. When we're inside of a method and want to refer to the object that owns that method we refer to this. One of the most important concepts in object oriented programming is our desire to hide explicit names, helping turn our code from a one-time hit to a reusable Hero. The this command enables us talk to our object without naming it directly.
Video Transcript
00:00in this chapter my cat joins me. I was trying to figure out what direction I
00:07have to go because of the camera. So in this lesson and throughout this chapter
00:11we're going to be building a slideshow. Now we're gonna start in this lesson
00:15building it kind of the wrong way, the fast way, the easy way. There is no right
00:20and wrong really, but we'll build it the easy way in this lesson and in the
00:24next lesson what we're gonna do is we're gonna actually move in the next
00:28few lessons to a more object-oriented way, a more reusable way. Really that's
00:34kind of the theme of our courses in general. The more reusable your code is
00:39maybe it's a little bit harder in the beginning to build it but over time when
00:42you get used to it it becomes a lot more powerful because then you could reuse
00:46the same code to a lot more stuff and you'll see a lot of times that the code
00:50that you build if you build it correctly you'll find yourself using it over and
00:54over and over and as your career goes on and you get projects from clients
00:58you won't have to start from zero each time be able to grab things that you
01:02already created earlier. Alright so let's get started let's first do it the easy
01:06way let's get a slideshow running and once we're done with that in the next
01:10few lessons we're gonna go back and try to make it better. Let's get chapter 3 rolling
01:14and what I wanted to do is I want to focus and show you what our main
01:18project of this chapter is going to be. So you can see on our homepage on
01:22zero2geek.com currently we have a slideshow that really isn't the best
01:26slideshow of them all and hopefully together we'll be able to create a better
01:30slideshow and we're gonna start off with trying to recreate this exact animation.
01:35So let's get started what I did is I created a file with all the CSS and all
01:42the HTML stripped out of the JavaScript so if we click on refresh it will be
01:46without it and we're gonna actually recreate that what we just saw a second
01:50ago and make it actually work. So I'm gonna go ahead and just jump right in
01:55there we're gonna start doing it and I'm gonna start doing it first the wrong
01:59way and then after we're done with the wrong way then we're gonna come back and
02:03try to figure out how can we make it better how can we make it smarter. Now
02:08really why the reason why I'm gonna first show you the wrong way because I
02:11want you to see how to do it how you can do it and once we know how to do it
02:16then we're gonna go back and ask ourselves well it wouldn't be lovely if
02:19I could use the same slideshow also to all these other areas where there are
02:24slides it might not be rollovers but in these cases it'd be lovely if I could
02:28use the same mechanism the same logic that applies to this slideshow to reuse
02:33those mechanisms and or to be able to to build it in a way where will it be able
02:39to reuse them more easily. Alright so with that said let's start off first
02:42with our first getting started getting it right getting it working not
02:47necessarily the smart way. So I'm gonna go ahead and in our chapter 3 I'm just
02:52gonna I want to highlight those buttons because those are gonna be our activity
02:56zones. Now we're gonna have basically a few classes here we have here our active
03:02class well the last class doesn't really do anything in this case I could delete
03:05it but we have here our active class which basically will keep the element
03:09highlighted so if we go back in our browser we'll see that that is
03:13remaining active because it's the one that's selected. Now we're not we're not
03:17gonna sort that out yet we're gonna start with the animations themselves. Now
03:22more than that we'll see that we have your classes called button 1, button 2,
03:253, and 4 although if you go into the CSS you won't find anything that
03:30references to them and really the only reason they're there is because we want
03:34to fetch this value 1, 2, 3, 4 to help us know where do we animate our element.
03:39Now all the different slides we have here one slide and another slide and
03:43another slide they're basically all stacked together and if we go into our
03:48console and we go to our inspector and we find our slide itself right here
03:54just gonna be inside of a container you can see our slide container we have our
03:58left value which is the value that we want to animate and while we animate
04:02that property we're gonna get access to the other content that is in a deeper
04:07layer. Now each element right now if we go inside of the slide itself the
04:12slide itself its width is 950 pixels so really what we want to do is each time
04:17someone rolls over our button we want to push by push to the left or subtract
04:24our value by 950 pixels each time so this would be you know at 0 this would
04:30be at 950 this would be 950 times 2 and times 3. So let's go ahead let's do that
04:37so let's go into our JavaScript and actually activate that slideshow and
04:41you'll see how simple it is to create an interactive slideshow really
04:45really easily. So the first step that I want to do is I want to approach all the
04:49buttons so I'm just gonna create quickly a function that will basically
04:54approach all of our A buttons and if I look here to my buttons class you'll
05:00see that I have an ID of button and then it's an A so I could approach our
05:03ID button A and that should fetch all of our buttons so I'm gonna go ahead
05:07into our jQuery I'm gonna ask for button A that way I'm gonna get all the
05:13buttons that have the well all the all the A tags inside of the button div now
05:22I'm gonna ask for a mouse over not what I just wrote mouse over and our mouse
05:28over we're gonna send into it a function and what I'm gonna do is I'm
05:31gonna create an anonymous function if you don't know what that is basically I'm
05:35just creating the function and putting it right inside inside of here we're not
05:40giving it a name instead of creating a function and sending it in that way we
05:44don't have to worry too much about scope because our element is going to be
05:48basically living inside here so I don't have to worry about it too much all
05:53right so the next step that I want to do is I want to actually let me just
05:56trace out our console out more accurately console.log our button and I'm
06:04gonna trace out this because we talked about it really briefly but in jQuery
06:09when we say this and it's a very object oriented type of thing we're gonna be
06:13basically talking to whomever is actually selected right now and because it's a
06:48method and not a function it's gonna be talking to that specific element that
06:52has been selected so if I go ahead and I click on save go back to my browser and
06:56click on refresh we're gonna see that each time when if I open up the
07:00console each time that I roll over an item we're gonna see that specific A tag
07:04being selected but in one two three four now the next thing that I want to do is
07:09I want to actually get the actual value here which button it is so to be able to
07:14get that button value I'm gonna basically approach and try to get the
07:17classes themselves and to do that I'm just gonna do the most rudimentary kind
07:22of code here by basically saying I first of all I'm gonna I'm just gonna create
07:28your variable I'm gonna call it integer or let me just call in more index so for
07:35our index itself I'm gonna approach our item I'm gonna wrap it in the jQuery
07:40function so I could then access the attribute function and basically
07:45retrieve the class and what that would do is it's gonna return to me whatever
07:49the class is of that button so if I just go ahead and you know before I even
07:53finish this I'll do a console that log for our index we should be getting now
07:59the actual class itself instead of the whole HTML element so if I go ahead of
08:03your click on refresh we're gonna see the button one button two button three
08:07button four and the full text of that specific class the next step that I want
08:12to do is I want to actually fetch that specific index that specific value right
08:16here now strings by default have a lot of useful functions and one of them
08:20enables us to basically fetch only that specific item so to do that what I'm
08:25gonna do is I'm gonna approach my my object itself I'm gonna go ahead and what
08:31I'm gonna do is I'm gonna basically approach the char at and the char char
08:38at basically asks for an index and in my case the index and it starts at zero
08:44by the way so in our case the char at index is basically zero one two three four
08:49five six and here we go this is item six so if I go ahead here and just put here
08:54the value of six and I save this and I run it we should now get our value so if I
09:00click here refresh if I go to my item we'll see your item one item two item
09:05three and item four now notice these are strings and not numbers because very
09:10soon we're gonna want to duplicate the value that we're getting so before we
09:15even duplicate the value we want to convert it into a number so let's do that
09:20right ahead right away what I'm gonna do is I'm gonna wrap this value that we
09:24got back and I'm gonna ask it to parse it into an integer basically saying take
09:28that string turn it into a number that is a whole complete number in our case
09:33it doesn't really matter that it's whole back to our code and clicking on
09:37refresh we'll see that now we're getting a number value you see that
09:42there's no double quotation around it anymore instead of a string so now we're
09:45ready to take that value and use it to define our positioning now the last
09:52thing that's left for us to do before we start animating is we have to well one
09:57issue really one issue that we have is that when we're in position zero we want
10:03our X to be at zero and if we take one and duplicate it by 960 well we're
10:09not gonna or 950 960 whatever the value was there I don't recall but if go to our
10:15slide really quickly it's 950 if we duplicate the value by 950 what would
10:20happen is our our element would would actually have here I know so there's oh
10:26there's a margin height oh so so I probably would want to add to it maybe
10:30another maybe we'll see in a second but back to back to my point back to
10:35we're talking about is when we're at one we really don't want it to be duplicated
10:40by one we want it to be equal zero so it would be really helpful if our first
10:45value was zero so to do that all I have to do is just go right here after I
10:49parse it into an integer subtract one from my value and then the values that
10:54I'm gonna get are between basically zero and three instead of one to four now I
10:58could have if I wanted to also set my HTML to zero through three but in a lot
11:03of scenarios you might have these names already configured and you don't really
11:06have a way to change it so in in that's a scenario so we're working around it
11:10reducing our index to what that we what we want it and need it to be and in
11:16that case we'll have easier access to the values that we need and that's it
11:19all that's left for us to do is to actually animate it so I'm gonna go
11:23ahead and actually do the animation itself now so I'll just delete that
11:26console and I'm gonna go ahead and just call tween light and to and to whom
11:32do we want to animate who do we want to animate we want to animate that slide
11:35container so I'm gonna go ahead there and just add that slide container class
11:41next we're gonna define how long we're gonna do it for one second and last but
11:46not least for us is we're gonna go for that left parameter and we're gonna
11:49take minus 950 and duplicate it by the index that we're in now minus
11:57ninety nine hundred and fifty because we want to go left we want it to be a
12:00negative value and not a positive value so if I go ahead and save this and
12:04click on refresh on our on my browser and we go to the element we'll see that
12:10now our animation is going to take us to where we want to go and we could go
12:15backwards we could jump to a specific spot as well and you'll see that we
12:19have here a little bit of kind of like extra stuff that we don't really want
12:23so we probably would want to also add to this a bit of a padding which we
12:27were talking about that a little bit earlier so what we'd want to do is
12:31probably also maybe set it to be maybe at minus 960 instead so I'm gonna go
12:38there to 960 and that should solve our problem so if I go there and click on
12:44refresh if that doesn't solve our problem then we might want to just add
12:47it in so we see this is this is working really nicely and that's exactly what we
12:52were going for that's it we created our sample and it's exactly the way we wanted
12:59it to be now we're done with this lesson but with this lesson of setting up a
13:05slideshow you just created a slideshow congratulations we're gonna make a much
13:09more advanced slideshow as we go by throughout this chapter but what I
13:12wanted to talk about and what we're gonna be dealing with next lesson is I
13:16want to make this a little bit less personal to this element and one thing
13:21that I would love to do is I would also love to get rid of these names because
13:25these class names have no real meaning that we're just creating them so we're
13:29gonna want to come up with a solution to be able to because really when we're
13:33looking at this our problem here is also that if we had more than nine
13:36slides if we had 10 slides then it wouldn't really work it would never go
13:40to the 10th slide if there was 20 slides here it wouldn't work right so
13:44we're creating something that will only work for from under 10 items but
13:48what we want to do is want to fix that obviously and also beyond that we also
13:52want to make sure that what we're doing here is not gonna only work for this
13:56specific buttons but enable us to be able to basically use other buttons and in
14:01other words what we're gonna do is we're gonna create our first object
14:04oriented object creating the exact same thing and solving this dilemma this
14:09problem that we have and we're gonna see it right away and we will see how to
14:13do it which is gonna be absolutely awesome so we'll see in the next lesson
14:18we're gonna recreate the same thing and it's gonna be a little bit more
14:22complicated but the complexity of what we're gonna do is gonna make it easier
14:25for us to then reuse this code in future projects all right so let's get
14:30started