IntroductionPreviewing the project across browsers and devices| 00:04 | I'm Chris Converse, and this is a
course on creating an interactive homepage
| | 00:07 | marquee for your website.
| | 00:09 | I want to start by first showing the
final project that we're going to be creating.
| | 00:13 | Inside of the downloadable assets,
inside of Final Project, I'm going to open
| | 00:17 | the index.html file, opening
this up inside of a Web browser.
| | 00:22 | What we have here is a preload on
our project that we'll go through, and
| | 00:27 | download all the images and
make sure they're all loaded.
| | 00:29 | Once it's loaded, the image will fade
up and our caption will slide into place.
| | 00:33 | We have these buttons down here that will
automatically generate based on the HTML markup.
| | 00:38 | As I click to links, the photos will
sort of slide back and forth, the caption
| | 00:41 | will move down, out of the way,
change the content and then slide back up.
| | 00:44 | Now, this entire experience is built using
nothing more than HTML, CSS, and JavaScript.
| | 00:51 | We've also used an open
source framework called jQuery.
| | 00:54 | One of the advantages of using an open
source framework is that we can have the
| | 00:57 | same user experience happen across all
different platforms and browser types.
| | 01:01 | So here we're going to go all the way
back to Windows XP, going to take the same
| | 01:04 | index file, let's load
this into Internet Explorer 7.
| | 01:08 | We do need at least IE7, so that we can
have the transparency in the caption area here.
| | 01:17 | Likewise, let's jump over to Windows 7
and let's take a look at the same project
| | 01:21 | running in IE9 which
shipped just a few weeks ago.
| | 01:23 | Click on the buttons, photos slide,
all the transparency is in place.
| | 01:32 | In addition, we can also look at our
project running across different devices as well.
| | 01:36 | So if we take a look over at the
Android platform, I'm going to come in here to
| | 01:40 | Google on the Android platform, mobile
phone, take a look at the same project.
| | 01:44 | I'm going to hold Ctrl+F11 to rotate
this device, tap and move this around.
| | 01:52 | I can tap on the individual pieces
here and get the same effect on a phone.
| | 01:58 | Then likewise, running the same project
inside of an iPad Simulator, I will hold
| | 02:05 | Command+Arrow key to rotate this device.
| | 02:07 | I can tap on these, and see these
have same user experience again.
| | 02:12 | One of the other features that we're going to
be building into this particular project
| | 02:17 | is these captions are going to be
dynamic, so that regardless of how much
| | 02:20 | content is inside of the caption area,
we will calculate that using JavaScript
| | 02:25 | and jQuery to figure out where the
caption needs to move as our content grows.
| | 02:29 | So I'm going to take the index file,
open it up in a text editor, and I'm
| | 02:34 | going to quickly come in, and take
the content from the second caption, and
| | 02:40 | just add two more sets of content here,
so I've basically tripled the size of
| | 02:44 | this particular object.
| | 02:46 | Let's go back to our browser, let's hit Reload.
| | 02:48 | Now, when I go to Slide 2, the content
is going to slide up two-thirds taller to
| | 02:54 | accommodate all the different
content and then slide back down.
| | 02:58 | In addition, the HTML, when it gets
initialized is going to count, using jQuery,
| | 03:03 | the number of panels that we need as well.
| | 03:05 | So I can add or remove panels by simply
adding or removing HTML in our source document.
| | 03:09 | So I hope this project sounds interesting.
| | 03:11 | And if so, let's get
started with the first chapter.
| | Collapse this transcript |
| About the exercise files| 00:00 | Now, when you download the Exercise
Files, in addition to a copy of the Final
| | 00:03 | Project that we looked at in the
introduction video, there's also a folder
| | 00:06 | called Art Templates.
| | 00:08 | Inside of Art Templates,
there's a folder for Photoshop Files.
| | 00:10 | These have pre-sliced Photoshop
graphics and the photography we're going to
| | 00:13 | use for our marquee.
| | 00:14 | There's another folder called Files to Add.
| | 00:17 | We're going to be adding in copies of
jQuery and a copy of the farinspace plugin
| | 00:21 | that we got permission from, from Dimas
Begunoff to include in these assets, and
| | 00:25 | lastly, a snippets file that has some
HTML that will sort of save us some time
| | 00:29 | in putting the individual
panels into our HTML markup.
| | 00:33 | So once you have the Exercise Files
downloaded, in the next movie, we'll start
| | 00:36 | by creating the folders that
are going to hold our project.
| | Collapse this transcript |
|
|
1. Creating Project FoldersCreating folders for the project| 00:00 | To begin our project, we're going
to create a folder on the desktop.
| | 00:03 | We're going to call this myMarquee.
| | 00:10 | Inside that folder, we're going to
create some additional folders, let me
| | 00:13 | resize this for a moment.
| | 00:15 | Inside of myMarquee, we're going to
create a folder called images, another
| | 00:22 | folder called includes, another folder
called template, and another one called photos.
| | 00:31 | Then, we're going to take the photos,
and template folder, and put them inside
| | 00:34 | of the images folder.
| | 00:37 | And for the includes folder, let's
come back to the Exercise Files and let's
| | 00:40 | open inside of Art Templates, folder
number 2 called Files to Add, open up
| | 00:45 | includes, and let's grab a copy of the
farinspace plugin, the jQuery plugin, and
| | 00:50 | a copy of marquee.css.
| | 00:53 | Let's Option+Drag a copy of
these into the includes directory.
| | 00:56 | This marquee CSS file will
give us a jumpstart on the layout.
| | 00:59 | Since the focus of this course is
really on creating the actual marquee, I've
| | 01:02 | gone ahead and created some of the CSS
that we can hook on to the HTML to get
| | 01:06 | the layout portion out of the way.
| | 01:07 | So now that we have all of the folders
and files in place for our project, in
| | 01:11 | the next movie, we'll start by creating
the graphics from Photoshop that go into
| | 01:14 | the images directory.
| | Collapse this transcript |
|
|
2. Preparing Web GraphicsExporting graphics from Photoshop| 00:00 | To create the graphics for our project,
let's come back to the Exercise Files.
| | 00:03 | Let's go into Art Templates folder,
let's go into folder number 1, Photoshop
| | 00:06 | Files, and let's open flags.psd in Photoshop.
| | 00:09 | Once this opens, I'm going to open the
window up here a little bit and zoom in.
| | 00:12 | So I already have slices saved
over top of each one of these flags.
| | 00:16 | You can get to the Slicing tool by
coming over to the Tool panel and coming
| | 00:19 | under the Cropping tool
down to Slice Selection tool.
| | 00:22 | This allows me to double-click
on a slice and see the properties.
| | 00:24 | So in this case, I see
this is the flag for England.
| | 00:28 | Double-click this one.
| | 00:29 | This is the flag for Italy.
| | 00:32 | Since the slices are already in place,
let's come up to the File menu, choose
| | 00:35 | Save for Web & Devices.
| | 00:38 | Once this dialog box comes up here, I
can also click the slices and see the
| | 00:41 | compression settings.
| | 00:43 | Each of the flags is being set to
a JPEG file with a quality of 80%.
| | 00:47 | From this dialog box, let's
come down and choose Save.
| | 00:50 | Under the Slices, we want
to choose All User Slices.
| | 00:52 | This means any slice that we've
actually created in the file will be saved and
| | 00:56 | all of the other slices will be ignored.
| | 00:57 | For the destination, let's choose
Desktop/myMarquee/images directory, and
| | 01:04 | let's pick template. Click Save.
| | 01:07 | Once that's saved, let's close that
Photoshop file, let's go back to the OS and
| | 01:11 | we can see all of the individual
flags in the template directory now.
| | 01:13 | Next, let's go back to the
Exercise Files, let's open nav_buttons.
| | 01:17 | I'm going to zoom up on this as well.
| | 01:21 | This graphic is actually going to be
used as a CSS Sprite, meaning that we're
| | 01:24 | going to have one graphic and we're
actually going to move the graphic side to
| | 01:27 | side based on the user interaction
and these are going to be the navigation
| | 01:30 | buttons that we looked at
in the introduction video.
| | 01:33 | So over in the Layers panel,
let's turn on the rollover layer.
| | 01:35 | Now, with the rollover layer turned on,
what I want to have happen is that
| | 01:39 | yellow color, I want it to
be clipped into the circle.
| | 01:41 | Let's come up to the Layer menu and let's
come down and choose Create a Clipping Mask.
| | 01:45 | This will make all of the artwork on the
rollover layer clipped into the layer underneath;
| | 01:49 | in this case, the circles.
| | 01:51 | And then lastly let's turn on the dots
layer, select our Move tool, and put the
| | 01:56 | dot right in the center of the circle.
| | 01:58 | Before we save this out,
let's turn off the f.p.o layer.
| | 02:02 | Then, we'll choose Save for Web & Devices.
| | 02:03 | We're going to save this out
as a PNG-24 with Transparency.
| | 02:10 | Click Save, we're going to put this into the
template directory as well, then click Save.
| | 02:15 | Once that's done, we can
close and save that file.
| | 02:18 | Next, let's open marquee_caption.psd.
| | 02:21 | This is simply a tab that's got
rounded corners and it's semitransparent.
| | 02:23 | We're going to save this for Web &
Devices, 24-bit PNG, put it in the
| | 02:31 | template folder, hit Save.
| | 02:35 | And then lastly, we're going to open photos.psd.
| | 02:38 | Now, inside of photos.psd, we have
the different photograph on each of
| | 02:41 | the individual layers.
| | 02:43 | But, instead of saving out each of these
individually, we're going to come up to
| | 02:46 | the File menu, come down to Scripts,
and choose Export Layers to Files.
| | 02:52 | Once this comes up, under destination,
let's choose Browse/Desktop/myMarquee,
| | 02:58 | images, we'll pick the
photos directory, click Open.
| | 03:03 | For File Type, let's come down and choose
JPEG, Quality is 8, no ICC color profile.
| | 03:09 | Then, we're going to click Run.
| | 03:10 | Photoshop will then activate each layer,
save out a copy as a JPEG file, and
| | 03:17 | then, back in the operating system, we
can see in the photos directory a copy of
| | 03:20 | each one of the photographs.
| | 03:21 | One of the things we can't change is the
fact that Photoshop will number each of
| | 03:24 | the layers on export.
| | 03:25 | So what we can do here is come in and
simply rename these to take the number
| | 03:29 | off of the beginning.
| | 03:30 | So now that we have all of the
graphics in place, in the next movie, we'll
| | 03:33 | go into Aptana Studio, create a
new project and create our HTML and
| | 03:36 | JavaScript files.
| | Collapse this transcript |
|
|
3. Creating HTML MarkupDownloading and setting up Aptana Studio| 00:00 | In this course, we're going to be
coding in a tool called Aptana Studio.
| | 00:03 | You can follow along with any text or
a Web editor that you choose, or if you
| | 00:07 | want to download a free copy of
Aptana Studio, you can go to aptana.com and
| | 00:11 | download a copy for Macintosh or Windows.
| | 00:13 | When you download and install this
particular editor, one of the things that it
| | 00:17 | has is the capability to change themes.
| | 00:20 | By default, Aptana Studio 3
has this really dark background.
| | 00:24 | I'm going to come up to the Aptana
Studio 3 menu on the Mac, or you can choose
| | 00:28 | the Preferences under
the Window menu on Windows.
| | 00:31 | Come down to Aptana, come down to Themes,
and inside of here, I can change the
| | 00:37 | themes that this is going to be using.
| | 00:39 | For this course, I'd like to go back to
Aptana Studio 2.x. This is going to give
| | 00:43 | me a white background and it's going to
let the color-coding really show and be
| | 00:46 | a lot easier for you to follow along.
| | 00:47 | Once I have made this
change, I'm going to click OK.
| | 00:51 | Now every time I launch Aptana Studio,
it's going to use this particular theme
| | 00:54 | instead of the darker background.
| | 00:55 | Now that we have our editor set up, in
the next movie we're going to start by
| | 00:59 | creating a new project and continuing on.
| | Collapse this transcript |
| Creating HTML and JavaScript files| 00:00 | Now we're ready to create a brand
new project in Aptana Studio, so let's
| | 00:03 | move over to Aptana.
| | 00:05 | Now this course is also being offered
using Adobe Dreamweaver, so if you prefer
| | 00:08 | a more visual tool, you can find this
same course in the Lynda.com Library using
| | 00:11 | Dreamweaver inside of Aptana Studio.
| | 00:13 | Now the first thing we're going to
do in Aptana is create a new project.
| | 00:16 | So let's go to the File
menu, choose New > Web Project.
| | 00:23 | We'll call this myMarquee.
| | 00:26 | Let's uncheck Use default location.
| | 00:28 | Let's click Browse > Desktop, and let's pick
the myMarquee folder we created on the Desktop.
| | 00:35 | Click Open.
| | 00:36 | This warning here is Aptana's way of
just letting us know that there are files
| | 00:39 | in that particular folder.
| | 00:41 | Let's click Finish and then in the left-
hand side here, we'll see all of the
| | 00:45 | files that were in there before
we created the project from Aptana.
| | 00:47 | Now the first file we need to
create is going to be our HTML file, so
| | 00:52 | let's choose File > New From
Template > HTML, and let's choose XHTML
| | 00:57 | Transitional Template.
| | 00:58 | We want this file to work all
the way back to IE7 and IE8.
| | 01:02 | Right away, let's choose File > Save As.
We'll call this marquee.html and let's
| | 01:10 | save this in the myMarquee folder and click OK.
| | 01:17 | Let's create our JavaScript
file, let's choose File/New From
| | 01:20 | Template/JavaScript/JavaScript Template,
and then right away, let's save this.
| | 01:27 | Let's choose Save As and let's put
this into the Includes directory.
| | 01:35 | We'll call this marquee.js, then hit OK.
| | 01:39 | Now we need to hook in our CSS and
JavaScript files into our HTML file.
| | 01:43 | Let's come back to marquee.html, let's
get our cursor after the title tag, let's
| | 01:48 | hit a Return, and let's start by
creating a link to our CSS file.
| | 01:52 | So let's start with our link tag,
<link rel--for relationship--="stylesheet"
| | 02:03 | type="text/css" href="includes/marquee.css"/>.
| | 02:17 | Next line, let's add a script tag.
| | 02:28 | <script type="text/
javascript" src
| | 02:33 | We're going to set the source=
"includes--and the first JavaScript file
| | 02:41 | we need to bring in is jQuery since the
plugin for farinspace and our JavaScript
| | 02:45 | is going to hook on to jQuery.
| | 02:46 | jQuery has to be brought in first.
| | 02:49 | Next line, another script tag, <script type=
"text/javascript"src--we're
| | 03:00 | going to set this one equal to ="includes/
farinspace/--and let's bring in the minified version.
| | 03:13 | And then lastly, <script type="text
/javascript" src=
| | 03:22 | includes/--and let's bring in the
marquee.js file which is going to be the one
| | 03:28 | we're going to do our scripts inside of.
| | 03:30 | Then, hit Command+S or
Ctrl+S to save your document.
| | 03:33 | Now that we have our HTML and
JavaScript files created and we have the CSS and
| | 03:37 | JavaScript hooked into the HTML, in
the next movie, we'll work on the HTML
| | 03:40 | markup for the project.
| | Collapse this transcript |
| Creating HTML for the container| 00:00 | Now, the markup that we're going to
create first is going to be for the
| | 00:02 | outermost containers.
| | 00:04 | So inside of the body area, let's hit a
return, let's tab in and let's start by
| | 00:08 | creating our outermost div container.
| | 00:10 | So we'll do <div class.
| | 00:12 | We're going to set class="ma and
Aptana will bring up a code list
| | 00:17 | of all of the CSS rules in that marquee
CSS file we added, that start with ma.
| | 00:21 | We want to come down and choose "marquee_
container," hit Return, then let's end the div tag.
| | 00:27 | Then let's split the div tag open,
inside of marquee_container the first item is
| | 00:34 | going to be another <div class
"marquee_photos"
| | 00:39 | Let's come down and select photos.
| | 00:42 | Let's end that div tag.
| | 00:43 | Next line, let's start another div tag.
| | 00:50 | <div class="marquee_caption"
let's end that div.
| | 00:57 | Next, another div tag.
| | 01:00 | This one is going to be set to marquee_nav.
<div class="marquee_nav"
| | 01:04 | Let's end that div tag and then
let's get inside of marquee_caption.
| | 01:08 | Let's split that open and inside
of marquee_caption, add another div.
| | 01:13 | <div class="marquee_caption content"
hit Return, end that div.
| | 01:21 | And then lastly, outside of the marquee_
container altogether, let's add another div.
| | 01:25 | We're going to set that equal to class.
<div class=
| | 01:30 | This is going to be "marquee_
panels" and then end that div tag.
| | 01:34 | marquee_panels is where we're going to
put all of the content that's going to be
| | 01:37 | hidden from the browser with CSS, and
that's where we're going to actually pull
| | 01:40 | our data from with JavaScript to
populate it into the marquee_container area.
| | 01:44 | So now, let's split open the marquee_panels div.
| | 01:51 | Let's choose File > Open File, from the
Desktop, from the Exercise Files, let's go
| | 01:58 | into Art Templates, let's open snippets.html.
| | 02:01 | So, what we're going to
do here is do Select All.
| | 02:04 | Then, we're going to come in here
and choose Copy under the Edit menu.
| | 02:09 | Let's come back to marquee.html and inside
of the marquee_panels div, let's hit Paste;
| | 02:15 | Command+ or Ctrl+V. And now with all
of the HTML markup in place, in the next
| | 02:19 | movie, we'll start writing our
scripts inside of the marquee.js file.
| | Collapse this transcript |
|
|
4. Dynamically Generating Marquee ElementsSetting up the document.ready script| 00:00 | Now, to start writing our
JavaScript and jQuery statements,
| | 00:02 | let's come up to marquee.js.
| | 00:06 | So inside of here, I'm going to add a
few line returns, and the first thing
| | 00:08 | we're going to do is create our document ready.
| | 00:10 | So let's start with a $()
| | 00:12 | I'll type document.
| | 00:16 | Outside of document, we'll type .ready();
| | 00:23 | inside of the parentheses for ready,
we're going to type function(){}.
| | 00:29 | Let's split that open.
| | 00:30 | So once all of our document data has
been loaded, the first thing we want to
| | 00:34 | do is create a photo lineup by going,
and finding all of the photographs, and
| | 00:37 | all of the panel divs and putting them into
the photo div inside of the marquee container.
| | 00:42 | So, to begin that process, let's
type $()''
| | 00:47 | tick marks
inside for a string literal.
| | 00:50 | We want to go search for img.marqee_panel_photo;
| | 01:00 | so any image tag that has the
marquee_panel_photo class assigned to it.
| | 01:04 | Outside of the parentheses,
we're going to type .each();
| | 01:11 | inside of each, we're
going to type function(){}.
| | 01:17 | Let's split that open.
| | 01:18 | Now, before we run our instruction
for each item that we find, let's bring
| | 01:23 | our cursor back inside of the parentheses
for function, and let's type the word index.
| | 01:29 | What this will do is make sure that
jQuery counts each item that's found and
| | 01:33 | assigns it an incrementing value.
| | 01:36 | So the first thing we're going to do
inside of this instruction, we're going to
| | 01:39 | start by creating our own variable, photoWidth.
| | 01:43 | We're going to set that = $()
| | 01:49 | tick marks inside for a
string literal, .marquee_container.
| | 01:57 | Outside of the parentheses, .width();.
| | 02:03 | So the photoWidth variable is going
to be set to whatever the width of the
| | 02:06 | marquee container is.
| | 02:08 | This way, if we ever change the width
of the container with CSS, we won't have
| | 02:11 | to go back and change the
JavaScript function as well.
| | 02:15 | On the next line, let's create second variable.
| | 02:22 | This one is going to be called photoPosition.
| | 02:23 | We're going to set photoPosition =
=index * --let's come
| | 02:34 | up here and copy photoWidth variable
name, paste it, then hit the semicolon.
| | 02:42 | So we're going to multiply the incrementing
value of index times the width of the photo.
| | 02:47 | This is going to give us our photo lineup.
| | 02:48 | Now, with these two variables in
place, in the next movie, we'll actually
| | 02:52 | write some HTML that gets injected
into the photo div based on the values of
| | 02:56 | these variables.
| | Collapse this transcript |
| Inserting photos into the marquee container| 00:00 | Now with our two variables declared,
let's hit a few line returns inside of
| | 00:03 | here, and we want to inject some
HTML inside of the marquee_photos div.
| | 00:08 | So let's start by typing dollar sign,
parentheses, tick marks inside for a
| | 00:13 | string literal, .marquee_photos.
| | 00:19 | Outside of the parentheses, we're
going to type .append();, inside of append,
| | 00:26 | two tick marks for a string literal.
| | 00:28 | Let's start by typing an image tag,
image, forward slash, and the tag.
| | 00:35 | Inside of the image tag,
let's add our attributes.
| | 00:36 | First one is going to be class,
equals, two quotes, marquee_photo.
| | 00:48 | Outside of class, next
attribute, style, equals, two quotes.
| | 00:53 | Inside, we're going to say left:
x;. Next, source, equals, quotes.
| | 01:03 | Let's put a letter x in there as well;
| | 01:06 | alt, equals, quotes, put a letter x.
Next attribute, width, equals, quotes, 700.
| | 01:18 | Next attribute, height, equals, quotes, 350.
| | 01:21 | So now, for each marquee_panel_photo
that's found as a class on an image, this
| | 01:29 | each function is going to run,
calculate these variables, and then we're going
| | 01:32 | to put an image tag inside of
marquee_photos matching that.
| | 01:34 | Now, each image tag has to have unique
properties set, which is why we calculated
| | 01:40 | these variables up above.
| | 01:41 | So the first thing we're going
to do is set the left property.
| | 01:44 | So let's come up here and copy
photoPosition to the clipboard, under style,
| | 01:50 | let's select that letter x we put in
as a placeholder. Let's delete it.
| | 01:54 | Put two single tick marks for a string literal.
| | 01:57 | Inside of the tick marks, two plus
signs, and then paste in photoPosition.
| | 02:01 | So here, we're concatenating the
value of photoPosition in each one of the
| | 02:06 | image tags that we're writing into marquee
panels as the value of the CSS style property left.
| | 02:11 | Next, let's come over to the source x here.
| | 02:15 | Two tick marks inside of here for
a string literal, two plus signs.
| | 02:19 | We want to go grab this source
attribute from the original item found.
| | 02:23 | So inside of here, we're going to type
dollar sign, parentheses, this, outside
| | 02:28 | of the parentheses attr for attribute,
beginning and ending parentheses, tick
| | 02:34 | marks inside of the attribute,
parentheses for a string literal.
| | 02:37 | Type src, so again, the original source
attribute of the item found is going to
| | 02:42 | be assigned to be the value of this
source attribute that we're injecting into
| | 02:45 | the marquee_photos div.
| | 02:47 | For alt, let's come over here and
select and delete the x for the alt, two tick
| | 02:52 | marks for a string literal, two plus
signs, dollar sign, parentheses, this,
| | 03:00 | .attr, beginning and ending parentheses,
tick marks inside for a string literal.
| | 03:05 | Type alt, so the alt text that was on
the original item will now be placed as
| | 03:09 | the value of this alt item, and then
after this instruction, let's hit a Return.
| | 03:14 | Let's start a new instruction.
| | 03:17 | Dollar sign, parentheses, tick marks
for a string literal, .marquee_photos.css,
| | 03:30 | beginning and ending parentheses, semicolon.
| | 03:33 | Inside of the parentheses, two
tick marks for a string literal, set
| | 03:38 | width outside of the tick marks for
the string literal, but still inside
| | 03:41 | of the parentheses, comma.
| | 03:44 | Let's come up and copy photoPosition.
| | 03:46 | Let's come down here.
| | 03:49 | Let's hit Paste, photoPosition, plus,
let's come up here and grab photoWidth.
| | 03:55 | Let's come down here and hit Paste.
| | 04:00 | So what this script is doing is
making sure that the width of the overall
| | 04:03 | marquee_photos is wide enough to
accommodate all of the images that we just
| | 04:07 | injected in with each one of their
style properties being set to be incremented
| | 04:11 | value times the photo width.
| | 04:12 | Now, to test our work so
far, let's choose File>Save.
| | 04:16 | Let's switch back to marquee.html,
let's come up to the Commands menu.
| | 04:20 | Let's come down to HTML, and
let's choose Open in Default Browser.
| | 04:24 | Now, in our browser, we'll see the
very first photo being placed up here.
| | 04:28 | We can also see a little bit of the
caption showing up down below, and
| | 04:32 | underneath, we can see all of the HTML
markup that we added that defines each
| | 04:36 | one of the individual panels.
| | 04:39 | So if our outermost marquee panel
wasn't clipping the photos, we would actually
| | 04:42 | see four photos lined up
all the way across the stage.
| | 04:45 | But, in this case, we're clipping it
down to only see the very first photo.
| | 04:48 | So now that we know that the
photography is properly being injected into the
| | 04:52 | marquee container, in the next movie,
we'll inject items for the navigation that
| | 04:55 | correspond to the panels.
| | Collapse this transcript |
| Generating the navigation buttons| 00:00 | Now, to create a navigation item for
each corresponding panel, let's come
| | 00:03 | back to marquee.js.
| | 00:05 | After the panel photo each
statement, let's hit a few Returns.
| | 00:10 | Let's start with dollar sign,
parentheses, two tick mark for a string literal,
| | 00:16 | type marquee_panels .marquee_panel.
| | 00:24 | Outside of the parentheses, type each();.
| | 00:28 | So we're going to run in each statement
on every panel we find in marquee panels.
| | 00:35 | Now, just like up above, inside
of each, let's type function(){}.
| | 00:43 | Split the brackets open.
| | 00:44 | Let's get our cursor inside of
the parentheses for function.
| | 00:47 | We're going to type index.
| | 00:49 | Now, for each marquee panel that we
find, we're going to type dollar sign,
| | 00:53 | parentheses, tick marks for a
string literal, marquee_nav.
| | 01:01 | Outside of the parentheses, .append();.
| | 01:08 | So what we're going to be doing is adding
into the marquee_nav container our anchor tags.
| | 01:14 | So inside of append, parentheses, tick
marks for a string literal, let's type-in
| | 01:18 | anchor tag, class, equals,
two quotes, marquee_nav_item.
| | 01:23 |
| | 01:32 | Let's end the opening tag, and then
let's put an ending anchor tag as well.
| | 01:36 | So again, what this script is going
to do is find all of the marquee_panel
| | 01:39 | classes inside of marquee panels.
| | 01:42 | For each one that it finds, we're
going to append an anchor tag inside of
| | 01:45 | marquee_nav container.
| | 01:47 | To test this, let's choose File > Save.
| | 01:48 | Let's go back to marquee.html.
| | 01:51 | Let's go to Commands > HTML >
Open in Default Browser.
| | 01:55 | Now, we'll see our navigation items
here being populated inside of the
| | 02:00 | marquee_nav container and the same
number of items that is being injected here
| | 02:04 | matches the same number of items in the data.
| | 02:06 | So now that we have all of our
photos and navigation items being injected
| | 02:11 | properly, based on the data, in
the next movie, we'll activate the
| | 02:14 | navigation buttons.
| | Collapse this transcript |
| Setting the navigation state| 00:00 | To set up click events for the Navigation
buttons, let's come back into marquee.js.
| | 00:06 | After the each statement for all of the
marquee panels, let's hit a few returns,
| | 00:11 | let's type dollar sign, parentheses,
tick marks for a string literal.
| | 00:16 | I am going to type
.marquee_nav a.marquee_nav_item.
| | 00:26 | Outside of the parentheses, .click();.
| | 00:34 | Inside of click, we're
going to type function(){}.
| | 00:42 | Split that open on the brackets.
| | 00:43 | And what we're going to do for the
click event, we're first going to search for
| | 00:48 | all of the navigation items.
| | 00:51 | So dollar sign, parentheses, tick
marks, .marquee_nav a.marquee_nav_item.
| | 01:04 | For each item, we're going
to type on the outside of the
| | 01:07 | parentheses .removeClass();.
| | 01:14 | Inside of removeClass, two
tick marks for a string literal.
| | 01:17 | I am going to type selected.
| | 01:20 | That's the name of one of the CSS
rules in the CSS file that we included, and
| | 01:24 | what the selected state does is change
the position of the background to give us
| | 01:27 | a dot in the center.
| | 01:28 | So when the script runs, it's going to
make sure that none of the navigation
| | 01:31 | items have that class assigned.
| | 01:33 | Then, on the next line, we're going
to type dollar sign, parentheses, this
| | 01:37 | inside of the parenthesis, so the
actual item in this loop that is
| | 01:41 | actually clicked on.
| | 01:42 | We're going to type addClass();
| | 01:46 | and then inside, two tick marks for a string
literal, type selected. Let's choose Save.
| | 01:58 | So what this is going to do is remove
the classes from all of the navigation
| | 02:01 | items, and then assign the selected
class to the actual dot that we clicked on.
| | 02:04 | Now, when we come back to our browser
and hit Reload, now when I click on each
| | 02:10 | one of these items, the item that I
click on will get its selected state, and
| | 02:14 | if there's a selected state on one of
the other buttons, it will be removed.
| | 02:16 | Now that we've got the navigation
buttons indicating the one that's clicked, in
| | 02:21 | the next movie we'll slide the
photography back-and-forth to correspond to
| | 02:24 | those buttons.
| | Collapse this transcript |
|
|
5. Creating Animations Between Marquee PanelsAnimating photos by calculating image position| 00:00 | Now, in order to move the photos back-
and-forth based on the navigation item we
| | 00:03 | clicked, we're going to have to do a
little bit of math, and that also means
| | 00:06 | setting up a couple of variables.
| | 00:08 | So inside of the click function we
just created for adding and removing the
| | 00:12 | selected state from the buttons, let's
add a few more lines, and let's start by
| | 00:15 | creating our first variable.
| | 00:17 | So, we're going to type var
navClicked = $(this).index();
| | 00:34 | so whichever nav item in the group was
clicked, we're going to know which one it
| | 00:38 | is, and since there's four nav items, it
will either be zero, one, two or three.
| | 00:42 | Next variable on the next line, var
marqueeWidth, we're going to set that equal
| | 00:50 | to dollar sign, parentheses, tick marks
for string literal, .marquee_container.
| | 01:00 | Outside of the parentheses, .width();.
| | 01:08 | Next, variable, distanceToMove, we're
going to set that equal to, I'm going
| | 01:17 | to come up and grab the marqueeWidth
variable name, let's copy that to the clipboard.
| | 01:24 | Let's paste it, marqueeWidth.
| | 01:24 | We're going to multiply that, *();, inside
of the parentheses, we're going to put -1.
| | 01:37 | Since we're going to be animating the
photography on the Y-axis, setting a
| | 01:39 | negative number here is going to
actually move the photography to the left.
| | 01:42 | Next line, var newPhotoPosition, we're
going to set that equal to, and we want
| | 01:53 | to know which navigation item was clicked.
| | 01:56 | So let's come up here and
copy the variable navClicked.
| | 01:58 | Let's come down here, paste it.
| | 02:03 | Then, we're going to multiply that,
times, let's come up here, and
| | 02:07 | pick distanceToMove. Let's copy that.
| | 02:11 | Let's paste that as well, and
then we want to add a string literal.
| | 02:15 | So we'll put a Plus sign, two tick
marks for a string literal, semicolon and
| | 02:20 | inside, we're going to put px.
| | 02:22 | That way, the new photo position is
going to have a CSS property value.
| | 02:27 | Now, with our variable setup, let's
hit few line returns and let's perform
| | 02:30 | the animation, dollar sign, parentheses, tick
marks for a string literal, .marquee_photos.
| | 02:39 | We're going to grab the outermost
container that holds all of the photos.
| | 02:43 | Outside of the parentheses, .animate();.
| | 02:50 | Inside of the animate, let's put two brackets.
| | 02:53 | Inside of the brackets, we'll type left:
| | 02:55 | and let's come up here and grab
newPhotoPosition variable, copy to the
| | 03:00 | clipboard, paste it inside of the
brackets, outside of the brackets, comma, 1000
| | 03:07 | milliseconds for 1 second.
| | 03:08 | Now, we've set up our four variables
and we're performing the animation, and
| | 03:13 | again all of this is still
inside of the click function.
| | 03:15 | Let's come back to our browser.
| | 03:17 | Let's hit Reload and now when I click
on the individual dots, we'll see the
| | 03:21 | photography also animates as well.
| | 03:25 | So now that the photos properly animate
to their corresponding spot, in the next
| | 03:29 | movie, we'll work on the
initialization settings for the marquee.
| | Collapse this transcript |
|
|
6. Initializing Marquee on Page LoadInitializing the marquee| 00:00 | Now at this point we want to set up our own
custom function to initialize the marquee.
| | 00:04 | This way when the page loads, we
can do things like fade in the photos
| | 00:07 | and preset the caption.
| | 00:09 | So inside of our marquee.js file let's
scroll all the way down to the bottom.
| | 00:13 | Outside of our document ready area, we're
going to create our first custom function.
| | 00:17 | So we're going to type function space
initializeMarquee, beginning and ending
| | 00:28 | parenthesis, beginning and
ending bracket, let's split that open.
| | 00:31 | First thing what we want to do is go
get the caption content, so dollar sign
| | 00:36 | parenthesis, tick
marks for string literals,
| | 00:41 | .marquee_caption_content, .html
outside of the parenthesis, beginning and
| | 00:52 | ending parenthesis, semicolon.
Inside of that html let's hit return,
| | 00:57 | let's split that open, dollar sign,
parenthesis, tick marks for string
| | 01:02 | literal, marquee_panels .marquee_panel,
then after we look for this
| | 01:13 | particular class we're going to hit
a colon, type first, then a space
| | 01:21 | .marquee_panel_caption, outside of
the parenthesis, .html, beginning and
| | 01:30 | ending parenthesis.
| | 01:31 | So what this statement is going to do
is it's going to look for the very first
| | 01:34 | marquee panel, pick out all-of-the
html that's part of the marquee panel
| | 01:38 | caption, and it's going to put it as
the html value of the marquee caption
| | 01:43 | content, which is in our marquee container.
| | 01:45 | I'm going to scroll up a little bit.
The next instruction inside of initialized
| | 01:50 | marquee function, let's hit to return,
dollar sign, parenthesis, tick
| | 01:55 | marks for string literal,
marquee_nav a.marquee_nav_item, colon,
| | 02:11 | first, outside of the parenthesis.
addClass, beginning and ending parenthesis,
| | 02:20 | semicolon, inside of the
parenthesis, for addClass tick marks for
| | 02:24 | string literal, we're
going to add the selected class.
| | 02:28 | Next line, dollar sign, parenthesis,
tick marks for string literal,
| | 02:37 | .marquee_photos.fadeIn, beginning and
ending parenthesis, semicolon,
| | 02:49 | and then put 500 milliseconds inside.
| | 02:51 | So again when we initialize the
marquee, we're going to pick out the first
| | 02:54 | caption, put that HTML content
into the caption and content area.
| | 02:57 | We're going to put the selected state
on the first navigation item, and then
| | 03:00 | we're going to fade in the photos.
| | 03:02 | Now to make sure that this functions
runs, let's come up here and copy the
| | 03:05 | initialized marquee function, copy the
name with the parenthesis and we're going
| | 03:10 | to put this after the navigation
item inside of the document ready.
| | 03:13 | So let's paste that.
| | 03:16 | Now the other thing we need to do is
make a modification in the CSS, since the
| | 03:20 | photography is already showing,
we're going to need to hide that first.
| | 03:24 | So let's come over and open the marquee.css
and for the rule called marquee photos.
| | 03:31 | Let's come into this rule and lets add
display, colon, none, semicolon.
| | 03:40 | Let's hit File Save.
| | 03:41 | Make sure all of our files are saved.
| | 03:42 | Let's move over to our browser and test this.
| | 03:44 | And now in our browser we'll
hit Reload and then you'll see the
| | 03:49 | photography slowly fade in.
| | 03:51 | So now we also have the caption
updated but we haven't actually animated the
| | 03:54 | caption to its new state.
| | 03:55 | So in the next movie, we'll
work on animating the caption.
| | Collapse this transcript |
| Setting the caption text| 00:00 | Now to create the animation states for
our captions, we're going to create a
| | 00:03 | custom function for those.
| | 00:05 | So after initialize marquee in the
marquee.js file, let's type function,
| | 00:14 | setCaption, beginning and ending
parenthesis, beginning and ending bracket.
| | 00:18 | Let's split that open on the brackets.
| | 00:20 | So with the caption we need
to set a few variables as well.
| | 00:23 | Let's start by creating our first
variable, var captionHeight, we're going to
| | 00:32 | set that equal to, dollar sign,
parenthesis, tick marks for string
| | 00:36 | literal, .marqueeCaption, outside
of the parenthesis .height, beginning and
| | 00:47 | ending parenthesis, semicolon.
| | 00:48 | Next line, other variable marqueeHeight,
we're going to set that equal to,
| | 01:00 | dollar sign, parenthesis,
tick marks for string literal,
| | 01:03 | .marqueeContainer outside of the
parenthesis .height beginning and ending
| | 01:15 | parenthesis, semicolon.
| | 01:17 | Next variable is going to be var newCaptionTop.
| | 01:19 | We're going to set that equal to,
let's come up here and copy the
| | 01:29 | marqueeHeight variable name.
| | 01:31 | Let's paste that, space, then we're
going to subtract the captionHeight.
| | 01:37 | Let's copy that variable name, let's
paste that and then let's subtract an
| | 01:43 | additional 15, then a semicolon.
| | 01:45 | This will make sure that the text
inside of the caption is 15 pixels away from
| | 01:49 | the bottom of the marqueeContainer.
| | 01:50 | Now that we have these variables
defined, let's type dollar sign,
| | 01:54 | parenthesis, tick marks for
string literal, .marquee_caption.
| | 02:02 | That's out of the parenthesis .delay,
beginning and ending parenthesis.
| | 02:09 | Inside of the parenthesis for delay
let's type 100 milliseconds or one-tenth of
| | 02:13 | a second, then outside of there we're
going to type .animate, beginning and
| | 02:20 | ending parenthesis, semicolon.
| | 02:22 | Inside of the animate parenthesis,
two brackets, top, colon.
| | 02:29 | Let's come up here and grab
the variable name newCaptionTop.
| | 02:33 | Let's paste that in here.
| | 02:34 | So inside of the brackets it'd top,
colon, newCaptionTop, outside of the
| | 02:39 | brackets but still inside of the
parenthesis, comma, 500 milliseconds.
| | 02:44 | So basically what this script is doing
is it's calculating the caption height,
| | 02:48 | the overall marqueeHeight and we're
finding out the new height for the caption
| | 02:52 | based on the HTML content that's been
injected in here and then once we know
| | 02:56 | what that new caption height is,
we're going to animate it after waiting
| | 02:59 | one-tenth of the second to the new position.
| | 03:01 | Now to make sure that this runs,
let's come up here and grab the
| | 03:05 | setCaption function name.
| | 03:07 | Let's copy that and let's paste that
inside of the initialized marquee function,
| | 03:11 | then add a semicolon.
| | 03:14 | Make sure all of your files are saved and
to test this let's come down to our browser.
| | 03:18 | Let's hit Reload, and now when the
initialization function runs, not only will
| | 03:22 | the photography fade in but the
caption will now animate to its new state.
| | 03:26 | Now we are only running these
setCaption functions on the initialization state.
| | 03:30 | So if I click between the different
panels, the animation state won't actually
| | 03:33 | change for the caption.
| | 03:35 | So in the next movie we'll hook in the
Set Caption function and some additional
| | 03:38 | instructions to get the captions to
react to the navigation buttons as well.
| | Collapse this transcript |
| Changing the caption to match the photo| 00:01 | Now to get the captions to pay attention
to the navigation items let's come into
| | 00:04 | the click event that we have actually
assigned to all of the navigation items.
| | 00:09 | So after the variable newPhotoPosition
let's hit a Return and let's add another
| | 00:14 | variable var newCaption.
| | 00:21 | We're going to set this equal to dollar
sign, parentheses, tick marks for string
| | 00:25 | literal, .marquee_panel_caption.
Outside of the parentheses we're going to type
| | 00:37 | .get, beginning and
ending parentheses, semicolon.
| | 00:41 | Inside of get we're going to
put in the variable navClicked.
| | 00:43 | So I am going to come up here and
copy that, let's paste it inside of
| | 00:47 | the parentheses here.
| | 00:48 | Now that we've got that variable defined
let's come down here and then after the
| | 00:53 | instruction to animate the photography,
let's add a few line returns, dollar
| | 00:58 | sign, parentheses, tick marks for a
string literal, type .marquee_caption.
| | 01:07 | Outside of caption we're going to
type .animate, beginning and ending
| | 01:12 | parentheses, semicolon.
| | 01:15 | Inside of animate we're going to put
brackets, inside of the brackets we're
| | 01:19 | going to type top, colon, two tick marks
for a string literal, 340 pixels, outside
| | 01:29 | of the brackets comma space 500 milliseconds.
| | 01:33 | Then we're going to type comma space
function, beginning and ending parentheses,
| | 01:40 | beginning and ending
bracket, let's split that open.
| | 01:43 | So this is a callback function we're
adding in here, so the instructions inside
| | 01:46 | of this function won't run until
after this animation has been completed.
| | 01:50 | So now inside of the callback function we're
going to declare a new variable var newHTML.
| | 01:57 | We're going to set that equal to dollar
sign, parentheses and let's go grab that
| | 02:04 |
| | 02:07 | variable newCaption. Just come
up here and copy that variable.
| | 02:10 | Let's paste that in here.
| | 02:13 | So we're going to go find the
actual caption that corresponds to the
| | 02:17 | navigation that was clicked.
| | 02:19 | Outside of the parentheses .html,
beginning and ending parentheses, semicolon,
| | 02:24 | then in the next line dollar sign,
parentheses, tick marks for a string literal,
| | 02:32 | .marquee_caption_content, outside of the
parentheses .html, beginning and ending
| | 02:43 | parentheses, semicolon.
| | 02:44 | We want to set the HTML for the marquee_
caption_content equal to this variable
| | 02:49 | here, which is newHTML.
| | 02:51 | Let's copy that, paste it inside of
the parentheses and then lastly type
| | 03:02 | setCaption, parentheses and the semicolon.
| | 03:06 | So basically what we're doing here is
we're animating the top of the Animation
| | 03:09 | panel all the way down to 340, so we
can just see the very top, switching out
| | 03:14 | all of the HTML and then animating it
backup by calling the setCaption function.
| | 03:21 | Let's make sure all of our files are saved.
| | 03:23 | Let's go over to our browser and
test this and let's hit Reload.
| | 03:27 | Now when I click on the individual
navigation dots the caption will move down,
| | 03:31 | change the HTML content
and then animate back up.
| | 03:35 | The point at which it animates up is
based on how much content you actually
| | 03:38 | place inside of the caption area.
| | 03:40 | Now with all of our functionality in
place, in the next movie we'll add in the
| | 03:43 | image pre-loader, so that the marquee
doesn't actually load until all the images
| | 03:47 | are available and we'll hide the actual
data so that all we see is the marquee.
| | Collapse this transcript |
| Preloading images before initializing the marquee| 00:00 | Now to add in the pre-loader we're
going to go inside of the document ready and
| | 00:03 | find where we ran the
initialized marquee function.
| | 00:07 | So let's come down here.
| | 00:08 | Let's select this, let's cut it to the
clipboard and in its place let's type
| | 00:13 | dollar sign, parentheses,
tick marks for string literal.
| | 00:17 | Let's type .marquee_panels space img.
| | 00:26 | Outside of the parentheses we're going
to type .imgpreload, beginning and ending
| | 00:33 | parentheses, semicolon.
| | 00:35 | This is the custom
function called for the plug-in.
| | 00:38 | Inside of preload we're going to
type function, beginning and ending
| | 00:43 | parentheses, beginning and ending bracket.
| | 00:46 | Let's split that open on the
brackets and inside of here we're going to
| | 00:49 | Paste initializeMarquee.
| | 00:51 | So what this preload function is
going to do is look for all of the images
| | 00:54 | inside of the marquee panels container
and once all of these images have been
| | 00:59 | loaded, then we'll initialize the marquee.
| | 01:01 | This will ensure that when users come
to our site they won't actually see the
| | 01:05 | marquee until all of the
images have been loaded.
| | 01:08 | Let's save our file, let's
come back to marquee.css.
| | 01:12 | The last thing we want to do is hide
all of the individual panels, so that all
| | 01:15 | we see is the marquee.
| | 01:16 | So, let's come up to the marquee_panels rule.
| | 01:22 | Let's add display none.
| | 01:26 | Let's choose File > Save;
| | 01:27 | make sure all of our files are saved.
| | 01:28 | Let's go back to our browser,
let's hit Reload one more time.
| | 01:31 | Now running from your hard drive this
is going to load immediately but if you
| | 01:34 | put this up on your site you'll
actually see a slight delay when the marquee
| | 01:38 | loads, again based on how
long it takes the images to load.
| | 01:40 | We also don't see the data showing
up anymore and now I have our fully
| | 01:44 | functioning project.
| | 01:47 | At this point we've completed the
interactive marquee, in the next movie we'll
| | 01:50 | talk about some places you might want
to go from here and in addition you might
| | 01:53 | want to check the Lynda.com Library
for adding an autoplay to this particular
| | 01:57 | project as a secondary course.
| | Collapse this transcript |
|
|
7. Where to Go From HereWhere to go from here| 00:00 | So now that we've completed designing
and developing our marquee, there are a
| | 00:04 | few things you might want to
explore to add enhancements to this.
| | 00:07 | On the jQuery site one of things you
might want to do is, instead of having all
| | 00:11 | of the data inside of the HTML page,
perhaps we load that data in from separate
| | 00:16 | HTML files or even from JSON or XML data.
| | 00:19 | On the jQuery site to find documentation
on this, go up to the Documentation tab
| | 00:24 | and you're going to want to look
under the Ajax settings and under Ajax the
| | 00:31 | features you might want to use .load
for example will gives you a really quick
| | 00:35 | way to go out and pick an HTML file
that's separate or even point to a script
| | 00:39 | like a PHP or an ASP script or
perhaps a developer can give you a link that
| | 00:43 | feeds back the same HTML data.
| | 00:45 | The other thing you might want to
look at is putting a self-timer on the
| | 00:49 | marquee, so that after a certain amount
of time it will progress all by itself.
| | 00:53 | On the Mozilla website, developer
.mozilla.org, you can search for
| | 00:57 | window.setInterval or
just a regular set interval.
| | 01:00 | This is a JavaScript looping command
where JavaScript will just run a function
| | 01:05 | after certain amount of time and so
what you can do is set an interval on your
| | 01:09 | marquee and every certain amount of time,
maybe 10 or 15 seconds run a function
| | 01:14 | that maybe sets up the captions and
also progresses the photography as well.
| | 01:18 | So I hope you enjoyed going through
this course and I really appreciate
| | 01:20 | you watching.
| | Collapse this transcript |
|
|
