IntroductionPreviewing the final project| 00:00 |
(SOUND).
| | 00:04 |
Hi, this is Chris Converse and this is a
course on creating a sortable gallery for
| | 00:06 |
you website.
Now, this design's going to feature a
| | 00:09 |
couple of interesting items.
First is the ability to sort all of your
| | 00:12 |
Thumbnails.
So, as we can see here, we're under the
| | 00:15 |
All Categories.
If I click on Sculpture, or Winter, we'll
| | 00:18 |
have all of the Thumbnails rearranged
based on keywords that we're going to put
| | 00:21 |
into the individual Thumbnails, and
you'll also noticed that they rearranged
| | 00:23 |
their layout as well.
The second thing we're going to be adding
| | 00:28 |
is responsive layout.
So if I come over here and re-size the
| | 00:32 |
browser, we're going to use a combination
of both CSS and JavaScript to rearrange
| | 00:36 |
all of the items through CSS.
And rearrange the layout or composition
| | 00:41 |
of the Thumbnails with JavaScript.
We're also going to be adding in a
| | 00:44 |
Lightbox so we can click on Thumbnails
and see a Lightbox overlay complete with
| | 00:47 |
a caption.
And we're also going to activate the
| | 00:50 |
inline gallery feature of Fancybox so
while we're in our gallery, we can go
| | 00:53 |
next or previous so that we can see all
of the photographs in a particular group.
| | 00:58 |
And this will also work on sorting.
So if I sort here on plants, then click
| | 01:02 |
on one of the plants, and either click
the arrows or use my arrow keys, I can
| | 01:05 |
arrow it through just the photography
that that relates to plants.
| | 01:10 |
Now the final example in this response of
experience, is going to be for small
| | 01:13 |
screen devices.
Now since the Lightbox experience doesn't
| | 01:16 |
translate well to small screen devices,
instead we're going to take out the
| | 01:19 |
Lightbox link and link right to the
individual photographs.
| | 01:23 |
So on a mobile device, when I tap on a
Thumbnail, we're going to open the hi-res
| | 01:26 |
Thumbnail in a new Window, and then we
can use all of the device's features,
| | 01:29 |
such as double tapping, or pinching, and
panning around, and then when we're done,
| | 01:32 |
we can go back to the main gallery to see
the next photograph we want to look at.
| | 01:39 |
So this user experience is going to be
modified through JavaScript.
| | 01:42 |
So I hope this course sounds interesting
to you, and if so, let's get started.
| | 01:45 |
| | Collapse this transcript |
| About the exercise files| 00:00 |
Now this course has two sets of exercise
files.
| | 00:02 |
For those who are not premium subscribers
to the lynda.com Online Training Library,
| | 00:06 |
there are a free set of exercise files
that contain this folder here called Web
| | 00:09 |
Files.
Inside of here, there's an index.html
| | 00:13 |
file.
Inside of the Includes folder, there are
| | 00:15 |
two CSS files and a Javascript file.
All of these files are mostly blank, but
| | 00:19 |
I did want to make sure that we were all
starting from a properly set-up set of
| | 00:23 |
HTML, CSS, and Javascript files.
And inside of the Includes directory,
| | 00:28 |
you'll also see a fancybox plugin.
This is the free version of fancybox.
| | 00:32 |
And we got written permission from the
author, Janice Garnellis, to provide
| | 00:35 |
these files along with this course.
So thank you very much, Janice.
| | 00:39 |
Now for those who are premium
subscribers, you will get these extra
| | 00:41 |
folders as well.
Inside of Art Templates are a series of
| | 00:45 |
source Photoshop files where we're
going to be creating our background, our
| | 00:48 |
check boxes, and multiple title graphics
for our responsive design.
| | 00:53 |
There's a Photos directory here with
sample photography that you can use for
| | 00:56 |
the course.
And inside of the Snippets directory,
| | 00:58 |
there are a series of HTML snippets
inside of here that link all of the
| | 01:01 |
thumbnail graphics.
And now that we're familiar with the
| | 01:04 |
exercise files, next we'll talk about the
software you're going to need for this
| | 01:07 |
course.
| | 01:08 |
| | Collapse this transcript |
| The software you'll need to complete this course| 00:00 |
In this course, I'm going to be coding
our project in a text editor.
| | 00:03 |
There are quite a few text editors
available for Macintosh and Windows, and
| | 00:06 |
I have a bunch here up on the screen.
You can also follow along with more
| | 00:10 |
graphical tools as long as you have
access to the HTML, CSS and JavaScript.
| | 00:14 |
Now, you can also follow along using
Adobe DreamWeaver.
| | 00:17 |
DreamWeaver does give you full access to
HTML, CSS and JavaScript code and also
| | 00:20 |
offers code completion for each of those
formats.
| | 00:23 |
Now if you're going to be following along
in Dreamweaver, in the next movie, I'll
| | 00:26 |
talk about how we can set up our
Dreamweaver workspace, and how
| | 00:29 |
Dreamweaver relates JavaScript, HTML, and
CSS.
| | 00:32 |
And for those of you who are going to be
following along in a text editor, you can
| | 00:35 |
skip that next movie and continue on from
there.
| | 00:38 |
| | Collapse this transcript |
| For those using Dreamweaver| 00:00 |
For those who are going to be building
this project in Dreamweaver.
| | 00:03 |
And you have CSS and JavaScript files
hooked into your HTML.
| | 00:06 |
There's a few places where Dreamweaver
will indicate to you that those files are
| | 00:09 |
linked in.
First is over on the right hand side.
| | 00:12 |
There's a CSS panel here.
This is part of the default layout.
| | 00:15 |
If you don't see this CSS panel, you can
come up to the Window menu, and come down
| | 00:18 |
and turn on CSS.
And in Dreamweaver CS4 or later, there's
| | 00:23 |
a area at the top of the document, on the
left, called Related Files.
| | 00:26 |
So here, I can see the Source Code link,
and I can see that I have a CSS file, a
| | 00:30 |
JavaScript file, which is jQuery, and a
my_file.js file hooked in here as well.
| | 00:36 |
So these buttons here indicate that these
are files that are hooked in to my HTML.
| | 00:40 |
So if I come over here, and click on CSS
for example.
| | 00:43 |
This will bring me into Dreamweaver a
split screen view showing me my design
| | 00:47 |
HTML on the right, and the associated
code in the CSS document on the left.
| | 00:53 |
If I come up here and click on my_file.js
I can see the hooked in JavaScript file
| | 00:57 |
and up here I can switch from Design
view.
| | 01:00 |
Split screen view, and just Code view.
And Code view will show me whatever
| | 01:04 |
document I have selected up here.
Whether it's my CSS, my JavaScript, or my
| | 01:09 |
source code of the HTML file.
Now another nice thing about Dreamweaver
| | 01:13 |
is that as we're coding, the code tool
that I'm going to be using is going to
| | 01:15 |
offer some code completion.
We have some of the same capabilities
| | 01:19 |
inside of Dreamweaver as well.
So, for example, if I come over here
| | 01:22 |
inside of the code window, hit Return and
start to type a Div tag, as I start
| | 01:25 |
typing, Dreamweaver will give me a drop
down menu.
| | 01:29 |
I can hit Return and select the Div tag,
add a space, assign a class.
| | 01:34 |
I'll start typing Cl, I'll get my drop
down menu, and Dreamweaver will sort of
| | 01:37 |
help me along while I'm typing in my
HTML.
| | 01:41 |
It'll do the same thing for JavaScript
and CSS as well.
| | 01:43 |
So let's come over here to CSS.
Let's come down here and create a new CSS
| | 01:47 |
rule.
So I'll type body.
| | 01:49 |
I'll come in here and let's say we
want to add color.
| | 01:52 |
I start typing the word color.
This will show up, I can hit Return and
| | 01:55 |
in some cases I get a very graphical
representation in my code completion,
| | 01:58 |
where I can come in here, for example,
and specify a color.
| | 02:02 |
So I can assign new rules inside of the
CSS file's code area, or inside of my CSS
| | 02:06 |
panel, I can come over here and choose
Create New CSS Rule.
| | 02:11 |
So regardless of your preference for how
you work inside of Dreamweaver,
| | 02:13 |
everything that we're going to be doing
inside of this course can be replicated,
| | 02:16 |
either through the code window or through
Dreamweaver's interface.
| | 02:19 |
Whatever you're more comfortable with.
And with that we're ready to continue on
| | 02:22 |
with our project.
| | 02:23 |
| | Collapse this transcript |
| Starting your project| 00:00 |
Now to begin our project, let's create a
folder on the desktop.
| | 00:06 |
We'll call this my gallery.
I'll open this up, resize this a little.
| | 00:15 |
Now with that open let's open up the
exercise files.
| | 00:18 |
Let's come over the web files.
Now, all members have access to these
| | 00:22 |
particular files.
Let's come over here and grab the
| | 00:25 |
includes directory, and the index that
HTML.
| | 00:28 |
Let's drag a copy of these into the my
gallery folder we just created on the
| | 00:31 |
desktop.
Now, inside of the my gallery folder,
| | 00:34 |
let's make a new folder.
Let's call this Photos, and then make
| | 00:39 |
another called Images.
Let's come back to the exercise files and
| | 00:45 |
if your a premium subscriber you'll have
a photos directory here.
| | 00:49 |
Let's open up photos, select the first
one, hold Shift, select the last one.
| | 00:54 |
This will select all of these.
Let's copy all of these over to our
| | 00:57 |
photo's directory.
Go back to the exercise files, let's
| | 01:01 |
close that up, and then inside of art
templates, we're going to be creating
| | 01:04 |
additional graphics that we're going to
be putting into the images directly that
| | 01:08 |
we created here.
Now if you're not a premium subscriber,
| | 01:12 |
you can use your own photographs and your
own artwork for the backgrounds, and
| | 01:15 |
we're going to be covering creating all
of the web graphics in the next chapter.
| | 01:20 |
| | Collapse this transcript |
|
|
1. Creating the GraphicsSlicing and exporting web graphics| 00:00 |
Now the first graphic we're going to
create is going to be for the background,
| | 00:02 |
so let's come over to the exercise files
inside of art templates, open up
| | 00:04 |
background.psd.
I'll zoom in here to 100%.
| | 00:11 |
And since this is a very large background
graphic, what we're going to be doing is
| | 00:14 |
fixing this to the lower right-hand
corner of the screen.
| | 00:18 |
And when we scroll our thumbnails as we
looked at in the introduction video,
| | 00:21 |
we're going to fix this graphic so that
the thumbnails will scroll over the top
| | 00:24 |
of this graphic.
So with this open let's come up to the
| | 00:28 |
file menu.
Let's choose Save for web.
| | 00:31 |
And this will be in the background and
it's a little blurry so we don't have to
| | 00:34 |
save it with the highest quality setting.
So let's come up here and select about
| | 00:38 |
sixty percent.
In the lower left hand corner, we can see
| | 00:41 |
the corresponding file size.
This will be about 30kb.
| | 00:45 |
Let's choose Save.
From the desktop let's go into My
| | 00:49 |
Gallery.
Choose Images, then hit save.
| | 00:54 |
We can see that show up in the
background.
| | 00:57 |
Let's close that file.
Let's open up checkboxes.psd.
| | 01:00 |
And these are going to be custom check
boxes that we're going to create instead
| | 01:03 |
of using form elements.
So I'm going to zoom up here.
| | 01:07 |
So what we're going to do here is use the
slicing tool to slice these as individual
| | 01:10 |
graphics.
So under the cropping tool, Click and
| | 01:13 |
Hold.
And you'll come down and select the slice
| | 01:16 |
tool here.
With the slice tool selected, let's click
| | 01:18 |
and drag around the first check box.
Once we've drawn the Slice, let's Double
| | 01:23 |
Click, let's name this check normal.
Should be 12 pixels by 12 pixels.
| | 01:29 |
Click OK.
Draw a Slice around the second checkbox.
| | 01:34 |
Double Click.
We'll name this check underscore
| | 01:39 |
selected.
Then Click OK.
| | 01:41 |
Now, with our slices created.
Let's choose File Save.
| | 01:45 |
Slices are saved with your Photoshop
file.
| | 01:49 |
Then let's choose a File Save for web.
Command space bar.
| | 01:55 |
Zoom up here.
Let's select the first slice.
| | 01:59 |
Hold the shift key, select a second
slice.
| | 02:00 |
With both selected, let's come up and
make sure we're in the GIF file format.
| | 02:05 |
Let's turn on transparency.
Let's come down and chose save.
| | 02:09 |
Go into my gallery, images.
Down under slices, chose all user slices,
| | 02:14 |
which means any slice that we've drawn
will be saved, all the rest will be
| | 02:17 |
ignored.
Then hit Save.
| | 02:22 |
Then hit Command or Control+W to close
the file.
| | 02:24 |
So now back in the operating system we
have our background jpeg and our check
| | 02:28 |
normal and check selected gifs.
And now with those created, next we'll
| | 02:32 |
work on creating the multiple sizes of
our title graphic.
| | 02:35 |
| | Collapse this transcript |
| Creating multiple images for a responsive design| 00:00 |
Now to create our title graphics, let's
open up title.psd.
| | 00:02 |
We'll open the canvas up here a little
bit.
| | 00:08 |
So inside here, we want to create three
different title graphics that we can use
| | 00:11 |
in our responsive design.
So again, let's come up to the slicing
| | 00:14 |
tool.
Let's click and drag to first slice.
| | 00:19 |
Around photo gallery.
The large one on the left.
| | 00:22 |
We'll name this title _large.
We'll make the width 65, then click Okay.
| | 00:33 |
Let's click and drag this second one.
Double click.
| | 00:38 |
This will be title_.
Medium.
| | 00:43 |
Let's make this 48 wide, click okay.
Then one more around the smallest one,
| | 00:49 |
double click, name this title Small,
we'll make this 30, then click okay.
| | 00:59 |
Next, let's come over here to the layer 0
in the layers panel.
| | 01:03 |
Let's turn that off.
Let's choose File > Save for Web.
| | 01:09 |
Select the first slice, hold the Shift
key.
| | 01:12 |
Select the second, and then the third.
Up here let's choose Ping24.
| | 01:17 |
We want these to be semi-transparent,
then click Save.
| | 01:22 |
Make sure all user slices are still
selected and the slices drop down.
| | 01:26 |
Choose My Gallery > Images > Save.
Once that's done, let's close our file.
| | 01:33 |
Let's save it, so that these this slices
are saved with that file as well.
| | 01:36 |
Now back in the operating system, we have
all of the graphics that we need for the
| | 01:38 |
interface.
Our background graphic, our two check
| | 01:41 |
boxes, and three different versions of
our title graphics, so that we can again
| | 01:44 |
change these based on the media queries
we are going to be adding later.
| | 01:48 |
Now with our graphics created for the
interface, next I'll show you how you can
| | 01:51 |
set up the cropping tool to quickly make
thumbnail graphics from your photographs.
| | 01:55 |
| | Collapse this transcript |
| Creating custom thumbnails| 00:00 |
Now, in preparing the large images for
this gallery, you don't have to be
| | 00:02 |
concerned with the height or the width of
the user's screen.
| | 00:05 |
The Fancy Box plugin will automatically
scale to the height or width that's
| | 00:08 |
available by the user's screen.
But for the thumbnails, however, I
| | 00:12 |
want to show you how you can set up the
cropping tools so that making thumbnails
| | 00:15 |
can be pretty quick.
So first let's come over here to our
| | 00:18 |
Toolbar.
Let's come over and select our Crop tool.
| | 00:21 |
So what we're going to do here is, up in
the drop down menu, let's come down and
| | 00:25 |
Choose Width times Height times
Resolution.
| | 00:29 |
What we're going to do here is decide the
size of the thumbnails that we want to
| | 00:32 |
use.
Now, the size is going to depend on
| | 00:34 |
whether you want to support retina
displays from Apple or other devices that
| | 00:37 |
have high-resolution displays.
And what the actual size of the layout's
| | 00:42 |
going to be.
Now you can determine the size of the
| | 00:45 |
thumbnails in the CSS, but we also need
to make sure we have enough resolution to
| | 00:48 |
match whatever you want to do in your
layout.
| | 00:51 |
And in addition, for devices that have
high pixel densities, you want to make
| | 00:54 |
sure that the graphics are a little bit
larger, so that we can accommodate things
| | 00:57 |
like retina displays.
So if your final thumbnail size is going
| | 01:02 |
to be 75 for example, you can set the
thumbnail size to 150 pixels.
| | 01:06 |
So for this course I'm going to use 75 by
75.
| | 01:09 |
So the first setting here I'm going to
type in 75, going to hit Tab, going to
| | 01:12 |
set 75 for the height, going to hit Tab
again.
| | 01:16 |
This is going to be the resolution,
going to set this to 72.
| | 01:19 |
And now what we're doing here is this
cropping tool is now being set to that
| | 01:23 |
option.
So now when I come in here and scale
| | 01:26 |
without holding the Shift key, as I move
this around I'm going to get a perfect
| | 01:29 |
square.
When I hit Return it's going to resize
| | 01:33 |
the available space down to 75 by 75 and
set it to 72 pixels per inch.
| | 01:40 |
What I can also do is come in here and
come down and choose New Crop Preset.
| | 01:44 |
So let's come down here and let's name
this Lynda.com Thumbnail, then click OK.
| | 01:53 |
So now we can always go back to any image
and select this preset in my Cropping
| | 01:57 |
tool.
So let's move this around.
| | 02:01 |
You can scale this up and down and find
the exact thumbnail that I think makes
| | 02:04 |
this image look interesting.
And then once I'm done I can hit the
| | 02:08 |
Return key.
This will again automatically size this
| | 02:12 |
down to 75 by 75.
So if I were to bring up my image size I
| | 02:15 |
could see all of the settings are now
being captured here.
| | 02:20 |
I'll Cancel out of here.
Once I have this the way I want it, let's
| | 02:22 |
come up to the File menu.
We'll choose Safe for Web, and then you
| | 02:25 |
can save this thumbnail into the same
directory as you're saving your large
| | 02:28 |
image.
So once you have all of your photography
| | 02:31 |
prepared for this course, next we'll work
on hooking our JavaScript and CSS files
| | 02:34 |
into the HTML file.
| | 02:36 |
| | Collapse this transcript |
|
|
2. Hooking Up the CSS and JavaScriptSetting the viewport scale settings| 00:00 |
So now that we have all of our graphics
created and we have our Project folder
| | 00:02 |
started, next we're going to come over to
the myGallery folder.
| | 00:06 |
Let's open up index.html up in the text
editor.
| | 00:09 |
Now, inside of our HTML file, here, we're
working inside of HTML5, and we can tell
| | 00:13 |
here by just a simple document
declaration type here.
| | 00:17 |
Now the first thing we want to do is set
up a meta tag for our view ports so that
| | 00:20 |
our responsive design techniques will
work.
| | 00:24 |
So after the title tag, let's hit a
return.
| | 00:26 |
Let's type in meta, then a space, ID
equals two quotes, view port.
| | 00:37 |
Space.
Next attribute.
| | 00:40 |
Name.
We'll also type in view port, then a
| | 00:46 |
space.
Next we're going to type content equals.
| | 00:50 |
Two quotes.
And inside here we're going to set the
| | 00:52 |
scale settings.
So let's do width equals, device dash
| | 00:57 |
Width, then a comma, space, Maximum dash
Scale, equals 1 dot L, comma, space, then
| | 01:06 |
we'll type Minimum dash Scale equals 1
dot O...
| | 01:14 |
Then a space, initial dash, scale equals
one dot o.
| | 01:21 |
Outside of the quotes, forward slash, and
then end the tag.
| | 01:27 |
So basically this metatag is telling the
width to be the width of the actual
| | 01:30 |
device.
We're setting a minimum and maximum scale
| | 01:33 |
of 1, which means when we set up media
queries.
| | 01:36 |
The media queries will know that the view
port is not being scaled and then it will
| | 01:39 |
actually check the width of the actual
screen and give us the ability to change
| | 01:42 |
our design based on the size of the
user's screen.
| | 01:46 |
Now that we've set our view port to
behave the way we want, next we'll hook
| | 01:49 |
in our CSS files.
| | 01:51 |
| | Collapse this transcript |
| Linking the CSS files| 00:00 |
So now, we're going to hook in our two
CSS files.
| | 00:02 |
First, we're going to hook in the fancy
box CSS.
| | 00:05 |
This way, we can override some of those
styles in our own style sheet.
| | 00:09 |
So, after the meta tag, let's type link
relationship stylesheet, type equals
| | 00:14 |
text/css, then an href.
We're going to point to the fancy box CSS
| | 00:19 |
file.
That's inside of includes/jquery.fancy
| | 00:27 |
box-1.3.4/fancybox/jquery.fancybox-1.3.4.CSS.
Then, a forward slash and close the link
| | 00:38 |
tag.
Next, we'll hook in our own CSS file.
| | 00:43 |
Start with another link tag, relationship
equals stylesheet, type equals text /css,
| | 00:50 |
and href equals
includes/sortable_gallery.css.
| | 00:56 |
Then, a forward slash and close the link
tag.
| | 00:58 |
And now, with our style sheets hooked in,
next we'll hook in our JavaScript files.
| | 01:03 |
| | Collapse this transcript |
| Linking the JavaScript files| 00:00 |
Now we'll hook in our JavaScript files.
First we'll bring in J-query.
| | 00:03 |
Since the Fancy Box plug-in hooks onto
J-query.
| | 00:06 |
And the custom Javascript we're going to
write is also going to be based on
| | 00:09 |
J-query.
So after the CSS file, let's hit a
| | 00:12 |
Return.
Let's start with a Script Tag.
| | 00:16 |
Type equals text/Javascript, source
equals, includes /jquery-1.7.1.min.js and
| | 00:26 |
the script tag.
Now that we have j query hooked in, we
| | 00:32 |
can add in fancy box.
Next line, script tag.
| | 00:36 |
Type equals text/javascript, source
equals.
| | 00:41 |
Now the source path is going to be
exactly the same as the CSS file.
| | 00:44 |
So lets clamp here and copy the path to
the CSS file for fancy box.
| | 00:49 |
Lets come down here and paste this inside
of the source, lets change the file name
| | 00:53 |
from dot CSS to dot JS, and we need to
bring in our custom java script file.
| | 01:00 |
So next line, script tag.
Type equals text slash Java script.
| | 01:05 |
Source equals, includes slash
sortablegallery.js.
| | 01:09 |
Then end the script tag.
So now with our java scripts in place, in
| | 01:13 |
the next movie we'll add in a link into a
Google shiv, which is also a Java script,
| | 01:18 |
which will enable IE 7 and 8 to
understand HTML5.
| | 01:22 |
| | Collapse this transcript |
| Enabling earlier versions of Internet Explorer| 00:00 |
Now, we did show this gallery working in
earlier versions of Internet Explorer
| | 00:04 |
than Version 9, and in order to make that
happen we need to use a Google shiv to
| | 00:08 |
activate IE 7 and 8 for HTML 5.
So after the script tag let's hit a
| | 00:13 |
return and let's start by typing in an IE
conditional statement.
| | 00:17 |
So, less than sign, exclamation point,
two hyphens.
| | 00:23 |
Beginning and ending square bracket.
Inside of the brackets we're going to
| | 00:28 |
type if l t, capital I, capital E, space
9.
| | 00:33 |
Outside of the square bracket, put a
greater than sign.
| | 00:36 |
That begins an html comment with an IE
conditional statement.
| | 00:41 |
Next line, we'll end the conditional
statement, so less than sign, exclamation
| | 00:46 |
point, beginning and ending square
bracket, type endif, after the brackets,
| | 00:50 |
two hyphens, then a greater than sign.
So now inside of this conditional
| | 00:57 |
statement, only browsers that are
Internet Explorer and less than Version 9
| | 01:02 |
are going to pay attention to these
lines.
| | 01:06 |
Every other browser will ignore them.
So the first thing we want to do is let's
| | 01:09 |
bring in a script.
So we'll type script space source equals,
| | 01:16 |
two quotes.
Inside of the quotes
| | 01:23 |
http://html5shiv.googlecode.com/svn/trunk/html5.js.
That's out of the quotes, end the tag,
| | 01:40 |
and then the ending script tag.
Let's hit a return, and on the next line,
| | 01:44 |
let's bring in a custom Internet Explorer
CSS file that we're going to write, just
| | 01:52 |
to make some minor adjustments for older
browsers.
| | 02:00 |
So let's come up here and let's copy the
link that we wrote to our sortable
| | 02:05 |
gallery .CSS.
Copy that to the clipboard.
| | 02:08 |
Inside of the conditional statement,
let's paste that line.
| | 02:12 |
Let's come in here and let's change
sortable gallery to
| | 02:15 |
sortable_gallery_IE.CSS.
And then save your work.
| | 02:21 |
So what's going to happen here, is
Internet Explorer, earlier than IE9, is
| | 02:24 |
going to bring in this Google shiv which
will activate HTML 5 for those browsers.
| | 02:29 |
And we're also going to bring in our
custom style sheet.
| | 02:32 |
Now again, we're not going to get the
exact same user experience in older
| | 02:34 |
versions of IE, but this will ensure that
the layout will actually come up.
| | 02:38 |
And people will be able to see and
interact with our gallery.
| | 02:42 |
And now with all of the Javascript and
CSS files hooked in, next we can start
| | 02:45 |
working on the HTML.
| | 02:47 |
| | Collapse this transcript |
|
|
3. Creating HTML for the Web LayoutCreating the HTML containers| 00:00 |
Now, in our HTML file, the first thing
we're going to do is create all of our
| | 00:03 |
HTML containers.
So let's come down here inside of the
| | 00:06 |
body tag.
Let's delete that comment that says,
| | 00:08 |
content goes here.
Let's start with a div tag space.
| | 00:13 |
Let's set a class equal to title.
Let's end the div.
| | 00:19 |
Next line, another div.
We're going to set class equal to
| | 00:21 |
gallery, and the tag and the div.
Next, let's come inside of the div
| | 00:26 |
gallery, let's split that open.
Let's create another div inside of there,
| | 00:35 |
this one with a class of sorting, and the
tag.
| | 00:41 |
Next line, another div.
Class is photos.
| | 00:43 |
And, and that tag as well.
Now, after the gallery div, let's come
| | 00:58 |
down here and let's add two debugging
divs.
| | 01:00 |
We're going to use these to reflect some
of the things we're doing inside of our
| | 01:03 |
JavaScript.
Just so we can make sure that the things
| | 01:05 |
we're coding are working properly.
And then, at the end of course, we'll get
| | 01:09 |
rid of these.
So let's start with a div class.
| | 01:13 |
We'll call this debug-size, then a space.
And let's just put an inline style on
| | 01:22 |
this.
Style equals, two quotes.
| | 01:27 |
We'll type position colon absolute
semicolon, then a space, bottom colon 0
| | 01:35 |
pixels semicolon, left colon 5 pixels
semicolon, then end that tag.
| | 01:45 |
Let's type debug-size, and then end the
div.
| | 01:56 |
Let's come up here and select this entire
line.
| | 01:59 |
Let's copy it and paste it on the next
line.
| | 02:02 |
Let's come in here for the class and
let's change debug-size to
| | 02:09 |
debug-remainder.
Position bottom, let's change this to 25.
| | 02:15 |
And let's change the default text inside
to say, debug space remainder, and hit
| | 02:22 |
Save.
So to test this so far, let's come back
| | 02:26 |
out to the operating system.
Let's open up index at HTML and a
| | 02:32 |
browser.
So now, we won't see anything up here.
| | 02:36 |
All of the containers are invisible, but
we do see the two debugging divs down
| | 02:39 |
here at the bottom.
They're absolute position to the bottom,
| | 02:43 |
with 5 pixels on the left-hand side.
So even as I change the browser size,
| | 02:47 |
those divs will move around based on the
bottom and left properties.
| | 02:51 |
So now, with our main HTML containers
created, next, we'll create the sorting
| | 02:54 |
links.
| | 02:55 |
| | Collapse this transcript |
| Creating the sorting links| 00:00 |
Now we're going to create the links that
go inside of the sorting box.
| | 00:03 |
So, let's come down here.
Let's get inside of the div, with a class
| | 00:07 |
of sorting.
Let's hit a Return.
| | 00:09 |
Inside here, let's add one more div.
We're not going to add a class or
| | 00:13 |
anything, this'll just be a generic div.
Inside of here, let's start with a span
| | 00:17 |
tag.
We'll type in filter photos by, and the
| | 00:22 |
span tag.
Let's add a return.
| | 00:25 |
Let's add our first anchor link.
Beginning tag, anchor.
| | 00:30 |
We're going to add a class of sort link.
Then a space.
| | 00:33 |
We're going to add a second class under
the first one.
| | 00:34 |
Type in selected.
Outside of the attribute, let's hit a
| | 00:40 |
space.
Let's add an html5 data attribute.
| | 00:48 |
Data dash keyword equals, two quotes.
Let's set a value of all, then a space.
| | 00:57 |
Let's type href#.
Let's end the tag.
| | 01:04 |
Then type all categories as the link
label, and then end the anchor tag.
| | 01:11 |
So this will be the link that will
activate all of the thumbnails in our
| | 01:13 |
gallery.
Let's come up here and select the entire
| | 01:17 |
link.
Let's come down here and paste this 4
| | 01:21 |
more times.
Let me scroll up.
| | 01:24 |
For the second one, let's select all
categories.
| | 01:27 |
And let's put in the name of our first
category.
| | 01:31 |
I'll call this one plants.
Let me arrow back inside of data keyword.
| | 01:37 |
We're going to type in the word, plants.
I'll use lower case here.
| | 01:42 |
Third one, this will be sculpture, let's
change the label to sculpture as well.
| | 01:52 |
Third one's going to be architecture,
copy that.
| | 01:59 |
Inside of data keyword let's add
architecture in here.
| | 02:01 |
And for the fourth one, this one's
going to be winter.
| | 02:07 |
We'll change the label to winter as well.
So all of these anchor links here inside
| | 02:13 |
of the sorting div are the ones that
we're going to command, pick out the data
| | 02:17 |
keyword using j query in JavaScript, and
then sort all of our thumbnails based on
| | 02:20 |
these categories.
So once you complete the course you can
| | 02:24 |
go back and change these to any
categories you want to assign to your
| | 02:27 |
individual gallery.
Now in larger screens we're going to
| | 02:30 |
float these links, so that means we're
going to have to clear all of these items
| | 02:33 |
when they're floating in larger screens.
So after that last link what's going to
| | 02:39 |
return, let's add in one more div, let's
set a class of clear underscore both.
| | 02:47 |
Let's end the tag, and then end the div.
So later on in the course we're going to
| | 02:50 |
create a CSS rule that's going to clear
the float here, to make sure that the
| | 02:53 |
height of the sorting gallery accomodates
all of these items if they're floating.
| | 02:59 |
And now with our sorting links created
next we'll work on the thumbnails links.
| | 03:03 |
| | Collapse this transcript |
| Creating a thumbnail link| 00:00 |
Now, to create the links for our
thumbnails.
| | 00:02 |
Let's come down into the div with a class
of photos.
| | 00:06 |
Let's split that open, add a few returns.
Inside here, let's add another div, with
| | 00:13 |
a class of thumbnail_container.
Let's end the tag, end the div.
| | 00:22 |
Let's split that open.
And inside of here, let's add our first
| | 00:25 |
anchor tag.
Begin the tag.
| | 00:28 |
Type a, space.
Let's add a class of thumbnail.
| | 00:34 |
Next, let's add a title attribute.
Inside here, we're going to put the
| | 00:40 |
caption.
This is a caption for the berry tree,
| | 00:47 |
full size .JPEG.
Let's hit a space.
| | 00:56 |
Next we'll add an href.
We'll link this to photos, forward slash.
| | 01:03 |
berrytree_fulsize.jpg.
Then we'll add one more attribute.
| | 01:15 |
This'll be an HTML5 data attribute.
This'll be data-keywords.
| | 01:25 |
Two quotes, and inside of here we're
going to put all the keywords that relate
| | 01:28 |
to this picture.
In this case, just the word plants.
| | 01:33 |
Let's end the anchor tag.
Inside of the anchor tag we're going to
| | 01:38 |
put the image tag that actually links.
So we'll start with image.
| | 01:44 |
Source equals.
Let's come over here and copy the file
| | 01:48 |
name inside of the href, let's paste this
inside of the source, let's replace full
| | 01:55 |
size with thumbnail, forward slash and
the img tag, and then end the Anchor Tag.
| | 02:07 |
So what we have so far is the image here,
wrapped inside of an Anchor Link that;s
| | 02:12 |
linking it to the full sized JPEG.
So to test this let's come out to the OS.
| | 02:18 |
Let's open up Index.html up in a browser.
We can see the Thumbnail here.
| | 02:22 |
When I roll over it it gives me a link.
I can see the title text showing up...
| | 02:27 |
When I click on this, it will actually
link me over the the Jpeg file.
| | 02:31 |
Now we have the photo thumb nail in
place, and it properly links to it's
| | 02:33 |
larger resolution version.
Next we'll add more thumb nail links into
| | 02:37 |
the thumbnail container.
| | 02:39 |
| | Collapse this transcript |
| Adding more thumbnail links| 00:00 |
Now that we have our first thumbnail link
working, let's come in here and copy this
| | 00:04 |
entire link.
Let's copy that to the clipboard.
| | 00:08 |
Let's hit a few returns, let's paste
another copy.
| | 00:11 |
Let's come up here and change the
caption, change berrytree to sculpture.
| | 00:16 |
Let's come over here and copy that name.
So let's set the href.
| | 00:24 |
Let's link this to the sculpture_
fullsize.jpg.
| | 00:28 |
For keywords, let's replace plans with
sculpture, then a space.
| | 00:33 |
Let's add in a second keyword here,
winter.
| | 00:36 |
This way, when we come up to our sorting
links, and we click on either sculpture
| | 00:39 |
or winter, this thumbnail's going to be
present in either one of those sorting
| | 00:42 |
options.
Let's come over to the image.
| | 00:47 |
Let's set the image to sculpture_
thumbnail.jpg.
| | 00:51 |
So now with this in place, let's hit
Save.
| | 00:54 |
Back out to the operating system, reload
this in a browser.
| | 00:57 |
Now we have two links here.
Clicking on the sculpture link brings us
| | 01:01 |
into the sculpture full size.
Now hit the Back button.
| | 01:04 |
Now, at this point, let's come over to
the Exercise files.
| | 01:08 |
Let's go into the Snippets folder.
Let's open up thumbnail links.html up in
| | 01:12 |
our Code Editor.
So here, I have a whole bunch of links
| | 01:15 |
already set up to the photographs that we
added in earlier.
| | 01:18 |
So in your text editor, you want to
choose or select all the text, Copy that
| | 01:22 |
to the clipboard, close the file.
After the second thumbnail link we
| | 01:28 |
created, let's hit a few returns, and
let's simply paste in all of those
| | 01:31 |
thumbnail links.
I'm going to come in here and format
| | 01:34 |
these a little bit, get rid of some of
the extra spaces.
| | 01:37 |
So in here, we can see that all of these
have data keywords, and we have different
| | 01:41 |
settings, sculpture, architecture.
In some cases they might be part of one
| | 01:45 |
or two different categories.
And after all of the links, we have our
| | 01:49 |
ending div for the thumbnail container.
Let's hit Save.
| | 01:53 |
Let's come back out to the operating
system.
| | 01:55 |
Let's open this up in a browser.
And now we'll see, we have all of our
| | 01:57 |
thumbnails in place, all of them
hyperlinked, and each one of them will
| | 02:00 |
link to the corresponding high resolution
file.
| | 02:03 |
So now with all of our thumbnail links
created, next we'll add in the background
| | 02:06 |
image.
| | 02:07 |
| | Collapse this transcript |
| Adding the background image| 00:00 |
Now that we have our links and thumbnails
in place, the last item we're going add
| | 00:03 |
is going to be the background image.
So in the HTML file, let's scroll up to
| | 00:07 |
the top.
Before the div with a class of title,
| | 00:10 |
let's hit a few returns.
Let's start with an image tag.
| | 00:14 |
We're going to set source equal to
images.
| | 00:19 |
/background.jpg.
Hit a space.
| | 00:21 |
We're going to set a class of background.
Then forward slash and end the image tag.
| | 00:25 |
So with that in place, let's hit Save.
Let's come back to the operating system.
| | 00:34 |
Let's open this up in a browser.
So now we'll see the background graphics,
| | 00:43 |
showing up at the top of the page.
We can Scroll down, and then we'll see
| | 00:46 |
our Sorting links and then all of our
Thumbnail links.
| | 00:49 |
So at this point we have all of the HTML
in place for our layout.
| | 00:52 |
Next we'll apply some CSS rules to
position and layer all of these Elements.
| | 00:56 |
| | Collapse this transcript |
|
|
4. Styling the Design with CSSStyling the text and the background image| 00:00 |
Now, with all of our HTML in place, now
we're ready to work on our CSS file.
| | 00:04 |
So, let's come back to our project files.
Let's open up Includes, and let's open up
| | 00:07 |
sortable gallery.css up in our text
editor.
| | 00:10 |
So here, I have just the blank CSS file.
So, what we're going to do here is start
| | 00:15 |
with the body tag, so let's create a rule
for body, beginning and ending bracket.
| | 00:21 |
First, let's set a margin of 0 pixels.
Next line, let's add padding.
| | 00:29 |
We'll use Shorthand style here.
And let's add 20 pixels on the top, then
| | 00:32 |
a space.
10 pixels on the right, 20 pixels on the
| | 00:36 |
bottom, 30 pixels on the left.
Let's hit Return.
| | 00:42 |
Next, we'll set the font.
We use Shorthand style here as well.
| | 00:45 |
So, first property is going to be the
size, 14 pixels.
| | 00:50 |
Then, the family, we'll set to Arial.
Let's hit a Return.
| | 00:55 |
Next, we'll set the color.
That'll be a #bd8a1e semicolon.
| | 01:03 |
Next line, we'll set the background color
to black.
| | 01:08 |
So, pound and 3 zeroes.
Next rule is going to be for the
| | 01:13 |
paragraphs.
So, p space, beginning and ending
| | 01:16 |
bracket, we'll set a margin on these,
Shorthand style.
| | 01:21 |
Top, 0 pixels.
Right, 0 pixels.
| | 01:25 |
Bottom will be 1 em.
And then, 0 pixels on the left.
| | 01:31 |
Next, anchor links, then a comma, space a
colon visited.
| | 01:38 |
We're going to set these to color of #00f
semicolon.
| | 01:47 |
And then lastly, image.background.
We're going to target that background
| | 01:56 |
graphic we put at the top of the HTML.
We're going to set position to fixed.
| | 02:02 |
This will keep the background fixed as we
scroll through the thumbnails, so if you
| | 02:05 |
have enough thumbnails to warrant
vertical scrolling, this will keep that
| | 02:08 |
background static while the thumbnails
scroll.
| | 02:11 |
After fixed, add a semicolon.
We're going to set the right property to
| | 02:16 |
0 pixels, and the bottom property to 0
pixels as well.
| | 02:20 |
Now, with those rules in place, let's hit
Save.
| | 02:23 |
Let's come back out to the operating
system.
| | 02:25 |
Let's open this up in a browser.
So now in the browser, we can see the
| | 02:28 |
background graphic.
We can also see our debugging divs here
| | 02:31 |
which are also absolute positioned.
And if we open the browser up enough,
| | 02:35 |
you'll notice that the thumbnails are now
behind this graphic.
| | 02:39 |
So now that we have the background
positioned properly, next we'll work on
| | 02:42 |
the title graphics.
| | 02:43 |
| | Collapse this transcript |
| Adding the title with CSS| 00:00 |
Now we'll create some CSS rules for the
title graphic.
| | 00:03 |
So after the image background, let's hit
a few returns, dot title.
| | 00:08 |
This will target that div that has a
class of title.
| | 00:12 |
First property's going to be position.
We're going to set this to fixed.
| | 00:16 |
Let's hit a return.
Let's set a top property of zero pixels.
| | 00:22 |
Set a left property, 0 pixels, will set a
width, 70 pixels, set a height of 100
| | 00:34 |
percent.
Then we'll set a background.
| | 00:40 |
The short hand style here, first property
is the background color, which we're
| | 00:43 |
going to leave blank.
Second property's going to be URL,
| | 00:46 |
beginning and ending parentheses.
Inside the parentheses, we are inside of
| | 00:49 |
the includes directory.
So ../ will bring us out to the root,
| | 00:53 |
then into the images directory.
/title_ Large.PNG.
| | 01:00 |
Outside of the parentheses, we're
going to set No Repeat, zero pixels on
| | 01:04 |
the x, and 5 pixels on the y position.
Now, with that in place, let's hit Save.
| | 01:10 |
Come back out to the operating system.
Let's open this up in a browser.
| | 01:15 |
Hit Reload, and now we can see the photo
gallery title showing up on the left hand
| | 01:19 |
side here.
Now that we have our background and title
| | 01:22 |
positioned, next we'll apply some
positioning properties to the gallery so
| | 01:25 |
that that shows up in front of that
background graphic.
| | 01:28 |
| | Collapse this transcript |
| Adding positioning to the gallery| 00:00 |
Now to apply some properties to the
gallery.
| | 00:02 |
After the title, type .gallery {}.
First we'll set a property of a width, to
| | 00:12 |
80%.
Next we'll set a margin: 0px space.
| | 00:20 |
Auto, this will center that div on the
page.
| | 00:24 |
Then lastly will set a position of
relative.
| | 00:27 |
What this will do, is make sure that the
gallery div will not absolute position
| | 00:31 |
based on its parent, which will be the
body tag.
| | 00:34 |
But any items inside, which is going to
contain all of our thumbnails, will be
| | 00:36 |
positioned relative to this object.
So now, with these in place, let's hit
| | 00:41 |
Save.
Come back out.
| | 00:45 |
Reload this in a browser, and now we'll
see that our gallery now shows up in
| | 00:48 |
front of the background graphic.
So now at this point, we have all of our
| | 00:52 |
layering and positioning in place.
Next, we'll start working on the
| | 00:55 |
container for the sorting links.
| | 00:56 |
| | Collapse this transcript |
| Styling the sorting container| 00:00 |
Next we'll work on the sorting class,
that's inside of the gallery class.
| | 00:04 |
So we'll create a compound role here.
.gallery .sorting, beginning and ending
| | 00:09 |
bracket.
We're going to set margin, to 0 on the
| | 00:13 |
top, 0 on the right, 15 on the bottom.
A zero on the left, space, border.
| | 00:25 |
We use shorthand style here.
First property is going to be the size,
| | 00:29 |
one pixel.
Next is the style.
| | 00:33 |
Set that to solid, then the color, pound
sign, 6d4 d2e Semi-colon.
| | 00:41 |
Hit a Space.
Next we'll set background color.
| | 00:46 |
We're going to use RGBA.
Outside of the parentheses put a
| | 00:52 |
Semi-colon.
Inside we are going to set 109 for the
| | 00:55 |
red, 77 for the green...
46 for blue comma and then .3 for alpha,
| | 01:02 |
which is 30% opaque or 70% transparent.
Next rule .gallery.space.
| | 01:11 |
sorting space span, we're going to target
that span that 's inside of the sorting
| | 01:16 |
div.
We're going to set padding.
| | 01:22 |
0 on the top, 20 on the right, 0 on the
bottom, 0 on the left.
| | 01:32 |
Next we'll set color.
#64d2e Semicolon space.
| | 01:39 |
And then we're going to set font style to
italic.
| | 01:43 |
And then one more.
.gallery, space, .sorting space div.
| | 01:53 |
Inside there we're going to set margin.
Ten pixels on the top, zero on the right.
| | 01:58 |
Ten on the bottom and ten on the left,
then hit Save.
| | 02:02 |
Let's come back out, let's load this in a
browser.
| | 02:06 |
So, now we see we have a border around
the outside.
| | 02:09 |
We see our italic type, inside of this
band here.
| | 02:12 |
And then we have the semitransparent
background here as well.
| | 02:15 |
Now we can open and close this, and see
that the design will actually shift,
| | 02:19 |
since the main container is set to 80%
wide.
| | 02:22 |
So now that we have this sorting links
container styled, next we'll style the
| | 02:26 |
links inside.
| | 02:27 |
| | Collapse this transcript |
| Styling the sorting links| 00:00 |
Now, we're going to style a sorting links
inside of the sorting container.
| | 00:04 |
So, in the CSS, I'm going to add a few
lines here.
| | 00:08 |
We'll start with .gallery space .sorting
space a.
| | 00:16 |
We're going to target the anchor links
inside.
| | 00:18 |
Let's split that open.
First property is going to be color.
| | 00:23 |
We'll set that to white.
So, pound sign and three f's.
| | 00:27 |
Next is font size.
We'll set that to 0.85 ems.
| | 00:30 |
This is 15% smaller than the base font
size which is 14 pixels.
| | 00:35 |
Text decoration set to none, so we have
no underline.
| | 00:38 |
Text transform, we'll transform this to
uppercase.
| | 00:41 |
Padding, let's set the top to 3 pixels,
20 on the right, 3 on the bottom, 20 on
| | 00:46 |
the left and then background url../ to
come out to root inside of images check_
| | 00:52 |
normal.gift, no repeat, 0 on the x and 3
pixels on the y position.
| | 01:01 |
So, next will be .gallery space .sorting
a:hover.
| | 01:07 |
So, we'll add a pseudo class of hover.
We'll set the property of color to
| | 01:14 |
#e5aa2c;.
Next rule, .gallery .sorting, space a
| | 01:20 |
.selected, beginning and ending bracket.
So, for the selected links, we're
| | 01:30 |
going to set the color to #e5aa2c, same
as the hover state, semi colon space and
| | 01:39 |
then we're going to set the background
image to url../ to come out the root,
| | 01:47 |
inside of images, check _selected.gif,
and then a semicolon after the
| | 01:55 |
parentheses.
Now, with these in place, let's come back
| | 02:04 |
out to the operating system.
Let's reload this in a browser.
| | 02:07 |
So in a browser, we can see all of the
links styled the way we expected.
| | 02:11 |
Now, we have the selected class on all
the links from when we added these in so
| | 02:13 |
we can see that these were all working
properly.
| | 02:16 |
Let's quickly go back to our HTML file.
So, let's come in here and remove the
| | 02:20 |
selected class from all of the links,
except for the first one.
| | 02:24 |
When we first load our gallery, we're
going to show all of the thumbnails.
| | 02:28 |
Back out to our browser, let's hit
Reload.
| | 02:29 |
And now, we'll see that all categories
are selected, while the other ones are
| | 02:32 |
not.
And then, if we hover over these, we can
| | 02:35 |
see the hover state.
And now, with our sorting links styled,
| | 02:38 |
next, we'll work on styling the thumbnail
container.
| | 02:41 |
| | Collapse this transcript |
| Styling the thumbnails| 00:00 |
So now, back in our CSS file, we're
going to add some rules to style the
| | 00:03 |
thumbnail container.
So after the sorting links, let's hit a
| | 00:09 |
few returns.
Let's start with .gallery space .photos
| | 00:15 |
space .thumbnail_container, beginning and
ending bracket.
| | 00:22 |
Te property we're going to set for this
is going to be position relative.
| | 00:30 |
Next rule, .gallery space photos space
.thumbnail_container space a.thumbnail
| | 00:39 |
space image.
We're now targeting all of the images
| | 00:43 |
inside of the anchor links with the
thumbnail class inside of the thumbnail
| | 00:46 |
container.
Here, we're going to set a width, 75
| | 00:51 |
pixels.
And again, as we talked about in the
| | 00:54 |
introduction video, you can change these
sizes here.
| | 00:59 |
Next, we'll set a height.
75 pixels as well.
| | 01:02 |
Then, a space.
We're going to set a border.
| | 01:05 |
We're going to use Shorthand style here.
One pixel for the size, solid for the
| | 01:12 |
style, space, color, #64d2e, and a
semicolon.
| | 01:20 |
With that in place, let's hit Save.
Let's come back to our Browser and
| | 01:23 |
Reload.
Now, we'll see a slight border showing up
| | 01:27 |
here.
If you changed your size from 75 to a
| | 01:29 |
different size, you'll see that size
reflected here as well.
| | 01:33 |
Now, we do need to change one more
setting here, let's come back to our CSS.
| | 01:38 |
We need to set an Absolutely Positioning
on all of these thumbnails since that's
| | 01:41 |
how we're going to control how they
position and resort themselves.
| | 01:46 |
So, let's come in to our CSS and let's
add a rule above the thumbnail image.
| | 01:50 |
Let's come in here and copy that CSS rule
all the way up to the a.thumbnail, add a
| | 01:56 |
beginning and ending bracket.
Next, we're going to set position to
| | 02:03 |
absolute.
Let's hit Save.
| | 02:05 |
So now, back in the Browser, we'll see
all of the thumbnails are now stacked on
| | 02:08 |
top of each other.
What we're going to be working on next is
| | 02:10 |
the JavaScript to target every one of
these thumbnails and lay them out based
| | 02:13 |
on the item that you're sorting on, and
the amount of screen real estate
| | 02:16 |
available.
So, we'll be starting our JavaScript
| | 02:20 |
next.
| | 02:20 |
| | Collapse this transcript |
|
|
5. Positioning the Thumbnails with jQueryCreating a custom function to position thumbnails| 00:00 |
So at this point we are ready to start
writing some of our JavaScript.
| | 00:04 |
So let's come back to our project files,
let's go into our Includes directory and
| | 00:07 |
let's open up sortable_gallary.js up in
our text editor.
| | 00:11 |
And just like the CSS file, this is just
a blank JavaScript file.
| | 00:14 |
So what we're going to do here first is
set up our own custom function called
| | 00:17 |
positionThumbnails.
That way we can run this function any
| | 00:21 |
number of times, based on the user
changing the screen size, or clicking on
| | 00:24 |
the sortable links.
So let's start by typing function, space,
| | 00:30 |
positionThumbnails, beginning and ending
parenthesis, beginning and ending
| | 00:37 |
bracket.
Let's pull that up around the brackets.
| | 00:42 |
So inside here let's just start by typing
in alert, beginning and ending
| | 00:46 |
parenthesis.
Inside two tick marks for a string
| | 00:51 |
literal.
Let's type in ready to reposition, then a
| | 00:55 |
semicolon.
Before our function let's come up and add
| | 01:01 |
jQuery's document ready.
So dollar sign, beginning and ending in
| | 01:05 |
parenthesis.
Type in document inside of the
| | 01:08 |
parenthesis.
Outside of the parenthesis, dot ready.
| | 01:12 |
Another set of parenthesis, semicolon.
Inside of the parenthesis for ready let's
| | 01:16 |
add a generic function.
Beginning and ending parenthesis,
| | 01:19 |
beginning and ending bracket.
Let's split this open on the bracket, so
| | 01:22 |
anything inside of here wont trigger
until all of the HTML has been loaded in
| | 01:26 |
the browser.
So inside of here, let's just simply call
| | 01:30 |
our function.
Let's come down here and copy the name,
| | 01:33 |
positionThumbnails.
Let's come up here.
| | 01:35 |
Let's paste it, and hit semicolon.
Let's make sure all of our files are
| | 01:39 |
saved.
Let's come back out to the browser, and
| | 01:41 |
then when we hit Reload, we should see a
JavaScript message pop up that tells us
| | 01:44 |
that we're ready to reposition the
thumbnails.
| | 01:48 |
And so now that that's working properly,
we'll continue working on our position
| | 01:51 |
thumbnails function.
| | 01:52 |
| | Collapse this transcript |
| Preparing the initial settings| 00:00 |
So, now that our position thumbnails is
working properly, let's come down here
| | 00:04 |
and delete the alert.
Let's come up to the top of the script.
| | 00:08 |
Let's create a global variable called
thumbnailSpacing.
| | 00:15 |
Let's set that equal to 15.
If you remember back to the introduction
| | 00:18 |
video, this is where we can change the
spacing between the thumbnails.
| | 00:24 |
Now, with this defined, let's commence
out of the document ready and let's first
| | 00:27 |
assign this spacing to the bottom of the
sorting div.
| | 00:30 |
So, let's search for that, dollar sign,
parentheses, tick marks inside first
| | 00:36 |
string literal.
We'll take .gallery space .sorting.
| | 00:42 |
Outside of the parentheses, .CSS, another
set of parentheses, semicolon.
| | 00:44 |
Inside the first property, two tick marks
for a string literal, margin-bottom, then
| | 00:54 |
a comma.
Then, let's come up here and copy the
| | 00:59 |
thumbnail Spacing variable.
Let's come down here.
| | 01:03 |
Now, in order to access that global
variable, we're going to need to put
| | 01:06 |
window in front of that.
So, window.thumbnailSpacing, then a plus
| | 01:11 |
sign, 2 tick marks for a string literal,
and then px.
| | 01:16 |
So, when the document is loaded, whatever
the variable thumbnailSpacing is set to,
| | 01:19 |
we're going to apply that to the margin
bottom.
| | 01:22 |
That way, the sorting div will have the
same spacing as all of the thumbnails
| | 01:25 |
have from each other.
Now, next, we're going to add a show me
| | 01:27 |
class to all of the individual thumbnails
as well, since this is going to be how
| | 01:31 |
we're going to target and animate the
different thumbnails.
| | 01:34 |
So, we'll search for all of those by
typing dollar sign, parenthesis, tick
| | 01:41 |
marks for string literal
.thumbnail_container space a.thumbnail,
| | 01:47 |
let's add a parentheses .addClass,
beginning and ending parentheses, inside,
| | 01:54 |
2 tick marks for a string literal, then
type in showMe.
| | 02:04 |
So, when this page loads in addition to
setting the margin bottom, were also
| | 02:07 |
going to add the showMe class to all the
individual thumbnails.
| | 02:10 |
And now, that that's in place, we'll
start working on the calculations for
| | 02:13 |
figuring out where each thumbnail should
be positioned.
| | 02:16 |
| | Collapse this transcript |
| Measuring the thumbnails and the container| 00:00 |
Now to begin positioning our thumbnails,
let's come down into the position
| | 00:03 |
thumbnails function.
I'm going to hit a few returns in here.
| | 00:06 |
And the first thing we're going to do is
clear out the html inside of the div with
| | 00:10 |
a class of debug remainder.
So let's put a comment here first.
| | 00:15 |
We'll start with a forward slash
asterisk.
| | 00:19 |
Type debug then asterisk\.
This is an inline comment.
| | 00:23 |
Let's add a space.
Let's first search for the div with the
| | 00:27 |
debug remainder.
So start with a $().
| | 00:31 |
Tick marks inside for a string literal,
.debug-remainder.
| | 00:40 |
That's out of the ().html.
Another set of parenthesis, semicolon.
| | 00:43 |
Next we need to set up a series of
variables.
| | 00:45 |
So, the first variable's going to be
container width.
| | 00:46 |
Inside we'll put two tick marks for
string literal, but then leave it blank.
| | 00:59 |
So it's type var, space, containerwidth.
We're going to set this equal to, and
| | 01:04 |
we're going to figure out the width of
the photos div.
| | 01:07 |
So dollar sign, parentheses, tick marks.
Photos, outside of the parentheses, dot
| | 01:13 |
width, another set of parentheses, then a
semicolon.
| | 01:19 |
Next line, next variable.
We're going to call this thumbnail_r.
| | 01:27 |
This stands for thumbnail row.
We're going to set that equal to 0.
| | 01:29 |
Next variable, we're going to call this
thumbnail_c for thumbnail column.
| | 01:30 |
We're going to set that equal to zero as
well.
| | 01:44 |
Next we're going to set another variable
called Thumbnail Width.
| | 01:51 |
And what we're going to do is query the
actual Thumbnail Width itself.
| | 01:56 |
This way we can make CSS changes and our
JavaScript will pick up on the CSS value
| | 02:00 |
for this.
So to search for those, dollar sign,
| | 02:04 |
parentheses.
Tick marks inside for a string literal.
| | 02:08 |
a.thumbnail, space image:first-child.
We're going to search just the first
| | 02:16 |
child, since they're all going to be set
the same.
| | 02:21 |
We don't need to query every thumbnail.
Outside of the parenthesis, outer width,
| | 02:25 |
This way, if we have a border, or
anything else on there, that will get
| | 02:29 |
calculated as well.
Beginning and ending parentheses, then
| | 02:35 |
we're going to add the spacing.
So I'll type window dot Thumbnail
| | 02:45 |
spacing, then a semi colon.
Next let's copy that entire line and
| | 02:53 |
paste it on the next line.
Let's come in and change the variable
| | 02:58 |
name thumbnail width to thumbnail height.
Let's come in here and detect the outer
| | 03:05 |
height This way we don't have to have
perfectly squared thumbnails.
| | 03:10 |
You can have any rectangle shape you
want.
| | 03:14 |
And then we'll leave the plus
window.thumbnail spacing as well.
| | 03:17 |
Now there's one more variable we're
going to create.
| | 03:25 |
We're going to call this maxC, maximum
columns.
| | 03:29 |
And we're going to set this equal to
containerWidth.
| | 03:34 |
And then we're going to divide that by
the thumbnailWidth, then a semicolon.
| | 03:42 |
Now what this is going to do is figure
out how many thumbnails we can fit in the
| | 03:45 |
photos area.
But we want to make sure we have no
| | 03:48 |
remainders, so we want to make sure we
have enough room for another column of
| | 03:50 |
thumbnails.
So what we're going to do is use a
| | 03:53 |
JavaScript function to floor this number,
so we don't get any remainders or decimal
| | 03:57 |
points.
So to do that, we're going to come out to
| | 04:01 |
the beginning.
We're going to type math.floor.
| | 04:06 |
Beginning parentheses.
Inside of the parentheses, we'll keep our
| | 04:10 |
calculation.
Then before the semicolon, we'll end our
| | 04:13 |
parentheses.
Now that we have our initial variables
| | 04:16 |
set up, next we'll run through all of the
thumbnails and calculate these variables
| | 04:19 |
against each thumbnail
| | 04:21 |
| | Collapse this transcript |
| Calculating the remainders| 00:00 |
So now we're going to run our
calculations against all of the
| | 00:02 |
thumbnails.
So after the mac c variable, let's hit a
| | 00:05 |
few returns.
Let's search for each thumbnail.
| | 00:08 |
So dollar sign, parenthesis, two tick
marks for a string literal.
| | 00:14 |
We're going to search for
.thumbnail_container space a dot
| | 00:23 |
thumbnail, dot, show me.
After the parenthesis, we're going to
| | 00:31 |
type, dot each.
Another set of parentheses, semicolon.
| | 00:36 |
Inside of the parentheses for each, we'll
add a generic function.
| | 00:40 |
So function, beginning and ending
parentheses, beginning and ending
| | 00:44 |
bracket.
Inside of the parentheses, let's type in
| | 00:48 |
index.
We want to count each one of the items we
| | 00:52 |
find.
Let's split this open on the brackets.
| | 00:55 |
And let's scroll up here a little bit.
So the first thing we're going to do is
| | 01:00 |
declare a variable, to capture the
remainder.
| | 01:02 |
So var remainder.
So what we're going to do is we're
| | 01:07 |
going to type index, then a percent sign,
max_c.
| | 01:13 |
So what we're doing here is calculating
the modulus between index and max c.
| | 01:20 |
Which is basically telling us whether one
can be divided into the other one without
| | 01:25 |
any remainder.
Let's put this inside of a set of
| | 01:29 |
parentheses, so we calculate this first.
And then we'll divide this by 100.
| | 01:37 |
Next variable.
Maximum index, or max index, we're
| | 01:43 |
going to set this to 0.
And now what we're going to do is set the
| | 01:46 |
remainder over to our debugging text, so
we can see whats actually happening with
| | 01:51 |
our math.
So forward slash asterisk, asterisk
| | 01:56 |
forward slash, type in debug, dollar
sign, parenthesis, tick marks for a
| | 02:03 |
string literal.
Let's come up and select dot debug
| | 02:09 |
remainder.
Paste this inside of here.
| | 02:13 |
Then we're going to type dot append.
Beginning and ending parenthesis,
| | 02:19 |
semicolon.
Inside, we're going to put in our
| | 02:23 |
remainder variable, plus two tick marks
for a string literal.
| | 02:28 |
Space, hyphen, space, inside of the
string literal.
| | 02:32 |
Now with this in place, let's save all
our files.
| | 02:35 |
Let's come back out to the browser.
Let's hit reload.
| | 02:36 |
So now we can see down here in our
debugging div, every one of the
| | 02:40 |
thumbnails now has a remainder
calculation.
| | 02:43 |
So we can see 0 here as the first number.
Then we have 0.01, 0.02, 0.03, and 0.04,
| | 02:48 |
and then 0 again.
So this is telling us that, based on the
| | 02:53 |
size of the thumbnails, in the container
inside of here, we can fit one, two,
| | 02:57 |
three, four, five thumbnails, and then
we're going to reset the column, and the
| | 03:01 |
row to zero and start the next row here.
So we can fit five thumbnails across.
| | 03:08 |
So each time we see a zero in this list,
that's going to be another row for the
| | 03:11 |
thumbnails.
Now based on the width of your browser,
| | 03:14 |
you may see more or less remainders
between the first zero, and the second
| | 03:17 |
zero.
So now that we're figuring out the
| | 03:20 |
remainders and how many thumbnails fit,
next we'll work on calculating the
| | 03:23 |
position of the thumbnail row and column,
based on these remainders.
| | 03:27 |
| | Collapse this transcript |
| Calculating the rows and columns| 00:00 |
So now with our remainders calculated,
lets hit a few returns, still working
| | 00:05 |
inside of the each, function.
Let's start with a conditional, we'll
| | 00:09 |
type If, beginning and ending
parenthesis, beginning and ending
| | 00:13 |
bracket, split that open on the brackets.
Inside of the parenthesis, if remainder.
| | 00:21 |
Type double equals, and then 0.
So if the remainder is 0, which means
| | 00:25 |
this modulus here, divided by 100, gives
us no remainder.
| | 00:30 |
What we're going to do inside of here, is
add another if statement.
| | 00:34 |
So if, parenthesis and brackets, split
that open on the brackets.
| | 00:42 |
Inside here we're going to type index, so
the number of the thumbnail, exclamation
| | 00:47 |
point equals, does not equal 0.
Inside of here what we're going to do, is
| | 00:53 |
we're going to take, thumbnail_R, and
we're going to increment that by the
| | 00:58 |
thumbnail height.
So for each new row, we're going to add
| | 01:06 |
another thumbnail Height setting in
there.
| | 01:09 |
Now outside of this conditional
statement, but still inside of the parent
| | 01:12 |
conditional statement, let's type
thumbnail_C.
| | 01:16 |
We're going to set that equal to 0.
Now back on the parent conditional.
| | 01:22 |
Let's add and else statement here, split
that open on the brackets.
| | 01:26 |
We're going to type thumbnail_C, we're
going to increment this, plus equals, by
| | 01:28 |
thumbnail width.
Then a semicolon.
| | 01:38 |
So what's happening here, is if the
thumbnail remainder is 0, we're going to
| | 01:41 |
come down here and check to make sure
that the thumbnail is not the very first
| | 01:44 |
thumbnail.
And then what were going to do, is were
| | 01:48 |
going to take the thumbnail row, and the
thumbnail height, and then were going to
| | 01:51 |
set the column to 0.
That's going to but the next thumbnail
| | 01:55 |
after our remainder, over on the left,
and move it down the height of the
| | 01:57 |
thumbnails, giving us our rows and
columns.
| | 02:01 |
And then if the remainder is not 0, we
know that we're still in a row, and we're
| | 02:05 |
going to continue to space out each of
the thumbnails based on the width.
| | 02:10 |
Now that we have all of these
calculations complete, next we'll animate
| | 02:13 |
and position each thumbnail based on
these calculations.
| | 02:16 |
| | Collapse this transcript |
| Positioning and animating the thumbnails| 00:00 |
Now we're ready to animate each one of
the thumbnails.
| | 00:03 |
So still inside of the each statement,
after our nested conditional statements.
| | 00:09 |
Let's come down here.
Let's start with a dollar sign,
| | 00:12 |
parenthesis.
Now again, we are inside of the thumbnail
| | 00:15 |
each.
So each time one of these is found we are
| | 00:18 |
on a thumbnail.
So we can simply say, this, outside of
| | 00:21 |
the parenthesis, dot css, another set of
parenthesis, semicolon, inside of css,
| | 00:25 |
two tick marks for a string literal.
We're going to set the display, comma,
| | 00:32 |
two tick marks again, tool block.
Now outside of the parenthesis, but
| | 00:41 |
inside of the semicolon, dot, animate,
another set of parenthesis.
| | 00:48 |
Inside of animate, beginning and ending
bracket.
| | 00:51 |
What we're going to do inside of here,
split this open.
| | 00:54 |
And we're going to animate the following
properties.
| | 00:57 |
Two tick marks for a string literal.
We're going to do opacity.
| | 01:02 |
Outside of the string literal, colon, 1,
then a comma.
| | 01:06 |
Next line, two tick marks, top property.
Outside of the string literal, colon,
| | 01:14 |
thumbnail underscore R, plus, tickmarks
for a string literal, px, comma.
| | 01:24 |
Next property.
Tick marks, property of left, colon,
| | 01:30 |
thumbnail underscore C, plus, string
literal, px.
| | 01:40 |
Next line, let's come out to the ending
bracket.
| | 01:43 |
Let's add a comma, space.
And then we'll put in 500 milliseconds.
| | 01:48 |
So each animation will take half of a
second to play.
| | 01:51 |
So let's hit save.
Let's come back out to our browser.
| | 01:55 |
And now let's hit reload.
Now when we hit reload, you'll see that
| | 01:59 |
all of the thumbnails will start at this
0 0 position.
| | 02:03 |
We'll calculate each one, find its
remainder and then they'll all animate
| | 02:06 |
out.
And if we look at our remainders, we can
| | 02:08 |
see we have four rows here, and if we
come down we'll see that we have four 0s
| | 02:10 |
down here.
There is a first one, second one, third
| | 02:14 |
one and fourth one.
Now this will also calculate based on the
| | 02:17 |
browser width.
So let's bring our browser down.
| | 02:21 |
Let's hit Reload, and the thumbnails will
now recalculate to that new size.
| | 02:26 |
We can scroll through them, here.
Now, one remaining calculation we have is
| | 02:29 |
to calculate the photo container width.
We're going to set that up next, so that
| | 02:33 |
later on in the course, we can apply our
responsive design techniques to that
| | 02:35 |
photo container.
| | 02:37 |
| | Collapse this transcript |
| Resetting the size of the photo container| 00:00 |
Now, the last calculation we need to do
is to calculate the thumbnail_container,
| | 00:04 |
so still inside of the thumbnail each
function.
| | 00:08 |
After the animation, let's hit a few
Returns.
| | 00:11 |
Let's create two more variables.
We're going to set a variable called
| | 00:16 |
newWidth.
We're going to set that equal to max_C,
| | 00:19 |
multiplied by the thumbnail_Width.
Next variable, newHeight.
| | 00:27 |
We're going to set that equal to
thumbnail_R plus thumbnailHeight.
| | 00:37 |
Then, we're going to apply this to the
thumbnailContainer.
| | 00:39 |
So, start with a dollar sign,
parenthesis, tick marks for a string
| | 00:40 |
literal, .thumbnail_container.
That's out of the parentheses, .css.
| | 00:40 |
Another set of parentheses, semicolon.
Inside of the parentheses for CSS, we're
| | 00:51 |
going to be setting multiple properties,
so we need the beginning and ending
| | 00:57 |
bracket.
First property is going to be width.
| | 01:03 |
Let's put that inside of a string
literal, then a colon.
| | 01:09 |
Let's come up here and copy the new width
variable name.
| | 01:13 |
Let's paste that here, plus sign.
We're going to add a string literal of px
| | 01:18 |
to make this a CSS property.
Next, comma, two tick marks.
| | 01:23 |
We're going to set the height in the
string literal.
| | 01:27 |
Colon, the value's going to be the new
height variable name plus two tick marks,
| | 01:34 |
px.
Now, to make sure that we can see the
| | 01:38 |
thumbnail container in our layout to make
sure the thumbnails are calculating
| | 01:41 |
properly, let's save our JavaScript file.
Let's come back to our sortable gallery,
| | 01:47 |
CSS file.
Let's find the thumbnail container rule.
| | 01:51 |
After position relative, hit a Space.
Let's add a background color to pound
| | 01:56 |
sign, and three sevens.
So, with that in place, let's come back
| | 02:00 |
out to the operating system.
Let's reload this in a browser.
| | 02:05 |
And now, we'll see this gray box here
showing us how the thumbnails are
| | 02:08 |
positioning in, and giving us an idea, as
we re-size, if another row of thumbnails
| | 02:12 |
would be able to fit inside of this area.
So, as I re-size the browser and hit
| | 02:17 |
Reload, you can see that the thumbnails
are positioning inside of that gray area
| | 02:21 |
based on whether or not the thumbnails
fit with no remainders.
| | 02:26 |
And if they don't fit, there's not enough
room for another column.
| | 02:29 |
The calculations start a new row and then
position each one from there.
| | 02:33 |
So, now that we are calculating the
position of each thumbnail and animating
| | 02:36 |
each one to each spot, next we'll
activate the sorting links.
| | 02:40 |
| | Collapse this transcript |
|
|
6. Sorting the ThumbnailsActivating the sorting links| 00:00 |
So now we're ready to activate our
sorting links.
| | 00:02 |
So back in the JavaScript file, let's
scroll up to the top.
| | 00:06 |
Let's find the document ready function.
Let's add a few lines before we apply the
| | 00:12 |
margin bottom to the sorting div.
Let's start with the dollar sign
| | 00:16 |
parenthesis, tick marks for a string
literal, a.sortlink.
| | 00:22 |
Outside of the parentheses, .on,
beginning and ending parentheses,
| | 00:28 |
semicolon.
Inside of the on, tick marks for a string
| | 00:33 |
literal, click.
Outside of the string literal, but still
| | 00:37 |
inside of the parentheses for on, comma.
Add a generic function, beginning and
| | 00:44 |
ending parentheses, beginning and ending
bracket, split that open on the brackets.
| | 00:51 |
Let's come back inside of our generic
function and type a lowercase e inside of
| | 00:54 |
the beginning and ending parentheses.
This will capture the event, which is the
| | 00:58 |
click event that we're assigning to every
one of these sort links.
| | 01:03 |
So the first thing we're going to do is
prevent the default behavior of the
| | 01:05 |
browser.
We don't want the browser to treat these
| | 01:08 |
like regular anchor links, because we
want to capture what's happening.
| | 01:12 |
So we'll type e.preventDefault,
parenthesis semicolon.
| | 01:20 |
Next line.
So now, when somebody types on these
| | 01:24 |
links, the first thing we want to do is
remove all of the selected classes.
| | 01:29 |
So dollar sign parentheses tick marks,
a.sortlink.
| | 01:34 |
Outside out of the parentheses, type
.removeClass, another set of parentheses
| | 01:42 |
semicolon.
Inside our string literal, selected.
| | 01:49 |
So, this will remove the selected class
from all of the sorting links.
| | 01:53 |
And then, we want to reassign it back to
the item that was clicked on.
| | 01:56 |
So, we'll start with a dollar sign
parentheses, this, .addClass, parentheses
| | 02:00 |
semicolon, string literal, selected.
So let's hit Save.
| | 02:12 |
Let's come back out to our browser and
let's hit Reload.
| | 02:17 |
Now, in our browser, we can come up here
to our sorting links.
| | 02:19 |
We can click on them.
And each link that we click on will
| | 02:22 |
remove the selected class from all of the
other links and then apply it to the item
| | 02:26 |
we clicked on.
So now that we're providing proper
| | 02:29 |
feedback to the user, next, we'll create
a custom function to capture the data
| | 02:32 |
keyword associated with these links.
| | 02:35 |
| | Collapse this transcript |
| The custom sorting function| 00:00 |
Now, we're going to create a custom
function to sort the thumbnails.
| | 00:02 |
So, outside of the document ready, before
our custom function of positioning the
| | 00:08 |
thumbnails, we'll type function space
sortThumbnails, parentheses, brackets,
| | 00:14 |
split that open on the brackets.
Now, let's come back and inside of the
| | 00:21 |
parentheses.
We want to capture a variable when we
| | 00:25 |
call this function, we'll call this
keyword.
| | 00:29 |
Inside of this function, let's add n
alert, beginning and ending parentheses,
| | 00:32 |
let's put our variable keyword inside,
then a semicolon.
| | 00:35 |
So now, with our custom function created,
let's copy the name.
| | 00:39 |
Let's come up into the sort link, let's
hit a Return and what we're going to do
| | 00:43 |
is get the associated keyword with this
link.
| | 00:47 |
So, we're going to do that by starting
with the variable var space keyword.
| | 00:53 |
We're going to set this equal to dollar
sign parentheses this.attr, for
| | 00:59 |
attribute.
Another set of parentheses, semicolon.
| | 01:06 |
Inside of the parentheses for attr, we're
going to type string literal
| | 01:09 |
data-keyword.
Now, if we go back to the HTML and look
| | 01:12 |
at our sort links, we can see that h1 has
a data keyword attribute, and the value
| | 01:18 |
is equal to the item we want to sort on.
So, let's come back to our JavaScript
| | 01:25 |
file.
After we created our variable keyword,
| | 01:28 |
let's hit a Return.
Let's call our function.
| | 01:31 |
So, let's paste these sortThumbnail
function name, add a beginning and ending
| | 01:35 |
parenthesis, then a semicolon.
Let's come up here and copy the keyword
| | 01:40 |
variable name and paste that inside the
parenthesis for the function call.
| | 01:44 |
This way, the value of the data keyword
attribute of the item that was clicked on
| | 01:47 |
will be passed over to the
sortThumbnails.
| | 01:50 |
Once it gets passed down here, we are
going to alert this to the browser so we
| | 01:53 |
can actually see the associate data
keyword when we click the links.
| | 01:57 |
Let's hit Save.
Let's come back out to our browser.
| | 02:03 |
Let's click on the links.
So, I'll click on plants.
| | 02:05 |
I can see the alert comes up.
I can click OK.
| | 02:08 |
Let's come over to sculpture.
Click OK.
| | 02:12 |
Winter, click OK.
So now, we know we're properly getting
| | 02:14 |
the associated data keyword to each one
of the sorting links.
| | 02:18 |
And now that that's in place, we can
continue to work on the sortThumbnails
| | 02:21 |
function.
| | 02:22 |
| | Collapse this transcript |
| Determining the keywords for each thumbnail| 00:00 |
So the first thing we're going to do
inside of this Sort thumbnails function,
| | 00:03 |
is figure out what all of the keywords
are for each one of the thumbnails.
| | 00:08 |
So let's scroll up here a little bit.
Let's delete the alert.
| | 00:11 |
Let's start with a dollar sign,
parenthesis, tick marks for a string
| | 00:15 |
letter roll.
We're going to search for
| | 00:20 |
.thumbnail_container space a.thumbnail.
That's out of the parenthesis.
| | 00:31 |
.each, another set of parenthesis, semi
colon.
| | 00:36 |
Inside of each, we're going to add a
generic function, beginning and ending
| | 00:41 |
parentheses, beginning and ending
bracket.
| | 00:45 |
Split that open on the brackets.
For each of them that we find, we're
| | 00:52 |
going to have to declare a variable.
We're going to call this
| | 00:58 |
thumbnailKeywords.
We're going to set this equal to $().
| | 01:01 |
This, outside of the parentheses, .attr.
Another set of parentheses, and a
| | 01:04 |
semicolon.
The attribute we're going to search for
| | 01:09 |
inside of each thumbnail is going to be
the data-keywords.
| | 01:20 |
Once we have those declared in a
variable, let's start with a conditional
| | 01:23 |
statement.
So let's start with an if, parentheses,
| | 01:26 |
brackets, split that open on the
brackets.
| | 01:30 |
Let's add an else in here as well,
another set of brackets, we'll split that
| | 01:34 |
open.
So inside of the parentheses for if,
| | 01:38 |
keyword, double equals, two quotes, and
then all.
| | 01:43 |
So if keyword equals all, we know that
they clicked on the all categories sort
| | 01:46 |
link.
So what we're going to do here is start
| | 01:53 |
with a dollar sign, parentheses, this,
.addclass, parentheses, string literal,
| | 02:07 |
showMe.
Then .removeclass, parentheses, string
| | 02:15 |
literal, hideMe, semi-colon.
So again, if somebody clicks on the all
| | 02:19 |
categories, and the keyword equals all,
we're going to add showMe to every one of
| | 02:23 |
the thumbnails and remove the hideMe.
So now, with that in place, next, we'll
| | 02:27 |
create another conditional statement
inside of the else of this parent
| | 02:30 |
condition to see whether or not the
keywords exist inside of the thumbnails
| | 02:33 |
that match the sort link.
| | 02:36 |
| | Collapse this transcript |
| Searching for keywords in the thumbnails| 00:00 |
Now we're going to look inside of each
thumbnail.
| | 00:02 |
And we're going to see if the keywords of
the thumbnails match the keyword of the
| | 00:05 |
sort link that was clicked.
So, inside of our else statement here,
| | 00:08 |
from the condition we wrote earlier, I'll
add a few returns.
| | 00:11 |
Let's add another condition inside of
here.
| | 00:14 |
So if, parenthesis, brackets.
Split that open on the brackets.
| | 00:20 |
Let's add an else on this as well.
Split that open.
| | 00:23 |
So now, inside of the parentheses what we
want to here is let's start with our
| | 00:27 |
variable, thumbnail keywords.
Then we're going to use a Javascript
| | 00:31 |
function called indexof.
The string we're going to put inside of
| | 00:35 |
the parentheses is going to be keyword.
Let's hit a space.
| | 00:41 |
!= which means not equals, negative 1.
So what this is basically doing, is
| | 00:46 |
checking the thumbnail keywords, which is
based on the keywords of each thumbnail.
| | 00:51 |
We're taking keyword, and using the
indexOf JavaScript function, which will
| | 00:55 |
basically search for this string, inside
of this string.
| | 00:59 |
And javascript will return a value of
negative one if that keyword is, in fact,
| | 01:02 |
found inside of the thumbnail keywords.
So, if that's the case, then, inside of
| | 01:06 |
here, what we're going to do is we're
going to add the show me class onto the
| | 01:09 |
thumbnails.
This will indicate that the thumbnail
| | 01:11 |
does have the keyword that we're
searching for.
| | 01:14 |
So let's start with a dollar sign,
parentheses, this.
| | 01:18 |
Outside of the parenthesis .addClass,
another set parentheses.
| | 01:25 |
Tick marks inside, for a string literal.
Type in showMe.
| | 01:31 |
Outside of the parentheses, .removeClass,
string literal, hideMe.
| | 01:40 |
So let's come in here and copy this
entire statement.
| | 01:46 |
Let's come into the else of this
condition, and let's reverse these, let's
| | 01:52 |
do addClass hideMe, and removeClass
showMe.
| | 02:00 |
So what's happening here, when we run
this sort thumbnails function based on
| | 02:03 |
clicking on one of the sort links, the
keyword variable here, we're going to
| | 02:06 |
check the keyword variable down here,
inside of index of, to see if it is
| | 02:09 |
included in the thumbnail keywords, for
each one of the thumbnails, since we're
| | 02:12 |
running through and checking everyone of
the thumbnails on the stage.
| | 02:18 |
If index of equals negative 1, which is
the result javascript will give us if it
| | 02:22 |
does find one string inside of another,
then we know that that thumbnail matches
| | 02:25 |
the sort link, and we're going to add the
showMe class and remove hideMe.
| | 02:31 |
And if the string is not found, we're
going to come down here and add the
| | 02:33 |
hideMe and remove the showMe from each
thumbnail.
| | 02:37 |
Next, we'll add an animation to the
position thumbnails function to hide all
| | 02:41 |
of the thumbnails that have the hideMe
class.
| | 02:43 |
| | Collapse this transcript |
| Setting up the animation to hide thumbnails| 00:00 |
Now we need to create an animation to
hide all of the thumbnails that have the
| | 00:02 |
hideMe class.
So let's scroll down.
| | 00:05 |
Let's find our position thumbnails
function.
| | 00:09 |
After the debug, before we start with our
variables, let's come up here and search
| | 00:12 |
for all of our thumbnails with the hideMe
class.
| | 00:15 |
So let's start with a dollar sign,
parentheses, tick marks for string
| | 00:22 |
literal, dot thumbnail underscore
container, space a, dot thumbnail, dot
| | 00:29 |
hide me.
Outside of the parentheses, dot animate,
| | 00:35 |
beginning and ending parentheses, and a
semicolon.
| | 00:39 |
Inside of the parentheses, beginning and
ending bracket.
| | 00:42 |
Let's sat opacity, colon, 0.
Outside of the brackets, but still inside
| | 00:44 |
of the parentheses, comma, 500
milliseconds.
| | 00:45 |
Then we're going to add a callback
function, function.
| | 00:59 |
Beginning and ending parentheses,
beginning and ending bracket, let's split
| | 01:02 |
this open.
So a callback function runs after the
| | 01:05 |
animation is complete.
So we'll find all of the hide me
| | 01:09 |
thumbnails, animate the opacity across
half a second, and then we'll run this
| | 01:13 |
function once that's complete.
So inside of here we're going to start
| | 01:19 |
with dollar sign, parentheses, this dot
css, beginning and ending parenthesis,
| | 01:26 |
semicolon.
Inside of the parentheses we're going to
| | 01:32 |
set multiple properties, so beginning and
ending bracket, tick marks for a string
| | 01:36 |
literal.
We're going to set display, colon,
| | 01:41 |
another string literal, to none, comma.
Next property, we're going to set top,
| | 01:48 |
colon, 0 pixels.
Next property, string literal, left,
| | 01:54 |
colon, another string literal, 0 pixels.
So in addition to just animating the
| | 02:03 |
opacity down to zero, we're also going to
set the display type to none, and then
| | 02:06 |
we're going to set the top and left
position to zero.
| | 02:10 |
So each time we have a thumbnail from a
hide me state to be showing, they'll
| | 02:13 |
always start to show from the upper
left-hand corner.
| | 02:16 |
So now that we have hide me and show me
animations for the thumbnails, next we'll
| | 02:19 |
add a position thumbnails function call,
from the sort thumbnails, and then test
| | 02:23 |
it in a browser.
| | 02:25 |
| | Collapse this transcript |
| Animating the sorted thumbnails| 00:00 |
Now, at this point, we have two custom
functions, we have position thumbnails
| | 00:03 |
and sort thumbnails.
So inside of our Javascript file, let's
| | 00:06 |
come up and copy the position thumbnails
function name plus the parenthesis.
| | 00:12 |
Let's copy that to the clipboard.
Let's scroll up, and inside of the
| | 00:15 |
function for sort thumbnails.
After we figure out if each of the
| | 00:19 |
thumbnail has the corresponding keyword
based on the sort link that was clicked.
| | 00:24 |
And we've assigned the showMe and hideMe
classes.
| | 00:27 |
Let's come down here.
Outside of the each statement for the
| | 00:30 |
thumbnails.
Let's hit a return.
| | 00:32 |
And let's paste in the position
thumbnails function call.
| | 00:38 |
Now, since position thumbnail does all of
its animation based on whether or not the
| | 00:41 |
show me or hide me class exists.
We can reuse that function each time we
| | 00:45 |
click a sort link and have that function
recalculate all of the remaining
| | 00:48 |
thumbnails based on their classes.
So to test this, let's hit save.
| | 00:52 |
Let's go back out to the browser.
Now inside the browser, we can come up
| | 00:57 |
here and click on our Sorting links.
And as I click different properties,
| | 01:01 |
notice that all of the thumbnails will
hide and show, and then animate to their
| | 01:04 |
new states.
So now that we have a dynamic
| | 01:07 |
relationship between all of the
thumbnails, the position of each item,
| | 01:09 |
and the relationship between the
thumbnails, and the sort links, now we
| | 01:12 |
can work on making our design responsive.
| | 01:15 |
| | Collapse this transcript |
|
|
7. Making the Layout Responsive with CSSAdding CSS3 media queries| 00:00 |
Now to make our design responsive, we're
going to use a combination of CSS and
| | 00:03 |
JavaScript.
So first, let's go add some CSS3 media
| | 00:06 |
queries.
So let's switch over to our CSS file.
| | 00:09 |
Let's scroll down to the bottom.
Down here, we're going to make some media
| | 00:13 |
queries.
I first want to add a comment here.
| | 00:16 |
So we'll do forward slash asterisk, two
spaces, asterisk forward slash.
| | 00:23 |
Inside, let's just give this a comment of
vertical.
| | 00:28 |
And then, for our first media query,
we'll type at sign media space screen
| | 00:33 |
space and space parentheses.
Inside of the parentheses, min-height
| | 00:40 |
colon 50 px.
Outside of the parentheses, space and
| | 00:46 |
space, another set of parenthesis.
Inside the parenthesis, max-height colon
| | 00:53 |
520 pixels.
The beginning and ending bracket.
| | 00:57 |
Now, let's come in here and select this
entire media query.
| | 01:00 |
Next line, let's paste this.
Let's come back and change min-height to
| | 01:06 |
521 pixels and the maximum height of 700
pixels.
| | 01:12 |
Then copy this line, paste it on the next
line.
| | 01:15 |
Let's come in here and change min-height
to 701 pixels and the get rid of the
| | 01:18 |
maximum height setting.
So now, with those rules created, let's
| | 01:22 |
come in here and select all of these.
Let's hit a few returns.
| | 01:27 |
Let's paste the entire row.
Let's paste these media queries again.
| | 01:33 |
Let's change the comment to say
Horizontal.
| | 01:36 |
Now, in the first media query, let's
change min-height to min-width, 50 pixels
| | 01:44 |
and maximum width to 500 pixels.
Next line, let's change min-height to
| | 01:53 |
min-width, 501 pixels, and max width, 960
pixels.
| | 01:59 |
Now, on the last line, let's change this
one to min-width and set it to 961
| | 02:02 |
pixels.
So now we have six media queries set up.
| | 02:07 |
Next, we'll work on putting CSS rules in
for the title graphic.
| | 02:10 |
| | Collapse this transcript |
| Making the title graphic responsive| 00:00 |
Now, with our media queries created,
we're going to put some CSS rules inside
| | 00:03 |
of these queries.
So I'm going to come inside of these and
| | 00:05 |
I'm going to split each one of these open
on the brackets, and then scroll up.
| | 00:10 |
So, the first one we're going to start
with is the smallest screen for verticle.
| | 00:15 |
Let's come in here and create a rule for
title, so .title { }.
| | 00:20 |
Let's set back on image.
We'll set this to URL, inside of the
| | 00:27 |
parentheses, ../ to come out to root
/images, /title_small.png;.
| | 00:35 |
Let's come in here and copy this rule.
Let's come down inside of the medium size
| | 00:41 |
screen.
Let's paste it.
| | 00:45 |
Let's change title small to title medium.
Let's hit a few returns.
| | 00:53 |
Let's paste this inside of the large
screen and change this to title_large.
| | 01:01 |
Now with the vertical media query set,
let's come down inside of horizontal.
| | 01:06 |
Inside of the first one for small.
Let's paste this in here.
| | 01:09 |
So this is going to be set to title
small.
| | 01:12 |
Let's come down inside of the medium.
And let's set title_medium.
| | 01:19 |
And then lastly let's come down inside of
the large screen for horizontal, and set
| | 01:25 |
this to title_large.
Then hit save.
| | 01:30 |
Now with these in place let's come back
out to the browser.
| | 01:33 |
And now in the browser if I open my
window up as wide as it will go we can
| | 01:36 |
see the largest title graphic here.
And if I grab my Window and start to
| | 01:41 |
resize it both vertically and
horizontally we can see the title graphic
| | 01:44 |
will start to shift based on those media
queries.
| | 01:48 |
Now when you're applying the responsive
design techniques to your own design you
| | 01:51 |
can decide what the priority is of these
elements.
| | 01:54 |
Any items in your CSS file that come last
will get highest priority, so if you want
| | 01:57 |
the vertical rules to override the
horizontal media query rules you can put
| | 02:00 |
those later.
And now that we have our media queries
| | 02:04 |
working, next we're going to add some
additional classes inside of the media
| | 02:07 |
queries, to adjust other aspects of the
design.
| | 02:10 |
| | Collapse this transcript |
| Making the sorting box and the links| 00:00 |
Now, we're going to change more CSS
properties inside of the horizontal media
| | 00:03 |
queries.
So, down inside of the small screen,
| | 00:06 |
after our title graphic, let's hit
Return.
| | 00:11 |
Let's add body, beginning and ending
bracket.
| | 00:13 |
So, let's change the padding for the body
when we're on the small screens.
| | 00:18 |
We use shorthand style here.
So first property is top.
| | 00:21 |
5 pixels.
Right, 0 pixels.
| | 00:26 |
0 on the bottom.
5 pixels on the left.
| | 00:30 |
Let's hit Return.
Let's type .gallery for the gallery
| | 00:37 |
class.
Let's set a width of auto, semicolon.
| | 00:43 |
Let's set a margin left of 35 pixels.
That will give us enough room to see the
| | 00:48 |
title graphic on the left hand side.
Let's hit Return.
| | 00:52 |
Let's type .gallery, space, .sorting,
space, span.
| | 00:56 |
Target the Span Element inside of the
Sorting Div container.
| | 01:02 |
Here we're going to set a display of
block.
| | 01:05 |
This way the label will stay on it's own
line and the links will go underneath of
| | 01:09 |
it.
Let's set a color.
| | 01:12 |
Pound sign, e5, aa, 2c, semicolon, space,
padding, zero on the top, zero on the
| | 01:18 |
right, 20 pixels on the bottom, and zero
on the left.
| | 01:25 |
Then a semi-colon, then lastly .gallery
space .sorting space a, beginning and
| | 01:32 |
ending bracket.
We're going to set the display type of
| | 01:37 |
these to block as well.
That way, on a small screen, every link
| | 01:41 |
will be on its own line.
Now with those in place, let's come down
| | 01:47 |
inside of the medium screen.
After the title graphic let's hit a
| | 01:51 |
Return.
We'll start with dot gallery space, dot
| | 01:56 |
sorting space, span, beginning and ending
bracket.
| | 02:01 |
We're going to set a display of block.
Set Padding, 0 on the top, 0 on the
| | 02:08 |
right, 20 on the bottom, 0 on the left.
Next rule, .gallery .sorting a, beginning
| | 02:18 |
and ending bracket.
We're going to set a display of block,
| | 02:25 |
we're going to set a width of 35%, we're
going to set a float property of left,
| | 02:31 |
this will give us a two column effect
here, and a margin bottom.
| | 02:41 |
Of 5 pixels.
By setting a float property and a width
| | 02:46 |
of 35%, this will give us a stacked or
column view of the sort links on a medium
| | 02:49 |
screen.
And then last, let's come down to the
| | 02:53 |
large screen.
The gallery, .sorting, space span,
| | 02:59 |
beginning and ending bracket.
Set Padding.
| | 03:06 |
Zero on the top.
20 on the right.
| | 03:09 |
Zero on the bottom and zero on the left.
Now we are using a Float property here in
| | 03:13 |
the medium screen on the horizontal, and
we did create a Div in out HTML with a
| | 03:16 |
class of Clear Boat, so let's come up
here and make a new class before our
| | 03:19 |
media queries...
Called Clear_both, let's hit space,
| | 03:25 |
beginning and ending bracket.
Let's set it clear of both on here, and
| | 03:30 |
then line height of 1 pixel.
Now with these in place, save your files.
| | 03:36 |
Let's come back and look at these in a
browser.
| | 03:39 |
Now here in a browser we're seeing a
large screen view.
| | 03:41 |
We see our span over here that holds the
filter photos by label, and all the links
| | 03:45 |
are showing up next to each other.
If I resize the window down, we can see
| | 03:49 |
that we now snap into the medium screen
view, where each link's width is set to
| | 03:53 |
35% in a float, giving us that column
view.
| | 03:57 |
And then when I get down to the small
screen view, we can see that all of the
| | 03:59 |
links, now with their display type set to
block, now show up on top of each other.
| | 04:04 |
And of course you can still click the
links, and the thumbnails will resort
| | 04:07 |
based on the available space.
So now we have the responsive design
| | 04:10 |
pieces in place that we can do with CSS.
Next we'll add in our own custom function
| | 04:14 |
and a listener event, so that we can
rearrange the thumbnails based on the
| | 04:17 |
screen size as well.
| | 04:19 |
| | Collapse this transcript |
|
|
8. Making the Layout Responsive with JavaScriptCreating a custom function to check the viewport| 00:00 |
Now, at this point we have CSS3 media
queries in here which will change our
| | 00:03 |
layout and make it responsive but notice
when we resize the window, when we get
| | 00:07 |
under certain thresholds, the thumbnails
don't reposition themselves.
| | 00:12 |
Now if we click one of the sort links,
the thumbnails will reposition in their
| | 00:15 |
available space but if I resize the
browser, they won't resize until we run
| | 00:18 |
that function.
This is because the thumbnails will only
| | 00:22 |
be repositioned when we call that
javascript function.
| | 00:25 |
So what we're going to need to do is set
up a listening event with javascript to
| | 00:28 |
detect the window size to see if we need
to reposition the thumbnails in addition
| | 00:31 |
to the media queries.
So to do this, lets come back to our
| | 00:36 |
javascript file.
Let's scroll up.
| | 00:40 |
After the document ready, let's add
another custom function.
| | 00:46 |
We're going to call this, check viewport.
Parentheses, brackets.
| | 00:54 |
Split that open on the brackets, then
scroll up here a little bit.
| | 00:58 |
So what we're going to do here is define
a few variables.
| | 01:02 |
We'll start with var, photosWidth.
We're going to set that equal to, dollar
| | 01:10 |
sign parentheses, tick marks for string
literal, .photos, outside of the
| | 01:15 |
parentheses, .width, beginning and ending
bracket, semicolon.
| | 01:23 |
Next variable, bar space thumbnail
container width, we are going to set that
| | 01:28 |
equal to dollar sign parenthesis, tick
marks per string literal, the thumbnail
| | 01:33 |
underscore container, now start the
parenthesis dot width, now set a
| | 01:38 |
parenthesis semicolon.
And one more, bar, thumbnail width.
| | 01:43 |
We're going to set that equal to.
Dollar sign, parenthesis, take mark's
| | 01:47 |
first turn literal, dot thumbnail
container, space a dot thumbnail, colon,
| | 01:55 |
first child, outside of the parenthesis,
dot outer width.
| | 02:03 |
Another set of parentheses, then a
semicolon.
| | 02:07 |
So now that we have the variables created
to check the width of the photos
| | 02:09 |
container, the thumbnail container and
the individual thumbnails.
| | 02:13 |
Next we'll calculate these together and
see if we need to run the position
| | 02:16 |
thumbnails function.
| | 02:17 |
| | Collapse this transcript |
| Calculating the sizes| 00:00 |
Now we need to calculate the sizes to see
if we need to reposition our thumbnails.
| | 00:04 |
Inside of the checkViewport custom
function after the variables.
| | 00:08 |
Let's hit a few Returns.
Let's start with the JavaScript
| | 00:11 |
conditional statement.
If, set of parentheses, brackets, split
| | 00:15 |
it open on the brackets.
Inside of the parenthesis what we want to
| | 00:21 |
do is, check for photo's width, and see
if this is less than
| | 00:24 |
thumbnailContainerWidth.
If it is, we want to run our position
| | 00:30 |
thumbnails function.
After that if statement let's come down
| | 00:34 |
and create another conditional statement.
So another if, parenthesis, brackets.
| | 00:41 |
Inside of the if statement we're going to
start photosWidth.
| | 00:44 |
Then we're going to subtract the
thumbnailWidth.
| | 00:46 |
Let's put that inside of parenthesis, so
that gets calculated first.
| | 00:51 |
Now, if the value of that is greater than
thumbnailContainerWidth.
| | 00:57 |
Lets come down here and lets run our
position thumbnails.
| | 01:00 |
So basically what's happening here, if
the photo's width is less then the
| | 01:04 |
thumbnail container, we know that we need
to reposition the thumbnails because they
| | 01:08 |
are now wider than the container.
And then we'll run the position
| | 01:12 |
thumbnails function.
And what were checking on the second
| | 01:15 |
conditional statement when the browser
gets wider.
| | 01:18 |
Is it the photos width minus the
thumbnail width is still greater than the
| | 01:21 |
thumbnail container we know that we can
fit another thumbnail on that row and if
| | 01:25 |
that's the case we'll run the position
thumbnails again.
| | 01:29 |
So now with our conditional statements in
place next we'll add a listening event or
| | 01:32 |
more technically a set interval inside of
our document ready.
| | 01:36 |
To see if we need to reposition the
thumbnails, based on the browser size.
| | 01:41 |
| | Collapse this transcript |
| Using a set interval to continually run the viewport function| 00:00 |
Now that we've completed our
checkViewport function.
| | 00:03 |
We need to run this a certain number of
times every second.
| | 00:05 |
So let's come up here after Position
thumbnails inside of the document ready.
| | 00:10 |
Let's hit a return.
Let's type setInterval, beginning and
| | 00:16 |
ending parentheses semicolon.
Inside of the setInterval, two tick marks
| | 00:21 |
for a string literal.
First, we're going to put in here the
| | 00:24 |
function we want to run.
Let's come down here and copy the
| | 00:29 |
checkViewport.
Let's paste that name, add in the
| | 00:33 |
parentheses, then a comma.
And then the interval of time, we want to
| | 00:37 |
wait each time we run this function.
Now, the thumbnails take half a second to
| | 00:41 |
animate, so we want to do something
that's more than half a second.
| | 00:45 |
So I'm going to put in 750, which is 3
4ths of a second.
| | 00:49 |
Let's hit Save.
Next, so that we can see when the
| | 00:52 |
calculations are being triggered, let's
come over to the sortable_gallery.css.
| | 00:57 |
Inside of here, after our clear both,
let's set a return.
| | 01:01 |
Let's create a rule called .photos.
Let's come in here and set a background
| | 01:09 |
color of #555, this is a dark gray.
Let's hit Save.
| | 01:14 |
And just like the other background
property, we' re going to remove this.
| | 01:16 |
But I do want to be able to see these as
we resize the browser, so we can see when
| | 01:19 |
our JavaScript is deciding to reposition
thumbnails.
| | 01:23 |
And then, lastly, let's come back to our
JavaScript file and let's add some
| | 01:26 |
information into our other debugging div.
So inside the checkViewport, after our
| | 01:32 |
two conditional statements, let's add in
our comment, called debug.
| | 01:37 |
And then let's come in here and let's set
the HTML here, to the sizes that we're
| | 01:42 |
calculating.
So let's start with the dollar sign
| | 01:47 |
parenthesis two tick marks, for string
literal, .debug-size.
| | 01:54 |
Outside of the parenthesis, .html
parenthesis and a semicolon.
| | 02:00 |
Inside the parenthesis, two tick marks
for string literal.
| | 02:06 |
Let's save photos with equals space.
Outside of the string literal, plus sign.
| | 02:20 |
Let's type in the photosWidth variable,
plus, two more tick marks for another
| | 02:28 |
string literal, thumbnailContainerWidth,
space equals space, then a plus sign.
| | 02:39 |
Let's come up here and copy the variable
name, and then hit Save.
| | 02:45 |
So in addition to seeing two different
color backgrounds, we're also going to
| | 02:48 |
see the mathematical calculations in our
debugging div.
| | 02:52 |
So with all of these in place, save all
your files.
| | 02:54 |
Let's come back out to the browser and
let's hit Reload.
| | 02:57 |
So here, we can see the darker gray as
the photosWidth container, the lighter
| | 03:00 |
gray is the thumbnailsWidth container.
And if we resize the browser, notice the
| | 03:05 |
darker gray gets a little bit wider, and
as soon as there's room for another
| | 03:08 |
column of thumbnails, the thumbnails will
reposition.
| | 03:12 |
Let's move these down.
Each time that gray box coming down hits
| | 03:18 |
the lighter gray box, the reposition
function happens.
| | 03:22 |
And if I open this up enough so that we
can see the debugging down here, we can
| | 03:26 |
also see the photo's width is 792 and the
thumbnail container width is 736.
| | 03:33 |
If I open this up, you can see the
threshold.
| | 03:35 |
When there's enough room for another
thumbnail, we'll reposition all of these
| | 03:38 |
items as well.
So now we have a JavaScript event that's
| | 03:41 |
running every three corners of a second,
which is changing the layout of our
| | 03:44 |
screen in addition to the media queries
which is changing our layout based on
| | 03:47 |
CSS.
Now, it is worth noting that jQuery does
| | 03:52 |
have a resize function built in.
However, this function runs for every
| | 03:56 |
single view port change, which means
every single pixel.
| | 04:00 |
So the checkViewport function that we
wrote would be running every time the
| | 04:02 |
pixel changes.
So if you were to resize your browser at
| | 04:05 |
the speed we're doing this here, you
could end up running that function 50
| | 04:08 |
times a second.
So instead, I opted for a setInterval,
| | 04:12 |
since most of the time users don't resize
their browser, and every 3 quarters of a
| | 04:15 |
second, we can have an animated
transition between the different screen
| | 04:18 |
sizes.
So now that our repositioning is working,
| | 04:22 |
next, we're going to set the sorting box,
so that the width of the sorting box
| | 04:25 |
matches the width of the thumbnails.
| | 04:27 |
| | Collapse this transcript |
| Setting the sorting box to match the thumbnail width| 00:00 |
Now, one thing you might notice in the
browser when we resize our layout that
| | 00:03 |
the width of the sorting box doesn't
match the width of the thumbnail.
| | 00:07 |
Because we do have a discrepancy between
when we can actually sort the thumbnails
| | 00:11 |
based on the amount of room in the
thumbnail container.
| | 00:14 |
So what we're going to do is use
JavaScript to calculate the new size of
| | 00:17 |
the sorting box so that the width of the
sorting box always matches the width of
| | 00:20 |
the thumbnails.
So to do this, let's come back to our
| | 00:24 |
JavaScript file.
Let's scroll down, inside of our Position
| | 00:28 |
thumbnails function.
Let's come down to the bottom.
| | 00:33 |
Before the end of the function, let's
create two new variables, the first one
| | 00:38 |
is going to be var sortingWidth.
We're going to set that equal to dollar
| | 00:44 |
sign parentheses, tick marks for string
literal, .thumbnail_Container.
| | 00:52 |
That's out of the parentheses, .width.
Then we're going to divide that by the
| | 00:58 |
thumbnailWidth.
Next variable.
| | 01:03 |
We're going to call this newWidth.
We're going to set that equal to the
| | 01:09 |
sortingWidth and multiply that by the
thumbnailWidth, and then subtract the
| | 01:14 |
global variable, window.thumbnailSpacing,
then a semicolon.
| | 01:20 |
Now that we've calculated that, we're
going to apply that to the div with the
| | 01:23 |
sorting class.
So next line, dollar sign, parentheses,
| | 01:27 |
tick marks for a string literal,
.sorting.
| | 01:31 |
Outside of the parentheses, .css, another
set of parentheses, semicolon.
| | 01:38 |
Inside of the parentheses, two tick marks
for string literal.
| | 01:42 |
We're going to set width, comma, the
newWidth, plus string literal px, then
| | 01:52 |
hit Save.
Let's come back to our browser.
| | 01:57 |
Let's hit Reload.
And now, we'll see that the sorting div
| | 02:01 |
now lines up exactly with the rightmost
thumbnail in our container.
| | 02:06 |
And as we go to different sizes, the
sorting div container will only resize
| | 02:11 |
when the thumbnails reposition.
And now that this is working as expected,
| | 02:16 |
let's come back to our scripts.
Let's come back to sortable_galler.css.
| | 02:22 |
Let's come in here and remove the photos
class to get rid of that background.
| | 02:25 |
And let's come up to the thumbnail
container, and let's get rid of the
| | 02:29 |
background color with #777.
Let's hit save, let's come back out and
| | 02:36 |
hit reload.
So now that our gallery is sortable and
| | 02:40 |
responsive, next, we're going to apply
the Lightbox.
| | 02:42 |
| | Collapse this transcript |
|
|
9. Applying the Lightbox to the LinksAdding a custom class to the lightbox links| 00:00 |
Now to activate the lightbox, we need to
add a class to all of the thumbnails.
| | 00:04 |
So back in the javascript file, let's
scroll up to the top.
| | 00:07 |
Inside of the document ready, on the line
where we add the showme class to all the
| | 00:11 |
thumbnails, let's get our cursor after
the parentheses for the add class.
| | 00:16 |
Let's type .add class again, another set
of parenthesis, inside string literal,
| | 00:26 |
type fancybox.
Then we're going to add another
| | 00:30 |
attribute.
We want to have the lightbox be able to
| | 00:33 |
show us all of the subsets of photos, so
we can use the built-in slide show.
| | 00:37 |
So we'll type .attr, another set of
parentheses.
| | 00:41 |
Inside, we're going to set an attribute
of rel for relationship, then a comma,
| | 00:47 |
two more tick marks.
The value will be group.
| | 00:53 |
So let's come in here and copy the
attribute.
| | 00:59 |
Let's scroll down.
Inside of our sort thumbnails, let's find
| | 01:03 |
the if keyword equals all.
After the add class show me, remove class
| | 01:07 |
hide me.
Let's come in here and paste the
| | 01:11 |
attribute again.
Now down inside of our nested conditional
| | 01:14 |
statement, if we're adding the class
showme, let's paste this one more time.
| | 01:19 |
And on the l statement here, let's paste
this.
| | 01:22 |
And instead of group, let's set this to
none.
| | 01:26 |
So now, we have the fancy box class added
to all of the thumbnails.
| | 01:29 |
And then we're also adding an attribute
called relationship.
| | 01:31 |
And we're setting that to either group or
none, depending on whether the keywords
| | 01:34 |
in the thumbnail match the sorting link.
And now with these in place, next we'll
| | 01:39 |
write a custom function to detect all of
the links and activate the fancy box.
| | 01:43 |
| | Collapse this transcript |
| Creating a custom function to detect lightbox links| 00:00 |
Next, we're going to create another
custom function.
| | 00:02 |
So let's scroll down in our JavaScript
file.
| | 00:04 |
Let's scroll down past the position
Thumbnails function.
| | 00:09 |
After that function, let's hit a few
returns.
| | 00:11 |
Let's add another function.
Let's call this detectFancyboxLinks(){}.
| | 00:19 |
Split this open on the brackets.
Now, inside here, what we want to do is
| | 00:23 |
search for all of the thumbnail links.
So we'll start with the dollar sign,
| | 00:27 |
parenthesis, string literal inside.
We're going to search for a.fancy box.
| | 00:32 |
Then we're going to put in two square
brackets and we also want to search for
| | 00:36 |
an attribute, a relationship, and we
want to see if that equals group.
| | 00:40 |
So rel equals, two sets of double quotes.
Look for group.
| | 00:47 |
That's out of the parentheses.
We'll run the fancy box plug-in function,
| | 00:51 |
which is .fancybox.
Another set of parentheses, semicolon.
| | 00:56 |
Inside of the parentheses, beginning and
ending bracket.
| | 00:59 |
Let's split this open on the brackets.
Inside of the brackets we want to set all
| | 01:04 |
of our different parameters.
So the properties we're going to set
| | 01:08 |
inside of the fancy box function.
We're going to start with transitionIn,
| | 01:12 |
space colon, we're going to set that to
elastic.
| | 01:17 |
Next is going to be transitionOut.
Set that to elastic as well.
| | 01:21 |
Next, we'll set titlePosition.
This is going to pick up the title
| | 01:24 |
attribute from the anchor tag and use
that as a caption.
| | 01:27 |
We're going to set that to over.
Next is speedIn, we're going to set that
| | 01:29 |
to 500 or half a second.
Overlay color, we're going to set this to
| | 01:33 |
black, pound sign, and three zeros.
So the padding to zero.
| | 01:42 |
And then, overlay opacity, we're going to
set that to .75.
| | 01:46 |
And make sure you don't have a comma
after the last property here.
| | 01:49 |
Now, if you're curious, you can look
under the fancy box documentation to see
| | 01:52 |
additional properties that you can set
inside of here.
| | 01:56 |
But now that we have our detect fancy box
function, let's come up here and copy the
| | 01:59 |
function name.
Let's scroll up.
| | 02:02 |
Now, inside of the position thumbnails
function, we want to make sure that we're
| | 02:06 |
outside of the each statement where we're
searching for all of the individual
| | 02:09 |
showMe classes.
And then after that function, let's come
| | 02:14 |
in here and paste our
detectFancyboxLinks.
| | 02:17 |
Now, with that in place, let's come back
out.
| | 02:18 |
Let's check this in a browser.
So now if I come in here and click on any
| | 02:22 |
one of these items, I'll click on the
carousel horse, this will activate the
| | 02:25 |
Lightbox.
I can see the caption down here.
| | 02:28 |
And also notice, if I go to the right or
left, I can see these little icons here
| | 02:31 |
which will bring me to the next item in
the gallery, so our users don't have to
| | 02:35 |
close this and activate another Lightbox
window.
| | 02:40 |
You'll also notice that when I'm on the
carousel horse, when I go to the left or
| | 02:43 |
to the previous image, we have a piture
here of the ferry building.
| | 02:48 |
If I close this, sort on sculpture, now,
if I click on the carousel horse and I go
| | 02:52 |
to the left or to the previous picture.
We don't see the ferry building, because
| | 02:58 |
we've now sorted the gallery on
architecture.
| | 03:00 |
Now the previous image is of the
sculpture.
| | 03:03 |
So again, the gallery and the Lightbox
and are now sensitive to the sorting
| | 03:06 |
criteria.
And now, with this in place, we'll remove
| | 03:09 |
the Lightbox links when we're on small
screens.
| | 03:12 |
| | Collapse this transcript |
| Removing the lightbox for small screens| 00:00 |
So now that we have our Lightbox enabled,
this is not going to be the optimal user
| | 00:03 |
experience on a small screen.
So to demonstrate this, I want to bring
| | 00:06 |
up a small screen device.
So here, we can see we have our small
| | 00:09 |
screen working and resizing.
But if I come in here and tap on one of
| | 00:12 |
the links, what you'll see is the
Viewport that Fancybox is using to
| | 00:15 |
determine the size of the Lightbox is not
going to be very large.
| | 00:20 |
And in some cases, it's not going to be
much larger than the actual thumbnail.
| | 00:24 |
So in cases of a really small screen,
what we're going to do is remove the
| | 00:27 |
Lightbox altogether, and let the device
show us the Native JPG file in a new
| | 00:30 |
window.
This will also allow users to pinch and
| | 00:33 |
tap on the photographs as well.
So to do this, let's come back to our
| | 00:37 |
JavaScript file.
Let's come down to the detectFancybox
| | 00:40 |
function.
So what we're going to do down here,
| | 00:43 |
let's hit a few returns.
And we're first going to remove all of
| | 00:46 |
the Fancybox links from all of the
thumbnails when we first run this
| | 00:49 |
function.
So, we'll start with a dollar sign,
| | 00:52 |
parentheses, tick marks inside for a
string literal.
| | 00:55 |
We'll type a.fancybox.
Outside the parenthesis, we're going to
| | 01:00 |
type .unbind, a set of parentheses,
semicolon.
| | 01:06 |
Inside of unbind, string literal, type
click.fb.
| | 01:10 |
This is a built-in Fancybox function
which will remove all of the Fancybox
| | 01:14 |
links that we've run in previous
detections.
| | 01:19 |
Next line, we're going to add a
conditional statement here.
| | 01:31 |
Start with an if, parentheses, brackets,
inside of the parentheses for if, dollar
| | 01:34 |
sign parentheses.
We're going to look for window inside of
| | 01:37 |
the parentheses, .width.
Beginning any parenthesis, less than 550
| | 01:45 |
pixels.
Inside of the if, dollar sign
| | 01:49 |
parentheses, string literal.
We're going to search for
| | 01:53 |
.thumbnail_container space a.thumbnail.
Outside of the parenthesizes, .remove
| | 02:01 |
class, parenthesis string literal,
Fancybox.
| | 02:06 |
And next, we're going to add an
attribute, so that all of the links will
| | 02:12 |
open in a new window.
So attr parentheses, semicolon.
| | 02:20 |
Inside, we're going to set target comma
underscore blank.
| | 02:27 |
Next, we'll add an else to this
condition.
| | 02:31 |
Inside of the else statement, dollar sign
parentheses, string literal,
| | 02:36 |
thumbnail_container, space a.thumbnail.
Outside of the parenthesis, .remove, attr
| | 02:44 |
for remove attribute, parenthesis,
semicolon.
| | 02:51 |
Inside of the parenthesis, two tick marks
for string literal.
| | 02:53 |
We're going to remove target.
So again, what's happening here, is, when
| | 02:58 |
we run the detectFancybox function.
We're going to remove all instances of
| | 03:02 |
click events that have been assigned
previously.
| | 03:05 |
Then we're going to check the window
width, and if it is less than 550 pixels,
| | 03:08 |
we're going to remove the Fancybox class
and add a target of blank.
| | 03:13 |
So that, each time we click a link, it
will go to a new window on the device.
| | 03:17 |
And if the window is greater than 550,
we'll remove that target.
| | 03:20 |
Then once this part's complete, we'll
detect all of the Fancybox links that are
| | 03:23 |
in existence and then activate the
Lightbox for those.
| | 03:26 |
So if we are over 550, we will not have
removed the Fancybox class, and then, all
| | 03:31 |
of these links down here can be
activated.
| | 03:35 |
So to test this, let's come back out to
our browser.
| | 03:36 |
Let's hit Reload.
Now, our window is wider than 550 pixels,
| | 03:41 |
so if I click these links, this will
invoke the Fancybox.
| | 03:47 |
If I grab my browser and drag this down
below 50.
| | 03:49 |
Now, as I come in here and click on the
thumbnails, there going to open in a new
| | 03:52 |
browser window pointed directly to the
high-res JPEG file.
| | 03:56 |
So next, let's go test this on a device,
because this is where we want to see the
| | 04:00 |
user experience change.
So back on my device, I'm just going to
| | 04:04 |
reload this screen.
Now, when I come in here and tap on one
| | 04:07 |
of the links, it's going to open a new
browser window.
| | 04:11 |
I can come in here and pinch, move
around.
| | 04:14 |
And then depending on the device, I can
hit the Back button, or in this
| | 04:17 |
particular OS, I can go back to my
multi-windows and go back to my original
| | 04:20 |
gallery.
Now, for your project, you can experiment
| | 04:24 |
with how your gallery works on different
devices and screen sizes, and you can
| | 04:27 |
choose to enable or disable this
particular feature based on screen size.
| | 04:32 |
And now that we have this in place, next,
we're going to get rid of all of the
| | 04:34 |
debugging code so we can finalize our
layout.
| | 04:37 |
| | Collapse this transcript |
| Removing debug code| 00:00 |
Now the last thing were going to do, is
get rid of those debugging codes that we
| | 00:03 |
have.
So in the java script file, let's scroll
| | 00:05 |
up.
Every time that we've set one of our
| | 00:07 |
debugging divs, we've put this comment in
here which helps us find these quicker.
| | 00:11 |
So you can either remove these lines, or
you can simply put two forward slashes
| | 00:14 |
before the statement.
So you're going to come in here and
| | 00:18 |
comment all three of these.
Once those are in place, let's come back
| | 00:25 |
to our index, that HTML file.
Let's scroll down to the bottom.
| | 00:30 |
Down here we have the two divs here as
well.
| | 00:31 |
So again you can either just delete
these.
| | 00:33 |
Or you can put a comment in here.
To do an HTML comment we start with a
| | 00:38 |
beginning tag, exclamation point.
Two hyphens, and then after the divs, two
| | 00:43 |
hyphens and end the tag.
And now with these lines either commented
| | 00:47 |
out or deleted, let's save all of our
files, let's come out to our browser for
| | 00:51 |
one final test.
Now at this point we've completed our
| | 00:54 |
sortable gallery, which also features
responsive design and responsive
| | 00:58 |
experience.
Next we'll talk about where you might
| | 01:01 |
want to go from here.
| | 01:02 |
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 |
Now that you've completed Creating a
Sortable Photo Gallery for Your Website,
| | 00:03 |
I have a whole series of additional
courses on lynda dot com that cover step
| | 00:06 |
by step processes for creating
interactive experiences, things like
| | 00:09 |
drop-down menus, rotating carousels, and
interactive home page marquees.
| | 00:15 |
And I also have a course on creating an
HTML5 video player.
| | 00:18 |
And what's interesting about this course
is in chapter six we talk about how to
| | 00:21 |
detect for IOS and android devices.
So if you want to keep the light-box
| | 00:25 |
effect on the computer at all times and
only change it for certain handheld
| | 00:28 |
devices this course will show you a
technique for detecting specific devices,
| | 00:31 |
and with that that completes Creating a
Sortible Gallery for Your Website, and I
| | 00:34 |
really appreciate you watching my course.
| | 00:39 |
| | Collapse this transcript |
|
|
