How to Use the Photo Gallery Tool in 90 Second Website Builder

http://90secondwebsitebuilder.com

---

Closed Caption:

hi it's Craig use with another 92nd
website builder video tutorial
in this one I'd like to show you how to
use a tool called the photo gallery
now this is not an extension that you
need to install
it's already built into the extra
category in the toolbar
right over here it's called photo
gallery of course and of course a photo
gallery
is a tool that would he that you would
use to display photos are images
on your website so I'm just dragging out
a box stretching and dragging on the
campus and I'm gonna double-click
so we can go inside and look at the
photo gallery properties
and of course it's here where we would
add are
photos or are images to our gallery
something to do that first by clicking
the Add button
and here I have a collection of some
images I'm gonna load in here famous
magicians
I'm gonna just click on an image and
click Add now you'll notice I'm gonna
have a row over here so you can see
the dimensions of these images are
actually all very different nears a
purpose in me telling you that but
notice that this one is 347 by 450
pixels that I'm adding
arm but the next one here is quite a bit
different this one is
275 by 375 and then I'm gonna
and a Doug Henning who's even
I got a bigger picture chat another one
here Harry Houdini
citizens a really big win 7 58 by 1988
so notice that these are all different
and I'm gonna
probably pause the video here so you
don't have to watch me do all these
okay one more and we've got
areas okay so I've added about $10
different images here in this column you
can see the file name
I don't need to do anything with that
the computer or the software's gonna
deal with that
but the title will matter because that I
can use
in my display depending on the options
that I choose not behavior that i jus
I'm gonna want to be able to read the
titles so I would go through an edit
these titles to be a little bit
friendlier looking so we'll do that and
I want to withdraw love them in this
particular video but I'll just do some
here so we can
see what that's going to look like this
but his home and their
and then there's dog delayed ok henning
great magician and you probably know
this guy has Harry Houdini
even though that's not his real name it
was Eric Weiss
but i digress. China there was some free
magician trivia for
okay anyway we would fill out the titles
here
and arm so it would look to look look a
little bit nicer
so what's gonna happen according to the
behavior here
is when we click on thumbnails we're
gonna see I
a different view %uh each picture in the
same browser window let's see what that
looks like a man a click OK
so here's my thumbnails and by the way
this object like anything else
can be stretched around if I wanna show
bigger thumbnails or smaller thumbnails
on my webpage I can
let's make a bigger one so we can seem
better in this video or by the way
before we all that let me go back in
here
I can also decide how many columns and
how much spacing in padding I want me to
we know so there's a two-column Berge in
a bit
so since I have 10 it's probably more
sensible by two let's go back to three
just
for the sake of clarity here so that's
where three common sight now you'll
notice
even though the images were all
different sizes remember
that is the original source image was a
different size
the photo gallery sorta Armstrong come
down to very similar thumbnail size is
not exact as you can see because
this one's kind of a wonky 1 but that's
just because the way the original image
was being
you know landscape instead a portrait
but as you can see it does help me
organize these images that are all
different sizes
into thumbnails that are more manageable
okay
so let's preview and I'm in a click f5
so let's see what this does
now every time I click on a thumbnail
this is what it's gonna do
it's gonna take me 20 that actual image
and I'm gonna look at it in its for
original size so here's the real sizeof
that image
but what it did was it took me to the
image itself notice it didn't take me to
a webpage
or pop-up any kind of a special window
all it did was it took me to the image
in the browser
that I'm in okay so that's a very very
basic
simple use a photo gallery when we click
on the on images it just goes to that
image
so let's change that let's make this a
little bit more
you know fancy alright so incentive
opening in the same browser window
we could do that only open in a new
browser window
it'll look the same issues opens up a
separate window but let's jump down here
to the pop-up window
this is considerably different I'm gonna
hit f5 so we can preview our work
now when I click on a thumbnail it's
gonna open it up it's gonna open up the
image again not a page but an image
but this time it opens up a browser
window that accommodates the
actual size have an image as you can see
this image is 540 pixels by 743
and so it opens up a window love that
size and shows me the image and then I
would have to close it
to go to the next one and again this is
a smaller image
so it's gonna open a smaller browser
window but it knows what to do based on
those settings
so again here's a smaller one yet if I
open up a larger one
michel de Niese I get a really big
browser window
okay so that's a little bit nicer as you
can see gets pretty cool
but it gets better yet so I close the
preview on gonna double-click
look at our photo gallery properties
again let's go down and look at another
one here
again we can open that in another window
that's very similar
here's what the jQuery option would look
like now
every time we use our anytime we use a
jQuery object
we get some settings to choose from we
can choose what kinda theme we want
what in other words the color of that
box so let's just pick one here
I can also change the font style on the
size of the box and
weather is resizable a draggable those
are just for jQuery objects and since
we're using a jQuery dialog
we have all those options so sister this
really quickly I'm going to exclude
okay we're gonna preview our work now
you'll see since
I'm using images that are all different
sizes the jQuery pop-ups probably not
the best way to do this I'll show you
why
is when I click on it it only gives me
one size
I have to live with that size for all of
these images
and as you can see since all my images
are different sizes that's probably not
a great way to display them
however I can make this resizable and I
can make it draggable
but I have to ask myself if I really
want my users to have to do that
now there might be some cases where you
would but
that might be more appropriate when the
images are all the same size but in my
case you can see
they're all different so I don't really
want my user to have to do all this work
when they pop it up so let's look at
another option
let's close the preview window go back
to our Design
double-click and let's pick the bottom
option I here's the most popular and
you'll recognize why it's just really
the coolest one
it's called the lightbox gallery now
when we choose this behavior
we also get four sub options
if you will four different styles or
types
have lightbox will start with fancybox
and you'll recognize this you've seen it
in different places on the internet I'm
sure
it's very coarse and click OK I'm gonna
click f5 on my keyboard in preview this
now when I click on a thumbnail I get a
lightbox
that looks like this as you can see the
box opened up
and it's just the right size for this
particular image
it also gives me my title in a nice
little button looking thing down here
a close box here and as a hammer over
the image
you can see the Celerra for navigation
so I can click
to the next image without having to go
back to the thumbnails
I can just click through and again the
light box will accommodate
the image just right here's the big one
then there's a smaller one and I can
click through and I can also
click back because these navigation
arrows appear
okay so that's a great way to do it as
you can see
we've come a long way just choosing
these different options let me close
this
let's go back into the properties and
again we're in lightbox
as our action and we will look at fancy
boxes go to the next one galleria
this is very different and this is just
a really cool way to display photos
okay I'm in a quick f5 this time instead
of seeing the thumbnails
I'm gonna see what you might call a
slider and I can slide thru
my gallery just by clicking bees a rose
there's a forward
and a back a row but I also have this
little line above
thumbnails down here so I can jump to
the first one
or to the last one or any image I want
or
click-through so that's just a really
smooth away
to show photos on your website using the
lightbox
with the Galleria tight okay but we
still have a couple more to go
pretty photo I think this is my favorite
this is really more common probably the
most popular
on the internet least right now I love
light boxes and you'll see why it's got
a lot of bells and whistles but it's
pretty nice
I'm in a click f5 this time when I click
a thumbnail
here's my lightbox I have a title up
here
I got a title down here I've got a close
box here
got navigation on the bottom it's easy
to see I've also got navigation app
hovers and I've also got
this little thumbnail slider down here
so this is guy just about every fancy
gizmo in it
you can imagine so I can click through
this way or
I can click through this way
or I can use it down here
so there's a lot of options for the user
to get around
and I i just like these little thumbnail
so they can jump around or they can go
from pictured a picture
so that's a really really great way to
do it there's a close box
easy to see there's one more option now
and it's similar to what we just saw
pretty photo
it's just slimmer so they call it slim
box again it's one of the lightbox
gallery types
but it's just a little bit slimmer looks
really nice a clicker five so we can
preview that one
as I click on a thumbnail you can see
the light box comes up
again and accommodates the size but
instead of having a lot of navigation
options is just simpler
there's a harbor right here for a next
and I can however for next again I can
also however for previous
and then down here we get our title and
are close by so she's a little bit
simpler cleaner
another very common way to display
photos
or images and again you can see the
window shrinks
or grows to accommodate whatever image
it's showing so that's how you use a
lightbox
info to go he's just a great way to
display images
or photos couple other things now you
should know that's the fun part
I you also still have some style
settings for your basic
lay out here so if you wanted to display
the titles
below the thumbnails you could do that
by clicking this box
because you can choose a different font
if you want and you can set that far too
in all the things you would expect and
now you can see the titles appear below
the thumbnails even when I preview
there they are in the font I chose and
clicking on them
brings up my pretty photo arm rather my
lightbox
so anyway as you can see there's just a
lot of fun things a play within this
one particular to or has hidden in the
extras
toolbox over here called photo gallery
so use that to display your photos
you'll find you have a lot of different
options
a lot a different ways to do that with
this tool and 92nd website builder