Expression Web Quicktips: Creating a CSS Photo Lightbox

For more Expression Web Quicktips, go to http://www.zoom-in.com/design/expression-web-quicktips

Utilize Cascading Style Sheets to create a Lightbox style photo gallery.

http://www.zoom-in.com/design

---

Closed Caption:

this snippet is creating a CSS photo
lightbox effect
using Microsoft Expression Web part 1
I Matthew Hendershot presenting from
zoom in on line for Microsoft
in this tutorial we're going to take a
look at several features with an
Expression Web
they make it easy for you to create your
own photo gallery using a light box
style
effect effect consists displaying an
image
in a modal window within your web site
where the thumbnail the image is clicked
Expression Web with its rich CSS editing
capabilities and a vast array of
built-in javascript function
can help us achieve similar results
without having to do much coding at all
the benefits of a custom lightboxes fact
means that we can use the box for just
about any purpose
and push any kind of content into the
box itself to get started
open Microsoft Expression Web and then
select File
new website from the new dialog box
choose general and then choose empty
website
she's a path in a folder the new site
click OK to continue
now create a new HTML page by clicking
file
new HTML save your pages default got
HTML
import an image to use with this example
into the root folder
your site it can be any image like as
long as it's Jay pag
give or PNG file format
to import the image copy it from its
source folder and then return to
Expression Web
right click over the root folder inside
the site and select paste
from the folder list in Expression Web
drag newly-created
imported image into your default that
HTML page
Expression Web will prompt you to fill
out the alt text attribute for the image
do so if you like and click OK
click on the image to select it and then
hold down the Control key on your
keyboard
and press the letter T
the control T combination creates a
thumbnail image for you automatically
and then links the thumbnail to the
original version since we do not need
this link
right click on the thumbnail and select
hyperlink properties click the remove
link button
in the Edit hyperlink Properties dialog
box to remove the link
save your page by clicking on the Save
button you'll be prompted to save the
thumbnail image
accept the default settings and click OK
in the same embedded Files dialog box
we now have a large version any
thumbnail version our picture
next position your cursor below the
thumbnail image
and drag out a division element from the
expression web tool box
the DI the element is found in the HTML
section
this division tag will serve as the
display for the original version of the
image
so will contain the larger image itself
plus a link to close the effect window
before we can use this division for this
purpose we need to customize its taco
locate the manage Styles panel in
Expression Web
located at the bottom right hand corner
interface by default
click on new style at the top of the
panel in the selector probed
type in content and make sure that
define him is set to
current page in the phone category
choose
aerial abadaka sensor for the font
family setting
set the font size2 ten-point and then
switch to the background category
set the background color property to
quite then switch to the border category
for border-style: let's make sure that
same for all
is checked and then select solid in the
top property
choose medium for border WYD an
80 8080 as the color for bordercolor
switch to the box category and set the
pattern for all sides 25 pixels
just say anything for margin
switch to the position category
unspecified absolute for the position
property
three for the z-index
25 percent for top 25 percent for left
switch to the layout category and set
the overflow property
visible
click OK to save the style
L highlight the new division element and
go back to manage styles
right click over the content style we
created and click
apply style what we just did is to set
up our display box for larger image
we want in our lightbox effect we did
not give the box
a fixed size because we wanted to wrap
to the content they were going to place
in namely our image select the larger
version
our image using the folder list drag
inside
the division doc content layer
position the cursor after the image and
hit enter
type in the word close and had control
e2 center everything
in layer
now look at the Layers panel Expression
Web
which is usually a tad the same section
the interface as manage styles
in layers you see elaire defined with no
ID
double click on the no ID line and said
its ID property to
content box in the leftmost column
the Layers panel represented by I click
to sell twice
until the eyes closed for the content
box layer
this will make it invisible on the
screen
thanks for watching I Matthew hunter
shot from zoom in on line
presenting for Microsoft