Part 6

Build the home page image slideshow in JavaScript, and hide .php from addresses with .htaccess.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We write our own JavaScript slideshow for the home page gallery, debug it, and tidy the site's addresses. In this part: 0:33 How the slideshow works by showing and hiding images 1:30 The slideshow container and the markup for each slide 6:04 CSS to centre the slideshow 7:19 slideshow.js: hiding every slide 9:52 Linking the script, and why removing defer fixed it 11:26 Cycling through the slides every 4 seconds with setTimeout 13:21 Debugging the last slide 16:02 Tidying the code and moving the gallery into place 19:11 An .htaccess file so pages load without .php in the address Software: Adobe Dreamweaver, UwAmp, JavaScript, HTML, CSS, Apache.

Transcript

In the last video then we looked at setting up our template pages and adding in the
content for our index page. We also added in a little bit of content for our
facilities page but nothing massive.
What I said in the last video was we were going to come back and revisit the
interactive image gallery and look at how we can add some JavaScript to control
that. That's what we're going to be doing today.
So let's get into it.
Okay, so here I am back on my student desktop.
I'm going to go in and launch UwAmp.
So I've got access to my site and reopen Dreamweaver.
Now, the logic behind this, the way that this works, is that the pictures are always
there. If I open up Parkwood Vale and we look at the source
code for it, so view page source you will see that the images
are loaded in and they all already exist it's not that they are being
added in retrospectively or anything like that the trickery is that it's displaying
and hiding those images so here's my index page let's reconnect to my test
site a second and on my index page then what I'm going to do underneath the intro is
put in this section
and I'm just going to put in the end tab for my gallery as well.
So with that in place, I'm going to start putting in the divide sections and all the
different content that will be used to create my slideshow.
So I'm going to put in my first container.
And in fact, actually, I'm going to put straight into the div,
into this section here.
Div class, and it is going to be a class of
slideshow.
And I've got that there.
Let's just drop that in and tidy this up ever so slightly.
Now, when working within slideshow, I'm going to have a div
class which is called my slide
and that is going to be where my pictures are stored.
I have three pictures in my image folder the three different hero images set up
we've got the animal farm hero image we've got the Harry Potter hero image and in
there somewhere is the Lord of the Rings hero image they're the three that I'm going
to be working with and I got that set up in place here.
Now inside that, I'm gonna add in a picture tag
and there's the end of my picture tag and then I'm gonna add in my source set
and put in the link to the images.
So I want it to be images.
No, there's no S. I've got to keep remembering not to put the S in place.
I want the webp image. And the first one I want is the Harry Potter
hero.
Dot webp.
It's a type of image forward slash
webp.
Now, that in place would create one picture in that section, but I want to put an
image tag in as my fallback. The source, again, is going to be equal
to, and I can browse this time around because of source, and I can go into image,
png, and it's the Harry Potter hero image.
with that in place then I want to say that the width or the class to start with
actually is equal to MX auto just like I did on my other images and display is equal
to block
and that the width is set to 100% of its container and the alt
text for the accessibility features is going to say Harry
Potter hero image.
Now, with all of that in place there, if I save this and I put this up,
and that is just uploading all the files, make sure they're all in place, and I go
to my local host,
I will see the Harry Potter image.
Ignore the fact about the HTTPS element there.
It is on my local host,
I want to put the other hero images in place as well.
So I'm going to copy this text down, place it here,
and the same here and place it there and just change the different
elements.
Oh, wrong place. That's where I want that one.
And I want a lot of the rings.
and obviously I change what this says here.
And then
if I just want to put the one individual page up this time and I refresh it,
you'll see that all of those images exist.
the same functionality as we see when we go to Parkwood Vale we only get the one
hero image and after a certain amount of time it changes the next one that's
controlled through css and javascript so we're going to start off back in our
style css document so style css here and we're going to be putting in some
commands, some elements to help with our slideshow, our slider.
Now,
first thing I'm going to do is instead of using a tag wide rule, I'm going to
attach it to a class. I do that by using a full stop.
The class I'm looking to attach it to, I didn't mean to pop that out.
Let's just check that back in there, is the slideshow class there.
So I'm going to say slide-show and then I
can put in my curly braces. What that's going to do is anything with a slideshow
class now will have these properties applied to it.
What I'm going to do is say the position for it is relative
and the margin to start with is
auto just to make sure that it stays in the center of my screen.
Now that in place, save that. Let's put that up as well.
Refresh this. And there we go.
We're quite happy. Nothing has really changed on that regard.
We're then going to move on and we're going to have a look now at setting up our own
slideshow JavaScript.
So in my JavaScript folder, I'm going to add a new file.
I'm going to call it slideshow
and put that as a JS file.
If I open that up, it's going to be an empty JS file, and I'm going to start putting
my code in place for this.
So I'm going to start off by saying let to set my slide index
equals zero.
Now, every time my page loads, every time the script is called, it's going to set
slide index to zero. and then I'm going to use my show slides
function, which I haven't yet written.
I'm going to put in a function, unsurprisingly called show slides,
and then I'm going to add in the curly braces for it.
So that is referencing here and calling that to get started.
I'm going to say let i equals zero as my counter.
and I want to say let slides equals document which is our
current web page dot get element by class
name this one here and the class name I want is my slides
so that is saying get everything in my
index page here that has a class called my slides so if I added more hero images
I wouldn't update how many I've got, it automatically does it for me.
And then I very simply say for i equals
zero to ensure that it doesn't go any higher,
while i is less than slides.length
to make sure that it gets the full length of my slides,
i++ to loop through. and I want to say that, and I check this in
KU braces just to be sure,
we'll test in a second though, I don't think we need the KU braces but I'll double
check,
slides, so these here, at position I, so that would be 0, 1 and 2,
I want to say it's style tag, I want to display
and I want the display to be none.
Now if I save that put that and go into my footer
and I attach that so I've got my script here I'm gonna copy it paste
it
confuse myself a second there tap that in and let's say instead of bootstrap bundle
that says slideshow.js and put that as
well we should not have any pictures.
What part of that didn't work then?
Let's see.
Slideshow.js is there. Slideshow.js is here.
That's all in place. It could be back to that defer command.
So don't want that one. I want this remove defer and save that
and re-put that just to be sure now
let's see what happens if I refresh this okay it's not happy with that for some
reason let's have a not look at the source I don't want that I want to go into
inspect and see if I can get any errors at all nope
not getting any errors. I can see all of this element here.
Slideshow. Div class my slide.
And not being hidden.
So my slide.
Slideshow.js. My slides.
Pluralization will be the death of me, I swear.
Let's put that back up then and refresh this.
And there we go. Exactly like I expected to happen.
they've disappeared.
Now that's all well and good but we don't want it to disappear.
What we actually want to do is increase my slide index and go on and show the
next slide. So I'm going to say simply slide index which starts off at zero
add one to it plus itself add plus plus
but I'm going to say that if slide index is greater than the
slides.length
then I want my slide index and let's check this down on the next line here
slide index to equal zero because what
that's going to do is loop it back around so that it it goes back to the starting
point. So if it goes higher than my current number of slides, it goes back to the
start.
Underneath there, I'm going to say slides.
That's these here. And actually, it's this command I'm going to be redoing, but
let's put it in full. At position slide index.
So starting off on 0, 1, 2, and so on.
Style.
Again, there we go.
And instead of saying none this time, I'm going to say block.
So what it will do is it will show that one.
I'm then going to set a timeout,
which will allow me to specify what function I want to call, which is going to be my
show slides itself recursively,
and a time that I want it to wait in milliseconds.
So if I save that now and re-put that, what should happen is we
should see one of our images. And then after 4,000 milliseconds, it changes to my
next image. For another 4,000 milliseconds, it changes to my third image.
Oh, something's not right. Let's go back in.
So instead of saying zero, try that at one and save that.
And see what happens when I put that.
and refresh this.
Working just as expected, just as before.
That third one doesn't want to load.
So let's take our slide index here then, because don't forget slide index we added
to this section here.
It's like you take that out and do the add just before we recall itself.
And that should now be able to go back to zero.
Let's put that up and see what happens.
Harry Potter this time, starting at our zero position image, not our first image.
Our second image is showing properly.
Our third image is showing properly.
And here's the clincher. Does it go back to Harry Potter?
No, it's gone again to the wrong one.
So that's going slide index plus plus.
Let's drop this function underneath here so we can test if that's in the right
place. Push that up and refresh our page.
perfect as expected
onto jrl tolkien
and still not getting a harry potter the last one there let's have a look we're
getting an error in our element here undefined tag style okay so
let's write to our console what position we're at so
slide index let's have a look at what's going on slide index comes in at zero it
shows it that's fine then it adds one to slide index if it's greater than that so
slide index now should be
one it should go through two three
i think that's my issue is the fact that we have three in our
image but there's that element there i reckon if i left it if that error
didn't occur there
it would go through properly. So we need to do slide length here
minus one so we get that correct.
And let's put that up, refresh our page, and see if that's
fixed that issue there.
moment of truth harry potter hooray it's worked so let's
go through very quickly and add some comments in here comments in javascript are
just forward slashes so calls show slide function
in here then i'm going to leave let zero let's face it we can all understand what
that's doing
finds all the divs with
the class my slide.
And then this one is looping through, hiding
all the slides.
display slide at position slide index.
We should know what that's doing.
I didn't want to slide index. We say, if slide index
is greater than number
of slides,
loop back.
and then finally call itself
after
400 mil
a seconds now we've got that in place save that
the comments don't really add much to it but it does allow us to see what's going on
and javascript Let's put that in place.
Now, I did want to try something.
Let's see if it still works without the additional
brackets in place. Because effectively, that should just execute the next line.
And so should that one. Tied in our code up, reducing the amount of code that's
actually being processed and giving us, hopefully, the same effect.
So that has loopback.
And it's still working exactly the same way.
that extra bracket. Now, let's put that in place.
That's all set up. We have our image gallery there.
If I go back onto Parkwood Vale, it's
not identical as
there are a few styling differences with the fonts and different bits and pieces,
but we do have those elements in place.
And actually, on the original, I put the gallery first.
Now because of the way that I've set this up with my gallery in a gallery tag there,
I can just highlight my gallery tag, cut it from there,
paste it there,
save it, let's go index page and let's put that up to my website.
If I refresh this, it swaps it around.
So now we do have a very similar look to it and they're in the same positions.
The only difference being that on here I've edited the distance of our container.
Here it's a bit more centralized.
One thing I have done as well is on my facilities page if I click onto it it
no longer shows that I have access to or no longer needs requires I should say
that dot php element to it and the way I did that is using a
special document
files here if I show hidden items it's not in this one it's in the UwAmp version
called a .htaccess file. Now this is a file that's
recognized by Apache web server and allows us to put in some commands so
that Apache will do different things for us.
Let me just close these down here and I'll take you through what it is I've done.
So in this file here if I drop it into place here should open
.htaccess file. It starts off saying turn on the rewrite engine.
It then says to rewrite condition, my current request ends
with anything inside here.php.
And then add anything after it as well.
If that's true, then use the rewrite rule of percentage one.
Rewrite condition here, request the file name.
name dot php and load that file name there so what that will do by having this
in place it removes the trailing extension for the dot php section
like i said that's on my web server and that is a dot htaccess
file it's a hidden file if i was to delete that
and i was going to go back to parkwood vale my local host would still work in
exactly the same way. When I went to facilities now, it's going to tell me it's not
there because it can't see that .php file.
So here's my htaccess rules. I'm going to save this file as
.htaccess and it's in my documents here.
I'm going to click save.
I've got the .htaccess file can't be seen.
It is a hidden document that's going to Parkwood Vale here.
And if I go there, it's already back in place.
And now if I go facilities and refresh, that reappears.
So that .htaccess is a set of conditions that my Apache
web server understands from this section here.
And it can follow those conditions.
I've used those within Parkwood Vale's actual site as well, because when I go into
facilities, you will see it doesn't end with .php.
It is a .php file, but it's not there to be shown.
KnowledgeMind isn't there yet, but there is that.
So within this here, I'll put that back on the screen so you can see how it looks.
this .htaccess hidden file has a bit of control to allow us
to load our page and prettify our page.
That if I didn't have these in place, and I save that a second,
and I go back to localhost, I try to go to facilities, it doesn't
exist. If I tell it .php, it will load my facilities page.
But with that there and save it, my facilities.php will load and
remove the PHP for me so it looks more friendly to human beings.
Non-programmers don't really understand that there are different volumes, different
types of internet files. And if they see anything other than .html or even .html,
they'll probably panic. So by using this .htaccess, we can remove that and
not have to worry about upsetting anybody.
Now, let's just bring the slide show back up, leave that on the screen for a second,
and see how we get on with that.
While you're having a couple of seconds to look at that, I'm going to fix my mistake
and put the second element in milliseconds.
Hopefully this tutorial showing you how to create that interactive that
image slider will be a lot simpler than our tutorial last
week which I know is a very difficult one took over an hour well took over two hours
to create.
So that has allowed us to create our little JavaScript based image
slider element.
thank you for watching as usual any questions any issues do not hesitate to get in
contact that's what i'm here for thank you