IntroductionPreviewing the project across browsers and devices| 00:00 | Hi! I am Chris Converse, and this is a
course about creating your own photo gallery.
| | 00:04 | I want to start by taking a look at the
final project that we're going to be creating.
| | 00:08 | When you download the assets, there's
going to be a Final Project folder where
| | 00:11 | you can open these files in your web
browser and take a look at what the user
| | 00:15 | experience is going to look like
once we're done programming this.
| | 00:17 | I am going to start by taking the
index.html file and opening it up in a web browser.
| | 00:24 | So in here I have a series of thumbnails.
| | 00:25 | When the gallery loads automatically,
the very first image actually fades up
| | 00:29 | over on the right-hand side.
| | 00:30 | As I move my cursor around the
thumbnails, I get a little highlight.
| | 00:34 | Clicking on a thumbnail will fade down
the particular thumbnail I clicked on,
| | 00:38 | show me a preview image slightly
larger version of the thumbnail, show me a
| | 00:42 | caption, give me links at the bottom.
| | 00:44 | If I click on the preview, we actually
load this up in a lightbox and this is
| | 00:49 | the higher-resolution file, so there's
three versions of each photograph that
| | 00:53 | we're going to be working with.
| | 00:55 | The caption will close up, the
picture will load, and then change.
| | 00:59 | We also have a preload set in here, so
as we click on the items, the preview
| | 01:03 | image over on the right-hand side has a
jQuery plug-in attached to it that will
| | 01:07 | automatically preload the
image and then fade it up,
| | 01:10 | so we don't have that case where the
image just pops on because it started to
| | 01:14 | animate before it preloaded.
| | 01:17 | The text areas underneath are going to
be dynamically created on the right-hand
| | 01:20 | side, so the VIEW LARGER link will also
initiate a lightbox which will overlay
| | 01:25 | the high-resolution file over the top.
| | 01:27 | And this will also give us dynamic
captions in the lower left-hand corner as well.
| | 01:31 | On the left-hand side, we have an email
link that we can click and initiate an email.
| | 01:39 | And the technologies we're using here:
we're using HTML, CSS, and JavaScript.
| | 01:43 | To help us with the JavaScript,
we're going to be using an open-source
| | 01:46 | framework called jQuery.
| | 01:47 | And in addition we're going to be plugging
in two open-source frameworks in the jQuery:
| | 01:51 | one called Fancybox to do the Lightbox
overlays and one called far IN space to
| | 01:56 | do the preload images.
| | 01:58 | Now, one of the advantages of using a
framework like this is that we can go
| | 02:01 | across multiple platforms and multiple
devices and get the same user experience.
| | 02:06 | Here I am going to hop over to Windows
and we're going to come down to load the
| | 02:10 | same project in Windows XP, all the way
back to Internet Explorer 7, and we're
| | 02:15 | going to get the same user
experience this far back.
| | 02:18 | I can click on the different thumbnails.
| | 02:21 | I can click on VIEW IMAGE.
| | 02:22 | Now, this experience will also work
in IE 6, although we won't get some of
| | 02:27 | the transparent effect.
| | 02:28 | So we've got this sort of light drop shadow
that we get from Fancybox and this overlay here.
| | 02:33 | Some of that's won't show up in IE;
| | 02:35 | they'll just be solid pictures.
So this will work in IE, but it won't be the
| | 02:39 | optimal user experience.
| | 02:41 | And in addition to platforms--let's
close out of Mac and Windows here--
| | 02:47 | we can also load this up in mobile devices.
| | 02:50 | So here we're looking at a version of Android.
| | 02:55 | So in Android here, I am going to come in
to the web browser. I'm going to come up to my Favorites.
| | 02:59 | I am going to load the same
files in the Android environment.
| | 03:08 | I am going to hit Ctrl+F11 to rotate the device.
| | 03:12 | I can tap on an image;
| | 03:15 | I get the fade-in and then fade-out.
| | 03:19 | Tap on the full picture,
| | 03:20 | I get the lightbox that comes up.
| | 03:26 | And then lastly, we get the same sort of
user experience with the iPad and other tablets,
| | 03:31 | so Android tablets, iPad tablets.
| | 03:33 | I'll rotate this device, holding
Command+Right Arrow, click on these items and
| | 03:41 | again activate the lightbox as well.
| | 03:43 | The other development technique that
we're going to use in building this
| | 03:46 | particular project is a
technique called progressive enhancement.
| | 03:49 | And so what that means is we're going
to build the HTML in such a way that even
| | 03:54 | if somebody doesn't have full CSS
support, or they don't have JavaScript at
| | 03:59 | all, the way the HTML is going to be built,
they can still go through our photo gallery.
| | 04:04 | So in the exercise files, I
have two additional files.
| | 04:07 | One's called index_no_js.
| | 04:10 | So I am going to take this
file and load it in a browser.
| | 04:13 | So if somebody visits your site and
they don't have JavaScript--so maybe
| | 04:15 | they're using an earlier phone that
has a web browser, but it doesn't have
| | 04:19 | JavaScript support--
| | 04:20 | they can still visit your site.
| | 04:22 | They can click on individual images.
| | 04:24 | These will link over to the high-res
files and they can simply use their
| | 04:27 | browser's Back button or their phone's
Back button to go back to the main menu.
| | 04:32 | So they can still participate in the
gallery and look at all the photography,
| | 04:37 | and they just have the
slightly different user experience.
| | 04:40 | In a case where they might be on a
much older mobile device that doesn't have
| | 04:44 | any CSS or JavaScript support, this
particular code base would look like this.
| | 04:49 | They would just see a series of
thumbnails, no styling, no background graphics,
| | 04:53 | but again, each one of these
images has linked to its high-res file.
| | 04:56 | So they can simply just tap or move
their control wheel over to the item, click
| | 05:01 | the OK button,
and activate each one of these links.
| | 05:05 | So using this progressive enhancement
technique, we can create a single HTML
| | 05:09 | file with base functionality and then
enhance the user experience if they have
| | 05:14 | JavaScript, if they have CSS,
and we only build one file.
| | 05:18 | And then the individual browsers that
people visit our gallery with will then
| | 05:22 | dictate what the full user
experience can be based on those particular
| | 05:25 | browser's capabilities.
| | 05:26 | So I hope this sounds interesting to
you, and if so, let's get started with the
| | 05:30 | first chapter.
| | Collapse this transcript |
| About the exercise files| 00:01 | When you download the exercise files,
there's going to be two folders contained
| | 00:04 | inside of that download:
| | 00:05 | an Art Templates directory, which
is going to contain all of the source
| | 00:08 | Photoshop files we're going to use to
create the assets for our photo gallery,
| | 00:13 | and in addition there's going to be
Photos for Gallery, which is going to
| | 00:16 | contain all of the higher-resolution
photography we're going to use to load
| | 00:19 | inside of the Lightbox.
| | 00:20 | This is going to be the
highest-resolution previews we're going to offer
| | 00:23 | though our web gallery.
| | 00:24 | The page_template.psd contains all of
the artwork we're going to use for the
| | 00:29 | outer shell to create the design of our gallery.
| | 00:32 | And the two Photoshop files--
preview_sizes and thumbnail_sizes--are going to
| | 00:35 | be the custom cropping that we're
going to use to get the optimal design and
| | 00:39 | cropping of each of our
photographic images for our gallery.
| | 00:43 | Inside of Final Project is going to
be all the files we're going to create
| | 00:46 | by the end of the class.
| | 00:48 | We're going to be creating the file
index.html, but I've also included the
| | 00:52 | non-JavaScript version and the
non-JavaScript and non-CSS version.
| | 00:56 | When we looked at the introduction video,
we saw how this particular technique
| | 01:01 | is going to progressively
enhance our user experience.
| | 01:04 | But I wanted to include these files
so you could take a look at these and
| | 01:07 | see what the site would look like on a
browser that doesn't support JavaScript or CSS.
| | 01:13 | Inside of the includes directory we're
going to download a copy of jQuery 1.5.
| | 01:17 | We're also going two
download two additional plug-ins.
| | 01:19 | We're going to get a copy of Fancybox,
which is a jQuery plug-in which allows us
| | 01:24 | to add a lightbox to our gallery, and a
copy of far IN space, which is a plug-in
| | 01:29 | that allows us to target a
particular div and preload all of the images
| | 01:33 | inside so that we can preload images
before we do our fade-up and fade-down
| | 01:37 | of our preview images.
| | 01:39 | And then lastly, inside of the images
directory we're going to have a template
| | 01:42 | directory, which is going to contain all
of the artwork that's going be used in
| | 01:45 | the outer shell and design of our gallery.
| | 01:48 | And inside of the gallery directory
itself is going to be all of the photography
| | 01:52 | that's going to be used in the gallery.
| | 01:54 | Every one of the photographs is
going to have three different versions.
| | 01:56 | We're going to have a full-size version,
which is going to be the graphic we
| | 01:59 | load into the lightbox.
| | 02:00 | We've got the preview graphic, which
going to be the graphic on the far right.
| | 02:04 | And then we've got the thumbnails
which are the small graphics we're going to
| | 02:07 | have on the left-hand side of our design.
| | 02:08 | Let me close up these folders, and the
first thing we're going to do is start
| | 02:12 | from one of our Art Template
directories inside Photo Galleries, and we're going
| | 02:16 | to create some folders on the
desktop and start our project.
| | Collapse this transcript |
|
|
1. Preparing the Gallery PhotosRenaming a series of files in Adobe Bridge| 00:01 | To begin our project, we're going to
create series of folders. On the desktop,
| | 00:05 | we're going to start with a folder
called myGallery. I'm going to open up this folder,
| | 00:14 | and inside of here we're going to
create another series of folders.
| | 00:20 | First, we'll create includes.
| | 00:21 | This is going to hold our
CSS and JavaScript files.
| | 00:23 | Another folder called images,
another folder called template, and another
| | 00:33 | folder called photos.
| | 00:38 | Going to take photos and templates,
Shift+Select them, and bring them into
| | 00:42 | the images directory.
| | 00:46 | Now that I have this in place,
let's come back to the exercise files.
| | 00:48 | Let's go into the Photos for Gallery.
| | 00:50 | I am going to Shift+Select all of
the pictures, hold the Option or Alt in
| | 00:56 | Windows, and drag a copy of all of
these JPEG files into the photos directory
| | 01:00 | inside of the myGallery directory
we just created for our project.
| | 01:03 | Let me close up the exercise files.
| | 01:07 | Now, all these JPEGs in the
photos directory are going to be the
| | 01:12 | high-resolution files,
| | 01:13 | so I want to name them with
_fullsize in the file name.
| | 01:17 | So instead of renaming each one,
I am going to use Adobe Bridge.
| | 01:19 | Going to take the photos directory and just
drag and drop at right on top of Adobe Bridge.
| | 01:25 | Inside of Bridge, if we drag a
folder on top of the Bridge icon, it will
| | 01:28 | automatically open that folder
in our operating system here.
| | 01:32 | And by default, I have a Content
panel here and a Preview panel.
| | 01:35 | Selecting items down here in
Content will show me the preview here.
| | 01:39 | Holding the Command or Ctrl key in
Windows, I can select multiple files.
| | 01:44 | I'm going to come down and choose
Edit > Select All to select all of the files.
| | 01:48 | Let's come under the Tools
menu and choose Batch Rename.
| | 01:54 | Inside of this dialog box here, I am
going to come down here and choose Default.
| | 01:58 | This will be the first screen that
you're going to see when you've run Batch Rename.
| | 02:02 | And down here we basically are going to
construct the new file names we want
| | 02:05 | to have Bridge rename all of the files to.
| | 02:08 | So we're going to start with the
first one and choose Current Filename.
| | 02:11 | And the first item here
is just going to be Name.
| | 02:14 | Let's take off Name and Extension.
| | 02:16 | Let's come over here to the Minus signs
and let's delete two of these parameters.
| | 02:21 | And instead of Date and Time, let's
change this to Text, and we're going to come
| | 02:25 | in here and type _fullsize.
| | 02:29 | I am going to come over here and click Preview.
| | 02:32 | Bridge is going to show me the
original file names over here on the left with
| | 02:36 | the brand-new file name.
| | 02:37 | It's going to rename
everything on the right-hand side.
| | 02:39 | That looks right,
acrobats_fullsize, apartments, berries.
| | 02:42 | Let's choose OK and let's hit Rename.
| | 02:46 | Come back to our operating system.
| | 02:48 | I can see all of the files have now been
renamed with _fullsize in the file name.
| | 02:52 | Let's come over and close Bridge.
| | 02:56 | Now that we have our fullsize files
ready, in the next movie we're going to
| | 03:02 | open up the preview and thumbnail
sizes and we're going to export those from
| | 03:05 | Photoshop.
| | Collapse this transcript |
| Using GREP for more intricate file renaming| 00:00 | Now in the exercise files
let's open the preview_sizes.psd.
| | 00:05 | Now, what I've decided to do here is
to take each photograph one by one and
| | 00:10 | custom crop each one of these photographs
so that I get the optimal preview image.
| | 00:16 | If I open up the refraction_fullsize.
jepg, this is the size of the large file
| | 00:21 | we're going to load into the lightbox.
And instead of using automated tools
| | 00:25 | like tools found in Photoshop or
Bridge or Lightroom that will automatically
| | 00:30 | resize a series of images,
| | 00:32 | I want to spend the time and custom
crop to get exactly the look that I want
| | 00:36 | from taking this horizontal picture
into a square picture we're going to use
| | 00:38 | for our preview.
| | 00:39 | So I've created these two Photoshop
files with all of the layers labeled exactly
| | 00:45 | the same file names as the full-size
images that we just moved over from the
| | 00:49 | full-size graphics in the exercise files.
| | 00:52 | So what I want to do here is export from
this Photoshop file out to a series of files.
| | 00:57 | So what I'm going to do first, on the
desktop, I'm going to click right here and
| | 01:00 | create a new folder just called temp.
| | 01:04 | Let me open that up, and I just want to
place that I can save all of these files.
| | 01:12 | Let's come back to Photoshop.
| | 01:13 | Let's go to the File menu. Let's come
down to Scripts > Export Layers to Files.
| | 01:21 | In this dialog box here, I'm going to choose
Browse > Desktop > temp folder. Let's choose Open.
| | 01:28 | We'll keep JPEG, 8 Quality, and I want
to make sure prefix here set to blank, and
| | 01:35 | I'm going to choose Run.
| | 01:37 | As Photoshop is running through all the
layers and saving them out, I can see in
| | 01:39 | the background all the files getting generated.
| | 01:41 | Now, one of the things that I can't
control is Photoshop is going to name every
| | 01:46 | one of the files with an underscore plus a
number in addition to the name of the layer.
| | 01:50 | So we're going to use Bridge to get rid
of all of this as well using the batch-
| | 01:54 | rename process again.
| | 01:55 | So on the desktop, I'm going to
grab temp. Let's drag it into Bridge.
| | 02:03 | In the Content area, I'll select the
first photo, choose Edit > Select All.
| | 02:10 | In Tools, we'll choose Batch Rename.
| | 02:12 | Now this is going to be a little bit
trickier because down here in the Preview
| | 02:17 | I can see that every one of
those files has additional content.
| | 02:20 | So in addition to adding an extension
of _preview before the .jpg, I also want
| | 02:27 | to remove these numbers.
But each one of these numbers are unique.
| | 02:31 | So what we're going to do is use some
grep search and replace inside of here as well.
| | 02:35 | So to start, let's come up here to Filename.
| | 02:37 | Let's come down and choose
Current Filename, set this to Name.
| | 02:41 | I'm going to get rid of two of
these parameters for the moment.
| | 02:47 | Under Date and Time, let's come
down and choose String Substitution.
| | 02:51 | I am going to come in here and choose
Intermediate Filename, which means it's
| | 02:56 | going to not append this to the additional
file name, but concatenate the two together.
| | 03:01 | And again, I can see a live preview
down here of how my equation up here is
| | 03:06 | actually going to rename the file.
| | 03:10 | So under Find text, I'm going to put
two square brackets and inside of here, I'm going to
| | 03:14 | type 0-9, and this is going to be a
grep expression, a regular expression.
| | 03:20 | So I'm going to click on the Regular
Expression check box, and notice that now
| | 03:24 | all of the numbers went away.
| | 03:26 | If I turn on Replace All, it will only replace
one. Turn on Replace All gets rid of all of him.
| | 03:32 | And up here after the 9, I'm going
to put a comma and an underscore.
| | 03:37 | So basically what this is saying is through grep,
| | 03:41 | Bridge is going to find every instance
of a number between 0-9 and any instance
| | 03:46 | of an underscore, and it's going
to replace it with blank text.
| | 03:50 | It's going to do that for every piece
of data that it finds and matches this in
| | 03:53 | the file name with Replace All
selected, and the check box Use Regular
| | 03:57 | Expression will go through.
| | 03:59 | So now I can see that my file name
is now just the word refraction.jpg.
| | 04:05 | Let's add one more parameter under Text.
And at the end, we're going to add preview.
| | 04:15 | Let's choose Preview at the top to
make sure that all my file names will
| | 04:18 | be renamed correctly.
| | 04:20 | So _000_refraction becomes
refraction_preview.jpg. Let's click OK.
| | 04:28 | Now let's come up here and hit Rename.
Bridge is going to run this rename.
| | 04:33 | Let's come out here, and we can see that
all of the files have now been renamed
| | 04:38 | with 'preview' in there.
| | 04:40 | Let's bring up our myGallery project.
Let's grab all of these files from the temp
| | 04:46 | directory and we'll drag and drop
them right into the photos directory.
| | 04:53 | So now we have all of our
full-size and preview images.
| | 04:56 | I'll leave this temp directory here.
| | 04:58 | Let's close this window in Bridge.
| | 05:00 | Let's close our preview_sizes.psd in Photoshop.
| | 05:04 | And let's open thumbnail_sizes in Photoshop.
| | 05:08 | Same process, I've named all of
these layers exactly the same names.
| | 05:11 | Let's choose File > Scripts > Layers to Files.
Browse > temp directory. Click OK. Hit Run.
| | 05:29 | Let's choose OK.
There is our temp directory.
| | 05:33 | Let's grab the temp directory.
| | 05:34 | Let's drag this into Bridge,
select the first one in Content, Select
| | 05:40 | All, Tools > Batch Rename.
| | 05:45 | Bridge is going to remember the last
settings we had. And instead of _preview,
| | 05:54 | this will be _thumbnail.
| | 05:57 | Click Rename. Go back to Bridge.
| | 06:00 | These have all been renamed.
| | 06:02 | Let's close Bridge.
| | 06:06 | Let's select all of these. Let's drag these
into our myGallery project in the photos directory.
| | 06:12 | Let's close temp. Throw that in the trash.
| | 06:15 | Let me double-click on the photos
directory just to see that by itself, and I
| | 06:22 | see there's 60 items in here: 20
pictures for our gallery, including three
| | 06:28 | different states of each one.
| | 06:29 | Let's close the photos.
| | 06:31 | Let's come back to Photoshop.
| | 06:32 | Let's close thumbnail_sizes.
| | 06:33 | Now at this point, we're done
preparing all of our photography, so let's move
| | 06:39 | into HTML and CSS.
| | Collapse this transcript |
|
|
2. Creating the Layout in HTML and CSSCreating and linking HTML and CSS files| 00:00 | Now, we'll need to create an HTML file
and a CSS file and hook the two together.
| | 00:05 | Let's start by going to
Dreamweaver, choose File > New > HTML.
| | 00:11 | Let's choose XHTML 1.0 Transitional,
so this will work all the way back in XP
| | 00:16 | and as far back as IE 7 for some of
the techniques we're going to use.
| | 00:20 | With this brand-new file, let's
choose File > Save, make sure we're in the
| | 00:26 | myGallery directory. We'll
call this index.html. Click Save.
| | 00:33 | Create a new file, CSS, click Create.
| | 00:40 | Let's choose File > Save.
| | 00:42 | Let's save this into the includes
directory. We'll call this gallery.css. Click Save.
| | 00:49 | Now, let's come over and select the index
file. Inside of Dreamweaver, we're going
| | 00:55 | to attach the style sheet into this document.
| | 00:58 | We're going to choose Format menu >
CSS Styles > Attach Style Sheet. Click
| | 01:04 | Browse > myGallery > includes > gallery.css
Then click Choose. Then say OK.
| | 01:14 | We now have our CSS file
looked into our HTML file.
| | 01:18 | Let's choose File > Save All.
| | 01:21 | Now with our HTML and CSS file in place,
in the next movie we're going to refer
| | 01:25 | back to our sketch and we're going to
start creating some CSS rules that are
| | 01:28 | going to help us recreate our layout in HTML.
| | Collapse this transcript |
| Save For Web & Devices in Photoshop| 00:00 | So now we that have our HTML and CSS files created
and our external file links to the CSS file,
| | 00:07 | I'm going to minimize this. And now
what we want to do is create some of the
| | 00:11 | assets that we're going to need
from Photoshop, some of the graphics, to
| | 00:14 | recreate our layout.
| | 00:15 | So one of the first things I recommend
doing in any interactive project and web
| | 00:19 | site project is coming up with a sketch.
| | 00:23 | You can draw this out in a notebook
or use something like Illustrator or
| | 00:26 | InDesign, and just come up with some
of the measurements of the different
| | 00:29 | pieces we're going to need, so that we
can create individual slices inside of
| | 00:33 | Photoshop and then recreate CSS in
order to recreate some of those objects.
| | 00:38 | So in this sketch here, what we're
going to be creating for our photo gallery
| | 00:41 | are a series of thumbnails that
are going to be 75 x 75 pixels.
| | 00:45 | Our preview areas is going to be 375 pixels wide.
| | 00:48 | We're going to have the container
that's going to be 500 pixels wide
| | 00:51 | that's going to hold all of the
thumbnails. And then we're going to have our
| | 00:54 | overall gallery area be 960 pixels wide,
and that's going to consist of the top
| | 01:00 | area, a center tile area
which is going to tile vertically--
| | 01:04 | we'll set up with CSS--
| | 01:05 | and a page bottom area.
| | 01:09 | So letting this sketch sort of inform
some of the numbers we're going to create,
| | 01:12 | let's come out to the exercise files
and let's open up page_template.PSD.
| | 01:16 | Now inside of this file--I'm
just going to zoom up here--
| | 01:20 | we basically have just the artwork that we
need to cut up and create our layout from.
| | 01:26 | So in the left-hand area here, we have
this sort of rounded-corner box with a
| | 01:31 | gradient at the top and the bottom.
And on the far right, if I scroll over, I
| | 01:34 | can see little icons for the envelope
and the magnifying glass, which we're
| | 01:38 | going to use to create email links
and the magnification, which is actually
| | 01:42 | going to trigger the light box we
looked at in the introduction video.
| | 01:44 | So I'm going to scroll
all way over to the left.
| | 01:49 | Over here under the Cropping tool, we're
going to come down and select the Slice tool.
| | 01:52 | What the Slice tool allows us to do is
draw artwork on top of our canvas, and
| | 01:57 | when we use the Save for Web & Devices
feature inside of Photoshop, any artwork
| | 02:01 | inside of the slice areas can be
saved out as an individual graphic file.
| | 02:05 | So to use this, I'm going to come up
here to the upper left-hand corner.
| | 02:09 | I'm going to click and drag.
| | 02:10 | That's going to create a slice area.
| | 02:12 | Any slice that I draw will be
highlighted in blue inside of Photoshop, and any
| | 02:17 | slice that Photoshop creates to fill out
the entire canvas will show up here in gray.
| | 02:21 | When I move my cursor inside of
here, I get the Slice Selection tool.
| | 02:25 | I'm going to double-click and
bring up the Slice Options panel.
| | 02:28 | This is going to be the page top,
| | 02:30 | so let's come in here and rename this page_top.
| | 02:35 | The Width is going to be 960.
| | 02:37 | It's going to be 20 pixels tall.
| | 02:39 | I'm going to click OK.
| | 02:40 | Now, that's going to create a slice.
| | 02:43 | If I scroll out here, I can see that
that will actually fit exactly the rounded-
| | 02:47 | corner box, which I've drawn
to be exactly 960 pixels wide.
| | 02:50 | Scroll back to the left.
| | 02:54 | Let's draw out another slice.
| | 02:56 | This is going to be called page_tile.
| | 02:59 | This is going to be 960.
| | 03:03 | I'm going to set this to be 10 pixels tall.
| | 03:06 | Now, this graphic here is going to be a
tile, so it's going to repeat vertically.
| | 03:11 | Now some people recommend making
your graphic that's going to tile
| | 03:15 | vertically only be one pixel tall,
or a graphic that's going to repeat
| | 03:19 | horizontally to be one pixel wide.
| | 03:21 | I recommend against this because that
means that the device or browser you are
| | 03:25 | looking at has to paint that
graphic that number of times.
| | 03:29 | So if you have a 1024-wide site, the
browser is going to have to paint that one
| | 03:33 | graphic 1,024 times.
| | 03:35 | So I recommend setting the graphic to
at least 10 pixels, or even 20 pixels.
| | 03:40 | The amount of file size difference is
really tiny, but it drastically reduces
| | 03:44 | the number of times the
browser has to redraw those graphics.
| | 03:49 | So I'll set this 960 x 10.
| | 03:53 | Then lastly, last come down
here, draw out another slice.
| | 03:56 | This is going to be page_bottom.
960 x 20. We'll click OK.
| | 04:06 | With this one selected, I'll use my
arrow keys and I will just arrow this up.
| | 04:09 | Let me zoom up here.
| | 04:12 | I want to make sure that slice is
right at the bottom of this area here, so
| | 04:16 | that rule at the bottom of the rounded-corner
box is right at the bottom of the slice area.
| | 04:22 | Use my Zoom tool and zoom out here.
| | 04:23 | Let's scroll all the way out to the right.
| | 04:26 | I want to zoom up over here
onto the envelope and Zoom tool.
| | 04:30 | Slice tool is selected.
| | 04:31 | I'm going to create two
graphics here, 23 pixels x 15.
| | 04:39 | This is going to be called link_email.
| | 04:43 | Draw another one around the zoom.
| | 04:52 | This one we'll called link_zoom. Then click OK.
| | 04:56 | Use my arrow keys and move that down.
| | 04:59 | So if I zoom up here, I want to make
sure the magnifying glass fits perfectly
| | 05:02 | inside of the slice area. And scroll up to the
envelope, make sure that fits in there as well.
| | 05:07 | I'm going to hit Command+Option+0 or
Ctrl+Alt+0 on Windows to come out to full-screen view.
| | 05:15 | I'm going to come over to the
background and turn that off.
| | 05:19 | I want these to be transparent.
| | 05:22 | So these slices over here are going to
be transparent against the background.
| | 05:26 | These over here are going to
be JPEGs without transparency.
| | 05:29 | Let's choose File > Save for Web & Devices.
| | 05:32 | I'm going to zoom up here.
| | 05:37 | I'm going to scroll over to the right-hand
side, so I can see most of my slices here.
| | 05:43 | So I'll select the very first slice,
hold Shift, select middle, and bottom.
| | 05:47 | We're going to set these to JPEG, about 75% Quality.
| | 05:52 | I'm going to select on the Envelope tool here.
| | 05:56 | This is going to be a PNG file, 24.
| | 06:02 | Select the Zoom Magnification tool.
| | 06:04 | This is going to be PNG-24
as well. Let's click Save.
| | 06:08 | I am going to choose the Desktop > myGallery >
images, and we're going to choose template.
| | 06:17 | Under Slices, I'm going
to choose All User Slices.
| | 06:19 | So even though Photoshop set up slices
for all of the different canvas areas, we
| | 06:23 | only want to save out the ones that we drew.
| | 06:27 | Under Settings for Other, I want to come
in here and make sure that Photoshop is
| | 06:29 | going to save out each one
of these as the slice name.
| | 06:33 | We'll click OK. Then we'll hit Save.
| | 06:36 | Let's go back out to the operating system.
| | 06:38 | We'll close up photos, open up
templates, and inside template, we'll have
| | 06:42 | link_email.png, link_zoom.png,
and then top, tile, and bottom JPEG files.
| | 06:47 | Let's come back to Photoshop.
| | 06:51 | Let's close and save our changes.
| | 06:55 | So now that we have all of our graphics in place,
| | 06:56 | let's go back over to Dreamweaver and
create our CSS rules in order to recreate
| | 06:59 | this layout in HTML and CSS.
| | Collapse this transcript |
| Creating empty CSS rules| 00:00 | Now that we have the images in place
and all of the assets we need for our
| | 00:03 | template, let's come back over to Dreamweaver.
| | 00:07 | Start in here, on each project I
usually make a decision whether I'm going to
| | 00:10 | build the HTML or the CSS first.
| | 00:13 | Referring back to our sketch, this
sort of informs the CSS rules and the
| | 00:17 | dimensions of the objects
we need to create in our CSS.
| | 00:21 | So what I'm going to do here is
I'm actually going to divide this.
| | 00:24 | We're going to create our CSS rules
first, leave them blank, and then we're
| | 00:28 | going to go into HTML and build the
HTML structure, so that we get all the
| | 00:31 | nesting properly in place
with all of the right classes.
| | 00:34 | So to start with my HTML file open
over here in the CSS panel in Dreamweaver,
| | 00:39 | let's come down here and click on New CSS Rule.
| | 00:42 | All the rules we're going to create are
going to be classes, and let's start off
| | 00:48 | creating one called
page_container. We'll click OK.
| | 00:55 | I'm going to leave all of this blank for moment.
| | 00:57 | I'm going to create another new rule.
| | 01:01 | This one is going to be
called .gallery-credit. Click OK.
| | 01:13 | New rule, this one is going to
be called .gallery_type. Click OK.
| | 01:23 | Create another rule.
This one is going to be called .gallery_top.
| | 01:29 | This one is actually going to be the
top of the rounded-corner box, and we're
| | 01:34 | going to use the Photoshop
slice in this one. Choose OK.
| | 01:38 | gallery_content, choose OK.
| | 01:51 | New rule called .gallery_thumbnails. Click OK.
New rule called .gallery_preview. Choose OK.
| | 02:12 | New rule called .gallery_contact. Click OK.
New rule called .gallery_caption. Click OK.
| | 02:32 | Another one called .gallery_bottom. Choose OK.
| | 02:44 | Then the last one we're
going to create, .clear_both.
| | 02:53 | Choose OK, and in this one, we'll go
ahead and define the properties here.
| | 02:56 | Let's come down to Box properties,
come down to Clear, and select both.
| | 03:01 | This is going to be a class that we're
going to use to clear out different float
| | 03:07 | objects that we're going to
be assigning to our layout.
| | 03:09 | The other thing I like to set inside
the Type settings is the line height and
| | 03:13 | set this to a height of 1 pixel. Then click OK.
| | 03:19 | Now this gives us all of the
CSS rules we're going to need.
| | 03:25 | If I click over to the CSS rules here,
we can see all of these are empty
| | 03:29 | except for clear_both.
| | 03:30 | But actually having these rules defined
in the CSS here inside of Dreamweaver,
| | 03:35 | in HTML Code view we can actually
access these, and Dreamweaver will give us
| | 03:39 | some code hinting and quick shortcuts
to assign these into the proper nested
| | 03:43 | structure for the HTML.
| | 03:44 | Let's come back to our index file.
| | 03:47 | Let's choose File > Save All just to make
sure everything saved, and in the next
| | 03:51 | movie we'll create our HTML
file based on these CSS rules.
| | Collapse this transcript |
| Create, nest, and class DIV tags| 00:00 | So in Dreamweaver's HTML file,
let's come over to Code view.
| | 00:04 | Now inside of the Code view inside of the
body tag, I'm going to hit a few Returns.
| | 00:09 | And as I was mentioning in the last
movie, when we start typing inside of code
| | 00:12 | view here, Dreamweaver is going to sort
of help us code this, and it's even going
| | 00:16 | to access the CSS rules that we've created.
| | 00:17 | So let's start by creating our very first div.
| | 00:22 | I'm going to type the beginning bracket,
div, and hit space and type cl for class.
| | 00:29 | Notice how this pop-up window is
coming up and giving me access to everything
| | 00:33 | that is available, either in HTML
or in the CSS that's hooked in.
| | 00:37 | So I am going to hit Return to type
class, and then I see a dynamic listing of
| | 00:41 | all of the classes I've
created in my CSS document.
| | 00:44 | I can use my arrow key down and come
down to page_container. Hit Return.
| | 00:51 | I'm going to hit an ending
bracket to close the tag.
| | 00:54 | I'm going to start a new tag hit a forward slash
and Dreamweaver will automatically close
| | 00:59 | that div tag for me.
| | 01:01 | Now, I'm going to arrow back and get
my cursor in between the beginning and
| | 01:03 | ending div tags. I am
going to hit a few Returns.
| | 01:06 | This is going to be the overall container
which is going to hold everything in our page.
| | 01:11 | In the next line, I'm going to hit Tab,
and let's create our first nested div.
| | 01:18 | class=, this is going to be
the gallery_credit and the tag.
| | 01:26 | And inside of here, I'm just
going to add the word text.
| | 01:31 | That way when we switch to Design view,
I can actually see where this div is and
| | 01:35 | be able to get inside of it.
| | 01:36 | Hit another Return, another div, class=, this is
going to be the gallery_type and the tag, text.
| | 01:56 | Now in the next line, these two divs
are going to have float properties, so we
| | 01:59 | want to clear out the float.
| | 02:03 | class= clear_both. End that tag. Hit Return.
| | 02:08 | Next, we're going to create
the gallery_top. End that tag.
| | 02:18 | gallery_content.
| | 02:34 | Next, we'll create gallery_bottom.
| | 02:35 | Then I'll close out the
space on the ending div.
| | 02:38 | So these are all of the main children
that we're going to create under the
| | 02:43 | page_container area.
| | 02:44 | So now let's come into gallery_
content and let's open this up, and there is
| | 02:49 | actually going to be
children inside of gallery_content.
| | 02:51 | This is going to be the middle area
where we're going to have the stretching
| | 02:54 | graphic defined inside the CSS, our
tiling graphic we created in Photoshop.
| | 02:59 | And this is going to hold our
thumbnails and preview, caption and contact area.
| | 03:04 | So inside of gallery_content,
let's create a new div.
| | 03:12 | This is going to be gallery_thumbnails.
| | 03:16 | Let's end that div.
| | 03:20 | Inside of gallery_thumbnails, let's open
that up, and inside, let's type the word link.
| | 03:25 | This is where we're going
to put our thumbnail links.
| | 03:27 | These links are actually going to be
anchor tags that are going to have block
| | 03:30 | properties assigned, and they are
going to have float properties as well.
| | 03:33 | So we're going to need to clear those.
| | 03:39 | So we'll add our clear_both to clear all those,
| | 03:42 | our float and anchor tags,
once we have them in place.
| | 03:44 | Let's come on the line after gallery_
thumbnails. Let's create a new div. This is
| | 03:52 | going to be our gallery_preview. Let's end that.
| | 04:00 | Let's open up gallery_preview, and
inside there, let's just type the word img.
| | 04:04 | Let's scroll down here a little bit.
| | 04:07 | Now gallery_thumbnails and
gallery_preview are going to be classes that are also
| | 04:12 | going to float, so they're next to each other.
| | 04:14 | Let's add a clear_both to clear
the float on those two properties.
| | 04:22 | Next, we're going to type gallery_
contact. This is going to contain our email
| | 04:33 | address on the left side
underneath all of the thumbnails.
| | 04:36 | Let's create a new tag. This is going
to be the caption. This is going to be
| | 04:44 | floating on the
right-hand side under the preview.
| | 04:47 | Let's end that tag.
| | 04:51 | Inside of each of these, let's just
type the word 'text' so we can see them.
| | 04:55 | Now these two items are also going
to be floating, so let's clear those.
| | 05:05 | Now, on the next line, we're
going to add one more div, class=
| | 05:16 | gallery_preload_area.
| | 05:21 | Now, this particular class name
doesn't exist in our CSS rules;
| | 05:25 | however, we are going to log on to
this class using jQuery, and this is where
| | 05:29 | we're going to preload our images.
| | 05:31 | Just like we saw in the introduction
video, when we click a thumbnail, we will
| | 05:34 | load an image into this area, preload it,
and then when it's ready, we'll move the
| | 05:38 | HTML to the main preview area
and then fade up our content.
| | 05:43 | So with this, this is the entire div
structure and the order that we need to
| | 05:47 | have all of our classes nested inside
of each other to recreate our layout.
| | 05:53 | Now in the next movie, we'll go back
into our CSS rules and start to assign our
| | 05:57 | graphics and styling for
each one of these items.
| | Collapse this transcript |
| Adding CSS properties for main container| 00:00 | Now, we want to apply CSS styles to
the four divs that are inside of the
| | 00:05 | gallery_content area, inside of that content div.
| | 00:08 | So let's start by coming up to
the thumbnails, gallery_thumbnails.
| | 00:13 | Let's go to the Box
properties. 500 pixels wide. Float left.
| | 00:19 | We're going to set zero for all of the padding.
| | 00:23 | Margin, we're going to set zero on the top,
right, and bottom, and 40 pixels on the left.
| | 00:27 | Now sometimes when I'm setting up my
divs and setting up the layout I'll
| | 00:32 | temporarily come in and set a
Background-color so I can see them and see how
| | 00:35 | wide the properties are.
| | 00:37 | So temporarily, let's come in here
and we'll just assign a color to the
| | 00:41 | background of the thumbnails. Click Apply.
| | 00:43 | Now I can see that Yellow bar here is
representing the area for the thumbnails. Let's choose OK.
| | 00:52 | Let's open up gallery_preview, Box
properties for preview. I'm going to set 375
| | 01:00 | on the Height and the Width.
| | 01:01 | This is going to hold that preview-size jpeg.
| | 01:03 | This is also going to float left.
0 for all margin and padding.
| | 01:11 | Let's go to the Background-color and
let's just temporarily set a color, so we
| | 01:13 | can see this one. I'll choose Blue. Click Apply.
| | 01:19 | Now I can see that div
in place. Let's click OK.
| | 01:24 | Just scroll down here a little bit.
| | 01:26 | Now, let's open in gallery_contact.
| | 01:30 | This is going to be the email address on
the bottom-left, under all the thumbnails.
| | 01:36 | Box properties, 477 wide, 60 pixels tall.
| | 01:41 | This is also going to float left.
| | 01:45 | For the padding, we're going to set 0
on the top, 23 on the right, 0 on the
| | 01:50 | bottom, 0 on the left.
| | 01:52 | So we want this to be 500 pixels total,
and web browsers will add right and left
| | 01:58 | padding to the overall width of the object,
| | 02:00 | so 477 plus 23 gives us our 500.
| | 02:04 | Uncheck Same for all for Margin, and
we're going to set 0 on the Top, 0 on the
| | 02:09 | Right, 0 on the Bottom, and the same
40 pixels on the Left for that as well.
| | 02:14 | Background, let's just again temporarily pick
a color so we can see that one. I'll choose green.
| | 02:19 | Click Apply.
| | 02:21 | I can see that box showing up here.
Let's click OK and lastly, let's go to
| | 02:26 | gallery_caption. I'll move this up over here.
| | 02:31 | Box properties for that, we're
going to set 375 on the Width.
| | 02:34 | That's also going to float left.
| | 02:36 | We're going to say 0 margin, 0 padding for all.
| | 02:40 | Background, select violet.
| | 02:48 | Click Apply. Choose OK.
| | 02:52 | Now I can see the four divs we
just created inside the content area:
| | 02:55 | So the thumbnail is here in yellow.
| | 02:57 | The image preview over here on the right.
| | 03:00 | The contact area. And there's one thing I
forget to set. Let's go back to contact
| | 03:05 | real quick. Block properties,
| | 03:07 | we want the text-align to
be align right. Click OK.
| | 03:11 | Now that I can see that all of my
divs are in place and properly spaced out,
| | 03:17 | I am going to quickly get
rid of those backgrounds.
| | 03:19 | The quickest way to do that would be to
just jump over to the code. I'll scroll down
| | 03:28 | to the rules that we just added.
| | 03:29 | background-color for
thumbnails, let's just delete that.
| | 03:34 | gallery_preview background
_color, let's delete that.
| | 03:38 | gallery_contact, I'll delete that.
And then lastly gallery_caption, delete that.
| | 03:47 | Switch to HTML. At this point, let's
choose File > Save All, and now we are ready to
| | 03:56 | start creating the content that
goes inside of these containers.
| | Collapse this transcript |
| Adding CSS properties for content area| 00:00 | Now that we've completed our markup,
let's switch over to Design view.
| | 00:04 | In the CSS Styles panel, let's come over
to .page_container and let's edit that rule.
| | 00:09 | We're going to come down to Box properties.
| | 00:11 | We're going to set this to 960.
We're going to set 0 for all of the padding.
| | 00:17 | For the margin, we're going
to set 20 pixels on the top.
| | 00:19 | We're going to set auto for right and
left so this will center in the page
| | 00:24 | and, 0 for the bottom.
| | 00:25 | I can click Apply to see the
changes take effect and then click OK.
| | 00:32 | Next, we're going to edit .gallery_credit.
| | 00:35 | This is the upper left-hand corner.
| | 00:36 | This where we're going to have our name.
| | 00:38 | Let's go under the Box settings here, and so
for credit we're going to set a width of 425.
| | 00:44 | We're going to set Float left.
| | 00:45 | We're going to set 0 for all the padding.
| | 00:49 | Margin, we're going to set 0 on the top, 0 on
the right, 10 on the bottom, and 15 on the left.
| | 00:56 | Click Apply. I can see that
change take place. Click OK.
| | 00:59 | Let's set the .gallery_type.
| | 01:04 | Box properties for the type, 500 pixels wide.
| | 01:08 | This will also float left.
| | 01:09 | Padding, take off same for all, and set
4 the top, 0 for the right, bottom, and
| | 01:15 | left. And for the margin, we're going to
set 0 on the top, 0 on the right, 10 on
| | 01:22 | the bottom, 0 on the left.
| | 01:24 | Lastly, let's come over to the
Block settings for here, and let's set
| | 01:27 | Text-align to right.
| | 01:31 | Click apply. Then we're going to say OK.
| | 01:34 | Next, let's open .gallery-top.
| | 01:38 | Box properties here, we're
going to set a height of 20 pixels.
| | 01:41 | We're going to set 0 for
all margin, 0 for all padding.
| | 01:47 | Background settings, let's click Browse.
| | 01:49 | I'm going to come into our myGallery
folder, into images, into template, click
| | 01:57 | on page_top, that JPEG. Click Choose.
| | 01:59 | We're going to set no repeat.
| | 02:05 | We're going to set 0 on the X
and Y coordinate. Click Apply.
| | 02:09 | We can see that graphic pop
into place. Let's click OK.
| | 02:13 | Let's edit .gallery_content.
| | 02:18 | Box properties in here,
| | 02:19 | what we want to set is the padding.
| | 02:22 | We're going to set 15 on the top, 0 on
the right, at least 1 pixel on the bottom--
| | 02:29 | this way the repeating graphic will actually
touch the page bottom div--and 0 on the Left.
| | 02:38 | Margin, we're going to leave all 0s.
| | 02:39 | We're going to come over to Background.
| | 02:41 | We're going Browse, select page_tile.
| | 02:44 | This is going to be the graphic
that's going to repeat vertically.
| | 02:48 | On the repeat, we're going to say
repeat on the Y axis, and we'll set a 0,
| | 02:52 | 0 starting position. Click OK.
| | 02:55 | Now let's come into .gallery_bottom.
| | 03:00 | Box properties, set a height
of 20, 0 margin, 0 padding.
| | 03:07 | Background, choose Browse, page_bottom,
click Choose, no repeat, 0 on the X and
| | 03:16 | Y, click Apply, then say OK.
| | 03:18 | Let's come in and create a new rule.
| | 03:22 | I am going to create a tag.
| | 03:24 | We want to assign the body tag. Let's click OK.
| | 03:29 | Here we want to set the background.
We want to set the background color to
| | 03:34 | black. Choose Apply.
| | 03:37 | Let's come over to our Type settings.
| | 03:40 | Let's just set type default color to white.
| | 03:43 | Let's set our default size to 0.75 ems.
| | 03:49 | Our Font-family, we'll choose
the Arial family set. Click Apply.
| | 03:53 | Now I'll be able to see all the
copy, and then let's click OK.
| | 03:58 | Let's choose File > Save All.
| | 03:59 | I am going to hit Option+F12
to preview this in a browser.
| | 04:05 | Hit Reload, just to make sure
the style sheets are in place.
| | 04:08 | Let's open and close our window.
| | 04:09 | I see that all of the gallery pieces are now
centering inside that page content container.
| | 04:14 | And we have the repeating graphic
here opening up so that as we add more
| | 04:17 | content in, this rounded
corner box is going to stretch.
| | 04:23 | At this point, we're ready to start
styling the divs that are inside of the
| | 04:26 | main container.
| | Collapse this transcript |
| Adding CSS properties for headings| 00:01 | Now we're going to add
the headings to our gallery.
| | 00:03 | Let's start in the top-left here,
inside of the div gallery_credit.
| | 00:09 | So up here, we're going to type our
name, select some of the characters,
| | 00:13 | come down to Format.
| | 00:14 | Let's assign this to be an h1 tag.
| | 00:19 | In the upper-right, inside of
gallery_type, I'm going to type Photography.
| | 00:28 | Select a few characters here.
| | 00:29 | Let's assign this to be an H2.
| | 00:34 | With these in place, let's
come over to our CSS panel.
| | 00:36 | Let's create a new rule.
| | 00:38 | The first one is going to be a tag,
assigned to the h1. Click OK.
| | 00:45 | First thing I want to do, come under the Box
properties, set 0 for Padding and 0 for Margin.
| | 00:52 | Let's come under Block properties, set
Letter-spacing of 2 pixels. Come under Type.
| | 01:00 | Let's set the Font to 1.75 ems.
| | 01:02 | This will make this 75%
larger than the base font.
| | 01:08 | Color, we'll select white;
| | 01:10 | Font-weight, normal; and then
we'll click Apply. That looks right.
| | 01:17 | Let's click OK.
| | 01:18 | Let's come over to our CSS Rules.
| | 01:20 | Let's create one more.
| | 01:24 | Another tag defining the h2 properties.
In here, Box model, first 0 for all
| | 01:33 | Padding, 0 for all Margin.
| | 01:36 | Block properties, we're going to set
a letter spacing of 23 pixels. Let's go to Type.
| | 01:44 | This is going to be 1.25 ems.
| | 01:48 | Font is going to be medium gray.
| | 01:49 | Weight is going to be normal.
| | 01:52 | Text-transform, all uppercase. Click Apply.
| | 01:56 | It's going to space this out here.
| | 01:58 | Then we're going to click OK.
| | 02:02 | Now that we have our headings formatted,
we're going to start in the next movie
| | 02:05 | by adding the thumbnail
images to the thumbnail area.
| | Collapse this transcript |
|
|
3. Adding and Linking Thumbnail ImagesAdding and linking the thumbnail images| 00:01 | Now, we're going to add some thumbnail images.
| | 00:03 | Let's get your cursor inside of the
gallery_thumbnails div, after the k, in that
| | 00:07 | default text we put in there.
| | 00:09 | Come up to the Insert panel >
Insert Image > acrobats_thumbnail.jpg. Click Choose.
| | 00:18 | Enter some Alternate text. Click OK.
| | 00:21 | I am going to click on this and select it.
| | 00:25 | Down on the Properties panel, I am
going to come down to the Link area here and
| | 00:28 | I am going to create a
hyperlink around this image.
| | 00:30 | So let's click on the little
folder, and we want to link it to the
| | 00:35 | acrobats_fullsize.jpg. Then click Choose.
| | 00:40 | And when I click away, I can see this
blue highlight around the outside, letting
| | 00:43 | me know that this image actually contains a
link to the high-resolution file. Let's test this.
| | 00:51 | Choose File > Save All, and then Option+F12
or Alt+F12, Command+R or Ctrl+R to reload,
| | 00:56 | and I can see my gallery here.
| | 01:00 | Let's roll over the thumbnail.
| | 01:01 | I get a little pointer. I click it,
| | 01:03 | and it links me over to the full-sized JPEG.
| | 01:05 | Then I can use the
browser's Back button to go back.
| | 01:07 | Now, in the introduction video, we
talked about the fact we were going to
| | 01:11 | progressively enhance this user experience.
| | 01:14 | So in the base part of the design, we're
going to build thumbnails that are just
| | 01:17 | going to simply link to
their high-resolution files.
| | 01:21 | By using JavaScript and jQuery, we're
going to intercept that basic behavior and
| | 01:26 | add preview links and initiate
lightboxes and do all this extra stuff that will
| | 01:30 | only be supported if the browser
supports these more advanced techniques.
| | 01:34 | This base technique here will work all
the way back in really early browsers
| | 01:38 | and even on mobile phones that have
crippled or non-fully enabled web browsers on them.
| | 01:45 | So in here, let's close the browser.
| | 01:46 | Let's come back to Dreamweaver.
| | 01:47 | Let's switch over to Code view.
| | 01:50 | Inside of Code view, we have, inside of
gallery_thumbnails, we have our first
| | 01:55 | anchor tag with the image inside of it.
| | 01:58 | Let's delete that link text, and we want
to add one more piece of code in here.
| | 02:02 | We want to add a title
attribute to the anchor tag.
| | 02:07 | Titles are what actually show up
on a hyperlink if you roll over it,
| | 02:10 | so we're going to use
this to create our captions.
| | 02:12 | And I am just going to type
'Caption goes here for Acrobats'.
| | 02:22 | So at this point, we need to add the
remaining 19 thumbnail images and link each
| | 02:26 | corresponding thumbnail to
its high-resolution file.
| | 02:29 | I'll do that before the next
movie, and then we'll continue on.
| | Collapse this transcript |
| Styling the thumbnail links with CSS| 00:00 | Now, before this movie, I've set up the
additional 19 thumbnails. Just drag them
| | 00:04 | inside of Dreamweaver, following the
process we looked at in the last movie and
| | 00:07 | then linking each one to the full size,
| | 00:09 | and then in addition, adding a custom
caption into each one that just includes
| | 00:13 | the file name somewhere.
| | 00:14 | This way we can actually check in
jQuery to make sure that the caption we're
| | 00:17 | going to pull out of here gets
populated into the caption area properly.
| | 00:21 | Now, you can change the order of the
images by simply changing the order of the
| | 00:25 | anchor tags inside of here.
| | 00:27 | And if I switch to Design view,
this is what we're looking at.
| | 00:31 | Now, in here I'm going to choose File >
Save All and then Option+F12 or Alt+F12 to
| | 00:34 | take a look at this in our
default browser. Hit Reload.
| | 00:38 | Now, Safari is showing me these images
here without a border around the outside.
| | 00:43 | But if I take the same file,
go back to Dreamweaver--
| | 00:46 | let's preview this in Firefox--
| | 00:48 | Firefox will actually show me the
blue border of the hyperlink around
| | 00:52 | the individual images.
| | 00:53 | Internet Explorer will do the same thing.
| | 00:56 | So what we want to do is let's close
our two browsers, come back to Dreamweaver,
| | 00:59 | go into the CSS Styles panel.
| | 01:02 | Let's create a new rule.
| | 01:03 | It will be a compound rule.
| | 01:05 | We're going to type 'a img'.
| | 01:08 | We're going to target image tags only if
they're inside of anchor tags, and what
| | 01:12 | we want to do is come into the Border
settings. On Same for all, we're going to
| | 01:18 | set None for style, so there will be
no border assignments on images that are
| | 01:22 | inside of anchor tags. We'll click OK.
| | 01:27 | We'll choose File > Save All.
| | 01:29 | Let's go look at this in Firefox one
more time. And now Firefox will show me
| | 01:33 | these without the borders around the outside.
| | 01:35 | Now, each one of these items will link
properly, so I can click these and go to
| | 01:40 | each high-res image.
| | 01:42 | Click the Back button.
| | 01:43 | So now that the functionality is in
place, let's go style the thumbnails.
| | 01:47 | Let's close our browser.
Let's go back to Dreamweaver.
| | 01:50 | Let's come over to our CSS Rules.
| | 01:52 | I'm going to create a compound rule.
| | 01:54 | Now, one of the nice things about
Dreamweaver is, when we have our cursor inside
| | 01:58 | of an area and we click Compound Rule here,
| | 02:01 | it will attempt to build a compound
rule for us. And we actually do want a
| | 02:05 | target inside of gallery_thumbnails,
so I'm going to delete all of this text
| | 02:08 | here. Or I could simply click More or
Less Specific to take out the full path of
| | 02:14 | all of the nested classes.
| | 02:16 | So gallery-thumbnails, we're going to do ' a'.
We're going to target the anchor tags.
| | 02:21 | We're going to click OK.
| | 02:22 | One of the first things I'm going to do
is come under the Block properties, set
| | 02:27 | the Display to block.
| | 02:29 | Anchor tags by default have
a display style of inline.
| | 02:32 | We're going to change that to block.
| | 02:33 | Let's come under the Box settings.
| | 02:36 | We're going to set these to 75 x 75 pixels.
| | 02:39 | We're going to set Float left.
| | 02:41 | I'm going to go to Border. Under Same for
all, we're going to click Solid, 1 pixel.
| | 02:50 | We're going to pick the same medium
gray that matches the border of our design.
| | 02:56 | Lastly, let's go to the Box properties.
| | 02:58 | We'll set 0 for all of the padding.
| | 03:02 | For the Margin, we're going to set 0 on
the Top, 23 pixels on the Right, 23 on
| | 03:07 | the Bottom, and 0 on the Left.
| | 03:11 | Now when I click Apply, this will
space these out, so now each thumbnail will
| | 03:15 | have no other thumbnails within 23
pixels of its right and bottom, and that
| | 03:19 | will space the cell to give us exactly
five across and four rows down, equaling
| | 03:23 | our full 20 thumbnails. Let's click OK.
| | 03:30 | Let's create another rule,
another compound rule.
| | 03:35 | Click Less Specific,
gallery_thumbnails a: hover.
| | 03:39 | We'll add a pseudo-class to these, so
when we hover over these, we want to simply
| | 03:45 | come in, change the border to white, click OK.
| | 03:51 | We can test this by clicking
Live view or Preview in Browser.
| | 03:57 | Now when I roll over these,
the border turns white.
| | 03:59 | And let's create one more class.
| | 04:04 | This is going to be the selected state.
So whichever photo we happen to be
| | 04:09 | looking at in jQuery,
we're going to add this class.
| | 04:12 | So I'm going to type a.selected, so any
anchor tags inside of gallery_thumbnails
| | 04:19 | that also have a class on them, I've selected.
| | 04:21 | We're going to come in here,
do the same thing in the border.
| | 04:25 | We're just going to set that to be white.
| | 04:26 | We're also going to set the photo
inside to be semitransparent, but that's a
| | 04:30 | function we're going to add in jQuery.
| | 04:31 | Then we'll click OK.
| | 04:34 | Now to test this, I'm
going to come out of Live view.
| | 04:36 | I'll click on one of these images,
down here in Dreamweaver's document tree.
| | 04:41 | I'll click on the a for the
anchor tag. Click on Class.
| | 04:46 | Let's select Selected. Let's click away.
| | 04:49 | Let's go back into Live view, and I can
see that this one is now in its selected
| | 04:53 | state because the border is
not white. So that works.
| | 04:58 | Let's take that off.
| | 05:06 | Let's choose Save All.
| | 05:07 | So now that we're done formatting our
thumbnail links, the next step is to add
| | 05:12 | some JavaScript and jQuery to our project.
| | Collapse this transcript |
| Downloading and adding jQuery to your project| 00:00 | Now that all of our thumbnails are in
place, I want to make one quick change.
| | 00:04 | I want to go into Code view and I
actually want the refraction photo to be the
| | 00:07 | first one to show up.
| | 00:08 | So as I had mentioned earlier, you can
change the order of the gallery items by
| | 00:12 | simply changing the order of the links.
| | 00:14 | So I'm going to cut and paste the
refraction link and the refraction thumbnail
| | 00:19 | to be before the acrobats picture.
| | 00:21 | So now when I come back out to Design
view, that's the first one that they'll see.
| | 00:25 | And at this point, we're ready to
add some jQuery into our project.
| | 00:29 | So let's open up a web browser.
| | 00:31 | Let's go to jquery.com.
Over here on the far right side is a big button
| | 00:36 | that says Download jQuery.
| | 00:37 | I'm going to click on this.
| | 00:40 | Some browsers will actually
start a download right away;
| | 00:42 | some, like Safari, will actually show
you this code. But again, we can see up in
| | 00:46 | URL here that this points to the .js file.
| | 00:49 | So I can simply come down and say
File > Save As, pick our includes directory
| | 00:56 | inside of our myGallery folder, keep
the file name that they write by default,
| | 01:02 | and let's close our browser.
| | 01:03 | So now back in our operating system,
I can see in the includes directory I now
| | 01:07 | have a copy of jQuery in
addition to our gallery.css.
| | 01:10 | Let's come back to Dreamweaver.
| | 01:13 | Let's choose File > New, and let's
create our own JavaScript file.
| | 01:16 | Select JavaScript from the Page Type,
click Create, File > Save in the includes
| | 01:23 | directory, gallery.js.
| | 01:26 | This is going to be the file where we'll
rewrite our custom JavaScript to hook onto
| | 01:33 | jQuery to change the user
experience in the index file.
| | 01:35 | Let's come back to Index.
| | 01:38 | Let's switch to Code view. We'll scroll up to the top.
| | 01:42 | Let's get the cursor after
the CSS reference. Hit Return.
| | 01:46 | I'm going to come up to the Common insert
panel. On the far right, I'm going to come
| | 01:51 | over here and click insert a script.
| | 01:56 | Click Browse, pick the source.
| | 01:58 | First, we need to bring in our
jQuery file. Click OK. Hit Return.
| | 02:05 | Let's bring in our second script.
| | 02:07 | This is going to be our custom
gallery.js file. Then click Choose. Then say OK.
| | 02:13 | So since our JavaScript file that we are
writing has to hook onto jQuery, jQuery
| | 02:17 | has to be imported first,
then our gallery.js file.
| | 02:23 | Switch back to Design view, and I can
see the related files at the top here in
| | 02:26 | Dreamweaver, letting me know that this
html file includes gallery.css, jQuery
| | 02:31 | min.js, and gallery.js.
| | 02:36 | At this point, we're ready to start
writing some custom JavaScript, and we'll
| | 02:39 | start that in the next movie.
| | Collapse this transcript |
| Overriding the browser's default link behavior| 00:00 | Now, I am going to want to edit my
JavaScript file in a separate window, in a
| | 00:04 | separate text editor, so we can
see Dreamweaver in the background.
| | 00:06 | So I am going to close that.
| | 00:08 | In the index file, I am going
to switch over to Code view.
| | 00:11 | I am going to move my anchor tag code
up here to the very top, so I can see it.
| | 00:16 | I am going to switch back out into my
OS, and I am going to open gallery.js
| | 00:21 | in the text editor.
| | 00:24 | My text editor of choice is Coda,
and you can edit this JavaScript file in any
| | 00:29 | HTML editor, or in Dreamweaver.
| | 00:31 | So, I want to edit my script in a
separate window in a separate application, so
| | 00:36 | I can see the code in the background of
what I'm actually going to be targeting
| | 00:39 | with my JavaScript and jQuery statements.
| | 00:42 | So, inside of our JavaScript document, let's
start by adding our document ready function.
| | 00:45 | We will start with a Dollar sign, which is
jQuery's way of initiating the functions in
| | 00:50 | the jQuery file we downloaded.
| | 00:52 | Type document. Outside of the
parentheses, we will type ready.
| | 01:01 | Beginning and ending parentheses, semicolon.
| | 01:03 | Inside the ready, we're going to type
function, beginning and ending parentheses,
| | 01:11 | beginning and ending bracket.
| | 01:12 | Then we are going to split the brackets.
| | 01:16 | Anything happening inside of here is
going to run after jQuery has downloaded
| | 01:20 | all of the HTML code in the page.
| | 01:22 | So, the first thing we want to do is
start by targeting all of the anchor tags
| | 01:27 | that are inside of the gallery thumbnails div.
| | 01:30 | Start with the Dollar sign, beginning
and ending parentheses, two tick marks
| | 01:35 | for string literal.
| | 01:36 | I am going to type gallery_thumbnails
space a, come outside of the parentheses
| | 01:48 | .click, beginning and ending
parentheses here, semicolon.
| | 01:55 | Now, we are adding a click
event to all of the anchor tags.
| | 01:59 | Inside of here, we are going to type
function, beginning and ending parentheses.
| | 02:05 | Inside of the parentheses, we
are going to put a lowercase e.
| | 02:07 | This is going to capture the
event that actually started the click.
| | 02:14 | Beginning and ending bracket
and let's split this function.
| | 02:21 | The first instruction inside of the
function on the click event for every one of
| | 02:24 | the anchor tags, we are going to type
e.preventDefault, beginning and ending
| | 02:32 | parentheses, and a semicolon.
| | 02:35 | This tells the browser to ignore the
default behavior that it would do on an
| | 02:39 | anchor link, which in this case so far
has been when we click on a thumbnail,
| | 02:42 | the entire page shifts over to
the high-resolution thumbnail.
| | 02:45 | So we are going to tell the browser to
not do its basic function on an anchor tag.
| | 02:52 | And then what we want to do is
let's set the states of the thumbnails.
| | 02:55 | So, let's start by copying the
statement, come down here, Command+V or Ctrl+V to
| | 03:03 | paste, so gallery_thumbnails a.
We are going to go through all of these.
| | 03:08 | I am going to type 'removeClass' and
put a string literal inside of the
| | 03:20 | parentheses, called selected.
| | 03:21 | We are going to make sure that none
of the anchor tags have the selected
| | 03:24 | class assigned to them.
| | 03:25 | On the next line, let's
paste that same statement again.
| | 03:28 | We are going to say all of the anchor
tags .children.CSS, beginning and ending
| | 03:40 | parentheses, semicolon.
| | 03:43 | Inside of here, we are
going to do one string literal.
| | 03:45 | We are going to type 'opacity' then a comma,
then a second string literal and the number 1.
| | 03:54 | So, we are basically going to add
CSS properties to all of the thumbnails,
| | 04:00 | setting the children, the image tag
inside of the anchor tag, with an opacity of 1.
| | 04:07 | Add a few more lines. Then we are going to say Dollar sign
parentheses, this, which is whatever the item is
| | 04:14 | that was actually clicked on.
| | 04:15 | We are going to say addClass, string
literal, selected, and hit Return, Dollar sign
| | 04:30 | this .Children.CSS, beginning and
ending parentheses, semicolon, two tick marks
| | 04:44 | for string literal opacity, two
tick marks .4, for 40% opacity.
| | 04:52 | Let's say File > Save.
| | 04:55 | Let's make sure all of our files are
saved in Dreamweaver. Choose Save All.
| | 05:01 | Then we are going to come out to the OS.
We are going to grab this index file
| | 05:05 | and open it up in a browser. Hit Reload.
| | 05:08 | Now, when I roll over these
items, I see the rollover state.
| | 05:12 | When I click on them, whatever item I
click on, the border turns white from the
| | 05:17 | selected class we created earlier,
and the image inside gets 40% transparent.
| | 05:23 | Now, with our thumbnails fully
functional, let's start on the preview area.
| | Collapse this transcript |
|
|
4. Incorporating the Preview ImagesCreating preview images from anchor links| 00:00 | Now, the preview photo area over on the
right-hand side is going to be anchor links.
| | 00:04 | We are going to have just anchor links
in that right side. We are going to set
| | 00:08 | the background image to be the preview
JPEG, but we are going to put that in
| | 00:12 | through an inline style.
| | 00:13 | So, I am going to start by getting rid
of the img text over here in the image
| | 00:18 | preview, and then we are going to
create CCS rules in order to style these.
| | 00:25 | Let's come over and create a new CSS rule,
Compound selection, choose Less Specific.
| | 00:33 | We are going to do gallery_preview, space a,
any anchor links inside of there. Let's choose OK.
| | 00:45 | Box properties: 375 x 375.
| | 00:50 | We are going to say 0 margin and padding.
| | 00:52 | We are going to come over to the Block settings.
| | 00:56 | Since we are going to be putting anchor links
in here, those have a display type of inline.
| | 01:00 | Let's change that to block.
| | 01:04 | And lastly, let's come over to the Border.
| | 01:05 | We are going to select a solid,
1-pixel, medium gray border.
| | 01:12 | Then we are going to click OK.
| | 01:16 | We'll create one more, .gallery_ preview a:hover.
| | 01:26 | What happens when we roll over the
anchor links on the right? Let's click OK.
| | 01:35 | Border, we are going to set
the color to white. Click OK.
| | 01:39 | Now that we have our CSS rules in place
for the anchor links, we are going to
| | 01:44 | put in the preview area.
| | 01:45 | In the next movie, we are going to start
by creating anchor links in the preview
| | 01:49 | area, based on the thumbnail
you clicked on the left-hand side.
| | Collapse this transcript |
| Changing the preview when clicking thumbnails| 00:00 | Now that we have our preview links
set up in our CSS, let's come over to
| | 00:04 | our JavaScript file.
| | 00:06 | So now what we want to do is create
those anchor links based on the image
| | 00:10 | thumbnail that was already selected.
| | 00:12 | So, let's add a few lines into our
JavaScript file, and the first thing we are going
| | 00:16 | to do is set up a few variables.
| | 00:17 | We are going to type
'var photo_caption', and that's going to equal Dollar sign,
| | 00:28 | this .attr, semicolon,
| | 00:37 | and then inside there a string literal, title.
| | 00:42 | So, whichever anchor link we actually
clicked on, we are going to pull into a
| | 00:45 | new variable called photo_caption the
title attribute of that object. That's
| | 00:48 | going to give us our caption.
| | 00:51 | var photo_fullsize.
| | 00:55 | It's going to be equal Dollar sign this
.attr, and in here we are going to put href,
| | 01:10 | the actual link destination of full size,
because we took the thumbnail images
| | 01:14 | and actually linked them to the
high-resolution full-size image.
| | 01:18 | That's where that variable is going to set up.
| | 01:21 | Then lastly, photo_preview.
| | 01:26 | Now, photo_preview would never use the
term preview.jpg. So right now in our
| | 01:32 | HTML, there is no way for the browser
to know we specifically will have another
| | 01:37 | file size here called preview.
| | 01:38 | So, what we are going to do is
concatenate this by string replacing the file
| | 01:43 | name fullsize with the file name preview.
| | 01:45 | So, in order to do that, we are going
to grab photo_fullsize, copy this, so
| | 01:51 | photo_preview is going to equal photo_
fullsize.replace, beginning and ending
| | 01:58 | parentheses, semicolon.
| | 02:00 | Now, this is not a jQuery function.
This is a straight JavaScript function.
| | 02:03 | We are going to put inside of
replace two tick marks for string literal,
| | 02:10 | fullsize, comma, two more ticks for
another string literal, preview.
| | 02:16 | So, this is very similar to what we
did in Bridge when we were doing our grep
| | 02:21 | search for our file name replacement.
| | 02:23 | So, we are basically coming in here and
saying photo_preview is going to equal
| | 02:27 | the full-size variable, which we got
from this line here and is going to search
| | 02:31 | for fullsize and replace it with _preview.
| | 02:35 | That's going to give us
the URL to the preview image.
| | 02:41 | Now, on the next line, we are going to
actually write the HTML into the page.
| | 02:44 | Dollar sign, tick mark,
gallery_preview.html, beginning and ending
| | 02:57 | parentheses, semicolon.
| | 02:58 | Inside of the HTML tag, we are going
to put two tick marks for string literal,
| | 03:05 | and we are actually going to write
the anchor tag we are going to create.
| | 03:08 | So, beginning tag a space href =. I am
going to put to two full quote marks.
| | 03:15 | I am going to end the tag and then end a tag.
| | 03:22 | Inside the href, I am going
to put an x for the moment.
| | 03:26 | Let's add another attribute,
title equals two quotes, another x, style equals
| | 03:36 | background-image:url beginning and
ending parentheses, semicolon, and let's put
| | 03:50 | an x inside there as well.
| | 03:52 | Now in places in this string literal
where we have Xs, we are going to replace
| | 03:56 | these with the variables.
| | 03:57 | So, let's start with photo_caption.
Let's grab this and copy to the clipboard.
| | 04:01 | Let's come down to title.
| | 04:04 | Let's delete the x. Let's put two
single tick marks, two Plus signs, and then
| | 04:11 | let's paste the variable inside of there.
| | 04:13 | So, what happens here is we get a
concatenation of the string literal and the
| | 04:18 | variables that we set.
| | 04:20 | So, the first part of the statement
comes right up to the two tick marks here.
| | 04:24 | Then JavaScript we will replace in
photo_caption, and then we will get the
| | 04:28 | rest of the statement.
| | 04:29 | So, for the href, we want to take
photo_fullsize, copy that, two tick marks, two
| | 04:39 | Plus signs, paste that in.
| | 04:41 | That means that the preview image is
going to actually link to the full-size image.
| | 04:46 | So, instead of the thumbnails linking
there, we have prevented that default;
| | 04:49 | instead, we are going to have the preview
anchor link to show the image in the background.
| | 04:53 | Then later on, we are actually going to
add the lightbox link to this as well.
| | 04:57 | Then lastly, let's come
over and grab photo_preview.
| | 05:00 | This is the preview JPEG url.
| | 05:03 | Let's come over to the x in the image
url, two ticks, two Plus signs.
| | 05:10 | Then we will paste that in.
| | 05:11 | Let's choose File > Save.
| | 05:16 | Let's make all of our files inside of
Dreamweaver are saved. Choose File > Save All.
| | 05:23 | Let's come back to our operating system.
| | 05:23 | Let's grab the index.html file,
double-click it, Command+R or Ctrl+R to reload.
| | 05:32 | And now when I click on each of
these images, I see that the image will
| | 05:38 | actually update over on the right-hand side.
| | 05:40 | Again, this is just an anchor link with
the background style. And of course, if
| | 05:44 | I roll over it, we can see the pop-
up window coming in for the title.
| | 05:53 | So, that works great!
| | 05:54 | In the next movie, we are we are going
to actually pick up the caption, and we
| | 05:56 | will populate the caption
to go along with the photo.
| | Collapse this transcript |
| Changing the caption when clicking thumbnails| 00:00 | Inside our Click function for all
of the images, I want to add a second
| | 00:04 | statement, and we are going to update HTML
that's part of the gallery caption as well.
| | 00:10 | So let's start off with a Dollar sign, string
literal 'gallery_caption.html', beginning
| | 00:22 | and ending parentheses, semicolon.
| | 00:25 | Inside here, let's start our string literal.
| | 00:26 | Let's start off with a
beginning and ending P tag.
| | 00:30 | Inside of our paragraph tag, the first thing we
are going to add is going to be an anchor tag.
| | 00:35 | Let's end the anchor tag, set an href
attribute inside, open the letter x in
| | 00:46 | there. And in here, we are
actually going to say View larger.
| | 00:52 | Come after the P tag.
| | 00:57 | Let's start a new p tag and an ending p
tag. And inside of here, we are going to
| | 01:04 | put a letter x. Now back in our href
tag, let's add in title attribute, two
| | 01:12 | quotes and the letter x. Now are going to
come in here and replace these with the
| | 01:17 | actual variables. So the href, this is
going to be a text link which will also
| | 01:22 | link to the full-size preview, and we
will add classes later to initiate the
| | 01:26 | lightbox function on that.
| | 01:27 | Command+C or Ctrl+C to copy
the variable, photo_fullsize.
| | 01:33 | href, two tick marks, two Plus signs, paste.
| | 01:40 | The caption, we are going to grab this.
| | 01:42 | We are also going to put this in this anchor
tag, two tick marks, two Plus signs, paste.
| | 01:50 | The lightbox functionality actually
pulls the title attribute from the anchor
| | 01:53 | link and puts the caption in the overlay
as well, since we need to actually pass
| | 01:57 | that along to the large image
that's showing up in the lightbox.
| | 02:02 | Now, we have photo_caption on the clipboard.
| | 02:04 | Let's come over to the x here, two
tick marks, two Plus signs, paste.
| | 02:11 | Let's choose File > Save.
| | 02:12 | Let's go back to the operating system.
| | 02:14 | Let's open this up in our browser, hit
reload, and now each I click these links, we
| | 02:22 | get a View larger link, so this
actually links to swatches full size.
| | 02:25 | If I click this, it links to that
full-size image. Here's my browser's back button.
| | 02:31 | 888, rose, lantern, then the caption and
again, the link is updating to lantern as well.
| | 02:39 | So at this point, we are dynamically
generating anchor links of the main preview
| | 02:44 | image, which I can click to go to full size,
| | 02:47 | we are generating a text-based link
going to the same destination, and we are
| | 02:51 | pulling out the caption data from the
title attribute of the original thumbnail
| | 02:56 | that we clicked on and
populating the text down here as well.
| | 02:59 | What we need to work on
now is to set up our preload.
| | 03:03 | We are actually going to use a jQuery
plug-in called far IN space Image Preloader
| | 03:07 | to preload the images so that when we
fade the images up and down, we make sure
| | 03:11 | that the image has been downloaded
first before we do that special effect.
| | 03:15 | So in the next movie, we are going to
start by adding a plug-in to help us
| | 03:17 | to preload images.
| | Collapse this transcript |
|
|
5. Adding a PreloaderAdding an image preload plug-in for jQuery| 00:01 | Now, when we first started our
JavaScript file and hooking jQuery into here, we
| | 00:05 | used this feature called the document ready.
| | 00:07 | But the document ready makes sure that
all scripts and all HTML and text are
| | 00:12 | downloaded from a particular web page.
| | 00:15 | What it doesn't do is download images.
| | 00:17 | There are a few ways that we
can actually preload images.
| | 00:20 | There's lot of free plug-ins up on
line. So the one that I really like is
| | 00:24 | one called far IN space.
| | 00:26 | So in the Final Project folder, in
the include, there is a directory called
| | 00:29 | farinspace. And there is a README file
in here, and the README file will give
| | 00:34 | you a link to the web site where
you can download a copy of this.
| | 00:37 | You can also read about its usage.
| | 00:39 | What I really like about this is it is a
plug-in, so that means we simply link to
| | 00:44 | one JavaScript file and we can use a
very simple statement, such as .image
| | 00:50 | preload, point to an image or a div
containing images, and this script will
| | 00:55 | automatically preload all the images
that it sees, and when it's done, it can
| | 00:59 | give us a callback function to
tell us that they are all preloaded.
| | 01:01 | So I am going to close this in the browser.
So I am simply going to grab the farinspace,
| | 01:10 | I am going to grab the whole folder,
and I am just going to drag a copy over to
| | 01:13 | our includes directory in our project.
| | 01:15 | Once I have done that,
let's come over to Dreamweaver.
| | 01:19 | Let's go to the main index page.
| | 01:22 | Let's go into Code view.
| | 01:23 | Let's scroll to the top.
| | 01:24 | Now, this is a jQuery plug-in, so we are
going to insert this after the jQuery
| | 01:32 | statement but before our JavaScript
statement, since our JavaScript is now
| | 01:35 | going to require jQuery and the image preload.
| | 01:39 | Let's come up to Common.
| | 01:41 | Let's choose Insert Script.
| | 01:43 | Let's go to our myGallery
folder > includes > farinspace.
| | 01:49 | We will grab imgpreload.js.
| | 01:53 | Actually, I am going to
grab the minified version.
| | 01:55 | It's a little bit smaller.
| | 01:57 | Click Choose and say OK.
| | 01:59 | Switch back to Design view. File > Save All.
| | 02:04 | Now that we have the preload image in
place, I want to add a special effect so
| | 02:09 | that every time you click an image, I
want to fade up the picture. But the
| | 02:13 | picture can only fade up if
it's already been downloaded,
| | 02:16 | so we are going to add in the
preloader, then add in the special effects as
| | 02:19 | well, and we will start
all that in the next movie.
| | Collapse this transcript |
| Setting a dissolve transition between previews| 00:00 | Now that we've added our image
preload plug-in, let's come over to
| | 00:03 | our JavaScript file. I'm going to open this window a
little bit more, as our script gets taller.
| | 00:11 | I am just going to get rid of
some of the extra line spaces here.
| | 00:16 | I'm also going to add in a few comments.
| | 00:18 | This group of four statements here,
this actually changes the thumbnail state.
| | 00:22 | So we will just put a comment, two
forward slashes, update thumbnails.
| | 00:34 | These are going to be
set up vars from thumbnail.
| | 00:44 | Then down here, these two statements
we made earlier, the update preview
| | 00:48 | and gallery_caption,
| | 00:49 | we are actually going to use
these inside of another function.
| | 00:52 | I am going to save my document so far,
and let's come in here. And the first thing
| | 00:58 | we want to do, once we click on of
these functions--and remember we are still
| | 01:02 | working inside of the anchor tag clickEvent--
| | 01:06 | the first thing we are going to do, add a Dollar
sign, beginning and ending parentheses,
| | 01:11 | two tick marks, .gallery_caption.
| | 01:16 | We are going to take the caption div.
| | 01:19 | We are going to use jQuery slideUp.
| | 01:26 | This is going to animate the caption
upward, because once we click on an item, we
| | 01:30 | want to caption to fade away.
| | 01:32 | Another line, Dollar sign, beginning and ending
parentheses, two tick marks, string literal.
| | 01:39 | We are going to say gallery_preview,
fadeOut, beginning and ending parentheses, semicolon.
| | 01:51 | 500 ticks in there as well.
| | 01:55 | So when we click it, the caption will
slide up. The gallery preview area,
| | 02:00 | the area holding the anchor tag with the
image in the background, will now fade out.
| | 02:03 | Now inside of fadeOut, I am going
to get my cursor after the 500.
| | 02:07 | I am going to put a comma, space,
add a function, beginning and ending
| | 02:14 | parentheses, beginning and ending bracket.
| | 02:17 | By putting this function inside of this
fadeOut function here, this is going to
| | 02:20 | happen on what we call a callback.
So once the animation has faded out over half
| | 02:25 | a second, it's going to run this function.
| | 02:28 | Let's put that on the brackets.
| | 02:30 | So inside of here is what's going
to happen after the fade-out occurs.
| | 02:35 | So once the fade-out occurs what we are
going to do is come down, grab the two
| | 02:40 | statements down here,
| | 02:41 | we are going to cut these to
the clipboard and paste them up here.
| | 02:44 | So we are going to set the gallery
image preview of the HTML to the new photo
| | 02:52 | size based on the variables we set up
in the vars up here. Then we are going to
| | 02:57 | set the gallery_caption as well.
| | 03:00 | Once that's happened, we are going to
fade the gallery back up. So let's come
| | 03:05 | over here, grab gallery_preview, copy
to the clipboard, paste it down here.
| | 03:11 | I will type fadeIn, over half a
second, add a new line, gallery_caption,
| | 03:27 | slideDown, which is going to show
this content, beginning and ending
| | 03:32 | parentheses, semicolon,
500 ticks inside of there.
| | 03:39 | Let's choose File > Save.
| | 03:40 | This should create the animation that
we were looking for, click a link, slide
| | 03:44 | up the caption, fade out the preview,
switch the HTML for both preview and
| | 03:48 | caption, and then fade up the
preview and slide down the caption.
| | 03:52 | Let's come out to the operating system.
| | 03:53 | Let's double-click the index file,
Command+R or Ctrl+R to reload, click on an
| | 03:59 | item. And if you are looking at the
caption area, each time I click, the caption
| | 04:07 | slides up, changes, and fades back down--
or slides down, rather, and the image
| | 04:12 | fades out. We switch the HTML
and the image fades back up.
| | 04:15 | Now that this behavior is working as we want,
| | 04:20 | in the next movie we are going to add
preload into this script, so that when we
| | 04:23 | click on a thumbnail we will preload the
preview image first and then fade it up
| | 04:27 | to make sure that it's fully loaded
and we get a nice smooth transition.
| | Collapse this transcript |
| Implementing the preload functionality| 00:01 | Now to add our preload check into here,
the first thing we need to do is pick a
| | 00:05 | place to put the image so
that we can perform the preload.
| | 00:09 | So back in Dreamweaver, back in Code view,
when we were first setting up our div
| | 00:13 | structure, we created this class in
here called gallery_preload_area.
| | 00:16 | I am going to copy the name
of this class to the clipboard.
| | 00:20 | I am going to switch back over to our
JavaScript file, and what we're going to do
| | 00:26 | is that we want to run the
preload after the fadeOut is happened.
| | 00:29 | So we're actually going to
come in here, add a few lines,
| | 00:33 | I am going to put a Dollar sign,
beginning and ending parentheses, two tick
| | 00:39 | marks for string literal, dot and
then Command+V or Ctrl+V for paste,
| | 00:45 | gallery_preload_area.
| | 00:46 | We're going to set the HTML,
beginning and ending parentheses, a semicolon.
| | 00:52 | Inside of here, we are going to set a
string literal, image, source, equals, two
| | 00:59 | quotes, forward slash, end bracket.
And inside there, we're going to put a letter x.
| | 01:04 | So what we're going to do is take the
preload area and put an image tag in that area.
| | 01:12 | Let's grab photo_preview variable, select the X,
hit Delete, two tick marks, two Plus signs.
| | 01:20 | We're going to concatenate
the string, photo_preview.
| | 01:27 | On the next line, I am going to
copy the declaration, picking that div.
| | 01:35 | So we're going to say Dollar sign, .gallery_
preload_area img, so we are going to target
| | 01:40 | all images that are inside the preload area,
which we just added one on the line above.
| | 01:45 | Now, we're going to use imgpreload.
| | 01:52 | This is the name of the actual function
| | 01:53 | that's part of the far In image
preload tool. Beginning and ending
| | 01:58 | parentheses, then a semicolon.
| | 02:01 | So this statement, this
is the name of the plug-in.
| | 02:03 | So once we hooked in the farinspace into
our page, we can call this just like any
| | 02:07 | other function and this will actually
perform a preload on all of the images
| | 02:12 | that are inside of preload area.
| | 02:16 | Inside of here, let's add a function,
beginning and ending parentheses,
| | 02:21 | beginning and ending bracket.
| | 02:24 | This function is callback function,
and it's only going to run after all the
| | 02:27 | preload has happened.
| | 02:28 | So let's open this up a little bit.
| | 02:31 | So these are all of the things we want to have
happen only after the preload has taken place.
| | 02:36 | So, let's cut all this to the clipboard,
put our cursor inside here, and let's
| | 02:42 | paste all of this inside here.
| | 02:43 | I will tab some of this in,
so we can see the structure.
| | 02:47 | So now when our full script happens, the
anchor tags get clicked. We prevent the default.
| | 02:55 | We set the states of the thumbnails.
| | 02:57 | We defined variables based on the
thumbnail you clicked, which is this statement.
| | 03:01 | We created a photo_preview URL because
we don't actually use that in our HTML.
| | 03:06 | We set the gallery_caption to slide up,
we fade out the picture. Then we take the
| | 03:12 | preload area, we put an image tag in it,
then we run a preload on that to make
| | 03:16 | sure that's been loaded. Then we
update the HTML for the preview, update the
| | 03:20 | HTML for the caption, and then we
show the preview and show the caption.
| | 03:24 | Let's hit File > Save.
Let's come out to our operating system.
| | 03:27 | Let's double-click
index.html, Command or Ctrl to reload.
| | 03:33 | Now when I click on these images, the
preload will happen and the type will fade up.
| | 03:38 | Now, open this window up a little bit,
and if we put this up on a web server
| | 03:43 | where we have maybe a little bit of a
slower Internet connection, or we put a
| | 03:46 | really heavy preview file, a file
with a big file size, we will actually see
| | 03:50 | the preload happening.
| | 03:52 | But also notice down here I have the
image preload area, which is where the first
| | 03:56 | image tag is getting written.
| | 03:57 | So as I click these, notice that on the
right-hand side when the image fades out,
| | 04:01 | we see the picture down below
switch, and then we get the fade-up.
| | 04:04 | So now what we need to do is set a
CSS rule that hides that particular div.
| | 04:13 | Let's come back over to Dreamweaver.
| | 04:17 | Let's create a new CSS rule.
| | 04:19 | This is going to be a class.
| | 04:20 | We're going to set .gallery_preload_
area, click OK, Block properties, set the
| | 04:34 | Display to None--we don't
want the user to ever see that.
| | 04:39 | Let's choose File > Save All.
| | 04:40 | Let's go back to our browser.
| | 04:43 | We will hit Reload.
| | 04:46 | Now, I can click on the images.
The image will get written into that area we
| | 04:51 | just set to be hidden with CSS, the preload
happens, and then the content will fade back up.
| | 04:56 | Now that our preload is working, now we
want to add in our lightbox plug-in and
| | 05:04 | set our overlay links.
| | Collapse this transcript |
|
|
6. Adding a LightboxAdding a lightbox plug-in for jQuery | 00:01 | At this point, we are ready to
add in a lightbox functionality.
| | 00:03 | So the one I really like and I've
included in the exercise files is Fancybox.
| | 00:10 | To learn more about Fancybox, you
can visit their web site, fancybox.net.
| | 00:13 | You can download the latest copy of
this particular plug-in, and this works
| | 00:17 | exactly the same way as the preload
works, where we hook in our files and
| | 00:21 | then we simply can make calls called Fancybox
just like regular functions inside of jQuery.
| | 00:25 | So I am going to take the Fancybox
folder in the includes directory from
| | 00:31 | Exercise Files and we are going
to move this over into our project.
| | 00:37 | Once this is here, let's
come back to Dreamweaver.
| | 00:39 | Let's go to our index file.
| | 00:41 | Let's go to source code.
| | 00:42 | We're going to get our cursor
after the preload JavaScript.
| | 00:49 | It can go before or after that;
| | 00:50 | it needs to come after the
jQuery include and before our custom js file.
| | 00:56 | So up here, I am going to choose common,
insert script, I am going to go to the
| | 01:02 | desktop, my gallery, includes,
jquery.fancybox, go into the fancybox folder.
| | 01:11 | Down here at the bottom, I
will open this window up more.
| | 01:13 | We are going to click on
fancybox-1.3.4.js. Click Choose. Click OK.
| | 01:21 | Let's hit another Return.
| | 01:25 | Now we need to import a CSS file,
come up to Format > CSS Styles > Attach Style
| | 01:31 | Sheet, Browse > myGallery > includes >
jquery.fancybox > fancybox folder, and we will
| | 01:40 | grab the fancybox-1.3.4.css
and click Choose and say OK.
| | 01:48 | Switch back out to Design view.
| | 01:50 | I can now see the Fancybox, related
files showing up here on the top of
| | 01:53 | Dreamweaver as well.
| | 01:54 | Now in the next movie, we're going to
set up some jQuery statements to activate
| | 01:58 | hyperlinks to load
high-res images in the lightbox.
| | Collapse this transcript |
| Creating a custom function for lightbox properties| 00:00 | Now, the way Fancybox works to initiate
links into the lightbox is to simply add
| | 00:05 | classes on anchor tags and then set up
a jQuery statement that looks for those
| | 00:09 | anchor tags with specific classes.
| | 00:11 | If I go into the includes directory, into
Fancybox, they've included an index.html file.
| | 00:16 | If I double-click this, this will
give me a bunch of different examples on
| | 00:20 | different ways the Lightbox can work.
| | 00:22 | This one here just simply fades up and down.
| | 00:24 | This one here runs an elastic animation
up and down, giving us that zoom effect.
| | 00:30 | This one just sort of pops on and pops off.
| | 00:33 | We can also do different
things with the captions.
| | 00:35 | We can have captions show up underneath.
| | 00:36 | We can have captions show up inside the
border. And the one I like, the last one
| | 00:41 | here, I can actually have the text show
up inside a semi-transparent overlay.
| | 00:47 | And in order to see how all of these
are coded, we can take that index file and
| | 00:51 | open it up in either a
text editor or Dreamweaver.
| | 00:54 | So at the very top here, I can see here
are the different examples, and lower in
| | 01:00 | the code, we can see how they are executed.
| | 01:02 | So this is an anchor tag
with an ID of example 1.
| | 01:06 | So example 1 is the one that
just simply fades up and fades down.
| | 01:09 | I'll come up to the top of the
document. I'll look for example 1, which is right
| | 01:13 | here, and that's just the
simple Fancybox statement.
| | 01:18 | Other ones here have a bunch of
different settings: overlay, transitionIn,
| | 01:21 | transitionOut, opacity settings,
positioning for the captions, a whole bunch of
| | 01:27 | different formats--and of course,
the web site documents all of these
| | 01:30 | different switches.
| | 01:31 | So what we're going to do is go into
our JavaScript file, and one of the things
| | 01:36 | that we'll also need to do is
typically we assign the anchor tags to be paid
| | 01:41 | attention to by Fancybox by
putting it in the document ready.
| | 01:44 | However, since we are going to
be pulling HTML from one spot and
| | 01:48 | concatenating the data into the
caption area, we need to be able to
| | 01:53 | reinitiate all of the links.
| | 01:55 | So what we're going to do is create a
brand-new function outside of the document
| | 01:59 | ready in our JavaScript file and run
the Update Overlay links any time we're
| | 02:05 | going to make a change.
| | 02:06 | So we're going to start by coming to
the bottom of the document here outside of
| | 02:11 | the document ready, and we're going
to create our own custom function.
| | 02:14 | I am going to type 'function', and we're
going to call this setFancyboxLinks.
| | 02:26 | That's the name of the function.
| | 02:27 | We can name this anything we want.
Beginning and ending parentheses,
| | 02:32 | beginning and ending bracket.
| | 02:33 | I am going to hit a few returns.
| | 02:36 | Now inside of here, I am going to tab in.
| | 02:40 | We're going to make a jQuery
statement, Dollar sign, beginning and ending
| | 02:44 | parentheses, two tick marks for string
literal, a.overlayLink, come outside of
| | 02:55 | here, .fancybox, beginning and
ending parentheses, then a semicolon.
| | 03:04 | Then inside this function, we're
simply going to put just two brackets--
| | 03:07 | beginning and ending.
| | 03:08 | We're going to split that open.
| | 03:11 | Let's come inside here,
and let's set some of the parameters.
| | 03:14 | I am going to do two tick
marks for a string literal.
| | 03:19 | We're going to do titlePosition, space,
colon, another string literal, the word
| | 03:28 | over, this will place the text over
top of the overlay. Let's tab in.
| | 03:33 | This is going to be
'overlayColor', colon, string literal, '#000'--that's black.
| | 03:44 | Next line, string literal 'overlayOpacity' : 0.8,
80%, put a comma. Next line, type
| | 04:03 | 'transitionOut', string literal, 'elastic', comma.
Next line, 'transitionIn'. I just realized I
| | 04:19 | spelled the first transition incorrectly.
| | 04:20 | 'transitionIn', also 'elastic', then a comma.
The last line we're going to turn 'autoScale': to true.
| | 04:40 | Now in the last one, we don't need a
comma because these are paired values, but
| | 04:44 | the very last one doesn't need a comma
because there's nothing that's going to
| | 04:46 | be repeating after that.
| | 04:49 | So now this function,
setFancyboxLinks, is going to run.
| | 04:52 | It's going to find every anchor tag
with the overlay link class assigned to it,
| | 04:56 | and it's going to
activate it as a Fancybox link.
| | 04:58 | So now we need to
actually initiate this function.
| | 05:01 | So let's copy this. Let's scroll up.
| | 05:07 | Let's come up here into the area
where we are preloading the image and then
| | 05:10 | setting all of the content inside
both the preview and the caption.
| | 05:13 | So let's come in here after
we say gallery_preview.fadeIn,
| | 05:17 | gallery_caption.fadeIn.
| | 05:19 | Let's add another line. Then we're
simply going to put setFancyboxLinks with the
| | 05:26 | beginning and ending
parentheses and a semicolon.
| | 05:28 | This is going to call this function.
| | 05:30 | Now the last thing I need to do,
let's come down and select overlay link.
| | 05:35 | Let's copy that to the clipboard,
Command+C or Ctrl+C, and we need to come up here
| | 05:40 | and add this class into these two links.
| | 05:43 | So this first one here, gallery_preview,
let's put a space inside the anchor
| | 05:47 | tag, class equals, two quotes, paste in
overlay link. And then down here, we have
| | 05:54 | our text base link which says view larger.
| | 05:56 | Let's add the same class in
here, class="overlayLink".
| | 06:02 | So now these two anchor tags are
going to get dynamically written in.
| | 06:07 | Then we're going to fade up all the content.
Then we're going to run the setFancybox function.
| | 06:11 | This function is going to then go back
through the document, look for every anchor
| | 06:15 | tag with overlay link, and it's going
to find these two that we just created,
| | 06:18 | and then it's just going to activate
these on click to overlay the image and
| | 06:22 | it's going to link it to the full-size photo,
which is the href of the original anchor tag.
| | 06:27 | In addition, the caption is going to
come from the title tag in the anchor tag.
| | 06:32 | Let's choose File > Save.
| | 06:34 | Let's go over to our operating system, and
let's open up index.html in our browser.
| | 06:38 | Once it opens, we will hit Command+R or
Ctrl+R to Reload, click on an image.
| | 06:45 | The image fades up, caption
fades in, I click on the image.
| | 06:49 | This initiates the lightbox. I see the
full screen image. I also see the caption
| | 06:53 | down here, Caption for refraction goes here.
| | 06:55 | Now in the lightbox, I can
actually click anywhere;
| | 06:57 | I don't have to hit just on the X. It
zooms back into place. Click on another
| | 07:03 | photo, come down and
click on the View Larger Text.
| | 07:08 | Now, notice that the image, if we use the
Elastic setting, will create the elastic
| | 07:12 | zoom based on the actual link.
| | 07:14 | So the text link down here, the image
will be really tiny, autoscale down to
| | 07:19 | the size of the text link, and then zoom up.
| | 07:21 | So now that this
functionality is working perfectly,
| | 07:24 | in the next movie, we're going to add
another custom function for the update
| | 07:27 | thumbnails, and then we're going to be
able to set up a function that's going to
| | 07:30 | autostart the gallery.
| | 07:32 | So when we first load it, it will
automatically highlight the first picture, set
| | 07:35 | the thumbnail, and set the caption.
| | Collapse this transcript |
| Setting links to activate the lightbox feature| 00:01 | Now, when we are inside of our gallery,
when we hit Reload in the browser, one
| | 00:05 | thing you'll notice is that we don't
have a default image to show up here.
| | 00:08 | The preview is only getting populated
and faded in once we click on an image.
| | 00:13 | Also, whatever image would show up
also needs to have its thumbnail replaced.
| | 00:18 | Now, the way we've written our script so
far, the update thumbnails is actually
| | 00:23 | part of the clickevent for all the anchor tags.
| | 00:26 | So if I switch over to our JavaScript
statement, we're going to scroll up here.
| | 00:31 | We actually set this with these statements
here, but again, they're inside the clickevent.
| | 00:36 | In order to run these by themselves,
we're going to put the thumbnail updater in
| | 00:41 | its own function as well.
| | 00:42 | So I'm going to come up here and I'm
going to put two forward slashes in front
| | 00:46 | of all of these statements.
| | 00:47 | We're going to comment those out.
| | 00:51 | Down here, lower in the page, we're
going to create another custom function.
| | 00:54 | I'm going to type function
updateThumbnails, beginning and ending parentheses,
| | 01:05 | beginning and ending bracket.
Then we're going to just split this open.
| | 01:12 | Inside updateThumbnails, what we're
going to do is we're going to actually test
| | 01:16 | the state of the thumbnails.
| | 01:17 | Since we're no longer in the click event,
we lose the actual event that we were
| | 01:21 | using before to assign the classes.
| | 01:23 | So, what we're going to have to do is
cycle through all the anchor tags first
| | 01:26 | and then check to see which anchor tags
match the preview image that's showing up.
| | 01:31 | So to begin this, let's start with
a Dollar sign, beginning and ending
| | 01:34 | parentheses, string literal,
gallery_thumbnails, space, a. I'm going to come
| | 01:47 | outside of that, .each, beginning
and ending parentheses, semicolon.
| | 01:55 | Inside of each, we're going to type
function, beginning and ending parentheses,
| | 02:01 | beginning and ending bracket.
| | 02:03 | Now when we run the update function,
the jQuery statement is going to run
| | 02:07 | through every one of the anchor tags.
And what we want to do is test the
| | 02:10 | equality of the preview area to the
actual anchor tag that's being tested.
| | 02:17 | So we're going to type if, beginning
and ending parentheses, beginning and
| | 02:23 | ending bracket, and then
we're going to split it.
| | 02:27 | Inside of the if statement, we're
going to type a Dollar sign, string literal, .gallery_preview
| | 02:36 | space a, .attr. beginning and ending parentheses, href. Two Equal
signs, we're going to test the absolute equality of this statement
| | 02:52 | and Dollar sign, this.attr, string
literal inside of there, href.
| | 03:09 | So as we go through every one of the
anchor tags, it's going to check the
| | 03:12 | current one, which is the 'this' item
and see if it matches what we wrote over
| | 03:17 | into the gallery preview area.
| | 03:19 | If they match, we're
going to set jQuery statement;
| | 03:24 | this, .addClass, string literal, 'selected'.
| | 03:38 | On the next line, we want to fade out the
child, the image tag that's inside of there.
| | 03:45 | this, children,
beginning and ending parentheses.
| | 03:53 | Actually, we're going to use fadeTo.
| | 03:57 | We want to actually animate this down.
Beginning and ending parentheses,
| | 04:02 | semicolon. And then inside here we're
going to say 250, so a quarter of a second,
| | 04:08 | and then .4. That's going to be the transparency.
| | 04:11 | Let me scroll down here a little bit.
| | 04:15 | Then we're going to type else,
beginning and ending bracket.
| | 04:19 | Let's open that up. Dollar sign, beginning and ending
paretheses, this, .removeClass beginning and ending paretheses,
| | 04:32 | string literal, selected, semicolon. Next line,
this, .children, beginning and ending parentheses, .css
| | 04:53 | beginning and ending parentheses, semicolon.
| | 04:57 | Inside here, one string literal, opacity,
comma, another string literal, number 1.
| | 05:10 | So this puts this in a
completely separate function.
| | 05:13 | Let's grab updateThumbnails.
| | 05:14 | Let's copy that to the clipboard.
| | 05:17 | Let's scroll up, and right after
setFancyboxLinks, let's paste that
| | 05:20 | function there as well.
| | 05:21 | So basically, we have removed this
functionality from being inside the click-
| | 05:26 | event, and we moved it into its own function.
| | 05:30 | Now that we have the updateThumbnails
out as separate function, this is going to
| | 05:34 | allow us, in the next movie, to set up a
statement that's going to autostart the
| | 05:37 | gallery when the browser loads this.
| | Collapse this transcript |
|
|
7. Taking Care of the Final DetailsInitializing the gallery on page load| 00:00 | Now to have our gallery autostart
when we hit Reload in our browser, we're
| | 00:03 | going to want a series of
instructions very much like the onclick event
| | 00:07 | functions we assigned to the anchor tag.
| | 00:10 | So let's switch over to our JavaScript file.
| | 00:13 | I am going to clean this up just a
little bit, get rid of some of the negative
| | 00:16 | space in here. And what we're going to do
is basically grab the same instructions,
| | 00:22 | starting from the declaration of these
three variables all the way down to this
| | 00:29 | ending statement here, which actually
ends the fadeOut function for preview.
| | 00:33 | I am going to hit Copy,
copy this to the clipboard.
| | 00:38 | Now, I need to stay within the document ready
but outside of the anchor tag clickevent.
| | 00:44 | That goes from here to here.
| | 00:45 | So let's come outside of that area.
Still inside the document ready.
| | 00:51 | Let's put a comment for ourselves.
| | 00:54 | We'll just say initialize gallery on
load, hit Return, Command+V or Ctrl+V for
| | 01:06 | paste, and we're going to paste
in all of these instructions.
| | 01:09 | So at the very top, we have these declarations.
| | 01:13 | I am actually going to remove these
tabs in here, get this formatted so now I
| | 01:26 | can see this ending bracket
here ends this statement here.
| | 01:32 | So to begin, let's come up here, and the
first four variables, let's just change
| | 01:36 | these to have first_ in front of them.
| | 01:39 | So let's copy, paste, paste, paste.
| | 01:45 | We're also going to paste these in front
of all of the variables within the script.
| | 01:51 | So this becomes first photo
preview, on line 43, this becomes
| | 01:56 | first_photo_fullsize, first caption,
first photo, first_photo_fullsize,
| | 02:04 | first_photo_caption, first_photo_caption.
| | 02:06 | Next, for the variables up here,
since we're not inside that clickevent we
| | 02:09 | don't know which object was actually clicked.
| | 02:12 | So we're going to change the 'this' in here.
| | 02:14 | Let's delete that, put in two
quotes for a string literal.
| | 02:18 | We're going type '.gallery_thumbnails a'.
Outside of the parentheses, we're going
| | 02:30 | to type.first(), and then the dot
attribute, then the title string literal.
| | 02:37 | This is jQuery's way of going through
all of the anchor links and finding the
| | 02:41 | first one in all of the anchor tags
inside of the gallery_thumbnails div.
| | 02:47 | Let's select this entire statement,
copy it, come down to fullsize and hit
| | 02:52 | Paste, change title string literal to href.
| | 02:59 | Then just like in the other function,
we're actually going to take photo preview
| | 03:03 | and concatenate that by taking photo_
fullsize, doing a string replacement on the
| | 03:08 | full-size text, and putting in preview.
| | 03:11 | Everything else in here is
going to run pretty much the same.
| | 03:14 | Let's hit File Save.
| | 03:15 | Let's come over to our browser. Hit Reload.
| | 03:18 | What we'll see right away is the very
first image fades up once it preloads.
| | 03:25 | So I'll just click a few other images here.
| | 03:26 | Let's come back, hit Reload.
| | 03:30 | So now our initial state is working great.
| | 03:33 | Now that our gallery is initializing
on load, let's go add an email link and
| | 03:37 | let's add some style to our View larger link.
| | Collapse this transcript |
|
|
8. Styling the HyperlinksAdding icons and styles to the zoom and contact links| 00:00 | Now we're going to add a
hyperlink down for the contact section.
| | 00:05 | Let's get our cursor down in here.
| | 00:06 | We had put that default text in the
beginning inside of the div.gallery_contact.
| | 00:11 | Let's come in here and type
'Contact Me'. Let's select that.
| | 00:19 | Down in the Properties panel, under the
Link field, we're going to make this a
| | 00:22 | hyperlink that will
initiate a mail to: address.
| | 00:24 | So we're going to type mailto, colon.
| | 00:27 | Then you can put in your email,
address info@lynda.com, hit Return.
| | 00:36 | That will create a hyperlink.
| | 00:37 | Over on the right-hand side, we had that
default text in for where the caption goes.
| | 00:41 | Let's just delete that text.
| | 00:43 | So with a hyperlink created on the
left, let's come over to our CSS Styles.
| | 00:47 | Let's go to new hyperlink style, Compound path.
| | 00:52 | We're going to say a.contactlink.
| | 00:58 | This is going to be a brand-new class.
| | 01:00 | We'll assign it into the anchor
tag in a moment. Let's choose OK.
| | 01:05 | The Properties, we're going to pick in here.
| | 01:07 | Color, we're going to set to white.
Text-Transform, all uppercase.
| | 01:12 | No Text-decoration.
| | 01:16 | Under the Box model, let's come under Padding.
| | 01:19 | Let's turn off Same for all.
| | 01:20 | We're going to set 0 on the
Top, 30 pixels on the Right.
| | 01:25 | This is going to keep the type
inside the anchor tag 30 pixels from the
| | 01:27 | right-hand side where we're actually
going to position that envelope. 0 on the
| | 01:32 | Bottom, 0 on the left, 0 for Margin.
| | 01:37 | Lastly, let's come into Background.
| | 01:40 | For Background image,
we're going to choose Browse.
| | 01:43 | Let's go into our template
directory inside of images directory.
| | 01:45 | We're going to grab the link_email. Click Choose.
| | 01:50 | Background-repeat: we're going to say no-repeat.
| | 01:54 | On the X, we're going to align it to the
right, and we're going to set 0 on the Y axis.
| | 02:00 | Click OK. Now in order to assign this here, I'm going to
get a few characters inside of the link here.
| | 02:06 | I'm going to come down to the document
structure, click on the anchor tag to
| | 02:09 | select the whole thing.
| | 02:10 | I'm going to come down to the Class
declaration inside of the Properties panel
| | 02:15 | and select contactlink.
| | 02:16 | Now what's interesting here is
Dreamweaver doesn't actually preview this
| | 02:20 | properly, but if we come up here and
hit Live view and scroll down, we'll see the
| | 02:26 | envelope showing up on the right-hand side here.
| | 02:29 | Let's come out of the Live view.
| | 02:30 | Now, we're on the
right-hand side where the caption is.
| | 02:34 | We actually have those inside of a p tag.
| | 02:36 | So let's come over here to New CSS Rule,
and create a regular tag.
| | 02:41 | Let's come down to select the p tag. Click OK.
| | 02:50 | Font color, let's pick a medium gray.
| | 02:55 | Box property, Margins, 0 on the Top,
0 on the Right, 12 on the Bottom, 0 on
| | 03:02 | the left. Click OK.
| | 03:04 | Let's create one more rule, a compound rule.
| | 03:09 | This is going to be the zoom link.
| | 03:11 | Let's type a.zoom. Click OK.
| | 03:18 | Color is going to be white.
| | 03:19 | Text-decoration is none.
| | 03:23 | Box properties, Padding, 0
on the Top, 0 on the Right.
| | 03:29 | We're going to put 5 on the Bottom
because height of the zoom actually needs
| | 03:33 | a little bit more room below for the
handle of that graphic. 20 on the Left.
| | 03:39 | Set 0s on the Margin.
| | 03:40 | Next, let's go to Background.
| | 03:43 | We'll click Browse.
| | 03:45 | We'll choose link_zoom. Click Choose.
| | 03:49 | Under Repeat, we're going to say
no-repeat, 0 on the X, 0 on the Y. Click OK.
| | 03:55 | Now, the zoom link needs to be
applied to the link that we're dynamically
| | 03:59 | generating inside of this right-hand area.
| | 04:02 | So let's switch over to our JavaScript document.
| | 04:06 | What we're going to do is we're going
to add a class into the overlaylink on
| | 04:12 | the text one called zoom, and we're adding this
in first on the clickevent for the anchor tag.
| | 04:21 | So let me select this and hit Copy.
| | 04:23 | We're also going to add it to the
link down here, the overalylink, the
| | 04:28 | text-based one that is inside
the initialization area as well.
| | 04:32 | Let's click Save on the gallery.
| | 04:33 | Let's go back to Dreamweaver.
| | 04:37 | Let's choose Save All, Option+F12,
load in a browser, hit Reload.
| | 04:44 | Now, I can see my styles down here.
CONTACT ME highlights links to info@lynda.com.
| | 04:51 | If I click this, it'll load
this up in an email client.
| | 04:54 | View larger has a little magnifying glass.
| | 04:57 | We have our gray type down here.
| | 04:58 | So as I click, we can see
the type opening and closing.
| | 05:02 | Well, this concludes all of the
functionality for the interactive gallery.
| | 05:05 | In the next movie, we'll talk about a
few things you might want to consider for
| | 05:08 | extending the capabilities
of this particular project.
| | Collapse this transcript |
|
|
| 9. What's New (April 2013)? |
10. Where to go from hereSome ideas for further enhancements| 00:00 | So now that you've completed programming
your own photo gallery, there are some things you
| | 00:04 | might want to consider to
further increase the functionality.
| | 00:08 | One of the things to take a look
at is inside the Fancybox framework,
| | 00:11 | there was that index file.
| | 00:13 | We're going to open that up again.
| | 00:15 | Down here under the set of examples,
there's a group where we can take a series
| | 00:19 | of images and load a series up in the lightbox.
| | 00:22 | So by assigning a whole bunch of
images to the same relative group, which
| | 00:27 | we'll take a look at in the code for a
moment, when we load up the lightbox,
| | 00:30 | when we move to the right, we'll see
that we have an arrow where I can click
| | 00:33 | and go to the next picture.
| | 00:36 | Now, when I roll side to side, I can
go to the previous picture or the next
| | 00:40 | picture, and I can cycle
through any number of images.
| | 00:44 | So basically, I can go from
high-res file to high-res file.
| | 00:47 | The way that this is set up,
| | 00:49 | I am going to take a look at
the index file in a text editor.
| | 00:52 | I'm going to scroll down here and
we're going to take a look at where this is
| | 00:58 | set up. Down here in Image Gallery, they have a
relative attribute here with an example_group.
| | 01:04 | Every one of these items is
part of the example_group.
| | 01:07 | By simply grabbing another object, I'll
take the last one and just paste it in
| | 01:12 | again, so we'll have two copies of
12_b, which is a picture of that camera.
| | 01:16 | I'll hit Save, come back
to the browser, hit Reload.
| | 01:20 | Notice I have now two pictures of the camera.
| | 01:21 | No matter which image I click
on, that's the one that starts.
| | 01:25 | So I can go Previous, Next.
| | 01:28 | We can also use the scroll wheel.
| | 01:29 | So I am rotating the scroll wheel on my mouse.
| | 01:32 | There are the two
different pictures of the camera.
| | 01:36 | Where we might want to use this in this
particular gallery is perhaps we don't
| | 01:41 | use the preview area at all, and we use
just the series of thumbnails, and every
| | 01:45 | one of these thumbnails is
part of a relative group.
| | 01:47 | So then bypassing the preview altogether,
we click on a thumbnail and just bring
| | 01:51 | up the lightbox where we can then go
through all of the high-res images by
| | 01:55 | either using the scroll-wheel
or the right and left clicks.
| | 01:59 | The next thing you might want to do
is do a Google search on other photo
| | 02:02 | galleries that you can download.
| | 02:03 | A lot of people have put together
plug-ins that will do a lot of the
| | 02:06 | functionality that we've just gone through.
| | 02:08 | So once you've spent the time to learn
the techniques, you can either program
| | 02:12 | your own and continue extending this
project or start dissecting other projects.
| | 02:16 | So typically, I'll go into Google and
search for different types of slideshow
| | 02:22 | galleries that I want to start from.
| | 02:24 | So I can scroll down here and I can see
a bunch of different plug-ins that I can
| | 02:29 | download; some have some similar
functionality. Or I can also use some of the
| | 02:33 | user experiences of these to
incorporate into my particular project.
| | 02:38 | Well, at this point, I'm concluding
this course, and I really appreciate
| | 02:41 | you watching.
| | Collapse this transcript |
|
|
