Dreamweaver Tutorial | FancyBox JQuery Plugin Gallery- A lightbox alternative

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

Get the Plugin here http://fancyapps.com/fancybox/

Check the licence and download here http://fancyapps.com/fancybox/#license

Mohit Manuja
Training Online and face 2 face at mumbai ,India
get trained in dreamweaver (html, css, css3, html5, JQuery), Flash and actionscript 3.0
call email or skype me for more details:
+91-9022995952 / mohitsmail@yahoo.com / mohit.manuja
Join me on FaceBook http://facebook.com/mmanuja

check me out on http://Qualitylessons.net

---

Closed Caption:

hurry champs matters more than people
today we've talked about a lightbox
alternative
it's called fancybox it indeed is so
fancy it indeed is so empowered in fact
before I talk a lot about it i will
start I would like to start with about
browser preview in google chrome excuse
me
alright and in my example I'm using
three pictures you could have used many
more to right now this these are three
pictures and questions you can see the
thumbs on the left-hand side right now
to kick off the slide show you can click
anywhere on the page people anywhere
just don't need to click only on the
piece times i can click anywhere and
then i can just sit back and relax as
the you know the different pictures
three pictures in my example just scroll
from left to right the best part is i
can also use the arrow keys as i'm doing
some now to scroll through the pictures
i could even use the mouse scroll wheel
right i'm using the most rolling now to
our browse through the different
pictures in my example and as I said you
collect as many more
all you can just sit back sit back and
relax and watch it
autoplay and this autoplay can be quite
easily set to off by us a small
adjustment to the code let me show that
to you as well let me get back to
Dreamweaver this was done in Dreamweaver
and our just one see the auto place was
set to true if I said it defaults let's
take up a browser preview again after
saving the changes to the file
again let me click on the first image
see the auto plants been set off now i
can click on the left corner to the left
pane to you know to slide you not to go
to the previous image or the right
corner to the right part of the picture
to advance to the next slide you have
this cross but not here to close the
picture up like so i can click again to
start close and you see there are two
hours out here which let you know that
you can advance or you can go back to
the previous image so all in all an
amazing of fancy box lightbox
alternative people it's called fancybox
you see again i'm actually using the
arrow keys on my keyboard up and down i
can use them as left and right arrow
keys to write and has already talked
about earlier i can even use the mouse
scroll wheel to advance for the previous
the next too much that's what is so
fantastic about it
the good news is if that is not enough
you can include youtube videos and Vimeo
videos you can use a getup you cannot
Google Maps to but they'll be in the
next part some other total people not
this tutorial itself and not love it
with the this tutorial right right so uh
let's go to the fancy box side where you
get all the assets that will that will
where you'll get the unity fancybox
plugins plugins jquery plugin people you
can grab it from the fancy box website
the URL is fancy apps . com for /
fancybox right I just showing you the
tip of the iceberg there's so much more
that you can actually do
this one gives you a fair idea of what
fancybox can actually do but there's so
much more to it you can i would urge you
to go to the website explore the
different options that have talked about
in this tutorial I'm just getting I'm
letting you know I'm getting you started
people into something wonderful
alright the first thing that you would
need to do is you need to obviously
check the license out and download the
project you you need to go out here and
download the project you see fancybox
it's free to use as long as you doing it
for personal use on nonprofit website
projects but if you want to use fancy
box for commercial websites you need to
pay a small fee you can check that out
yourself again this is showing in indian
rupees the local currency and just
you know switch over to your app that's
19 bucks nine dollars in us switch to
your country and check it out
alright let me also bring up my local
site folder you see this is my local
site folder this is the HTML document
these are the three pictures in question
people and this is T fancy box our
assets that I would need the plug-in
basically that we need for the fancy box
to function
what I've done is actually downloaded
from the website of extracted and I've
just renamed the outermost folder to FB
although they had a long big name
I've just renamed it to FP and these
were the assets that you'll find inside
that folder a demo or lip a source and a
few more right you see I will need all
the files that are present inside i will
need all that I would need just a
handful of them i'm going to show you
how to use you don't get those handful
of you you're just going to link a few
files from the plug in the fancy box
plug it only a few files people and it's
so very easy to create trust me on that
what I want to do is I want to restart
the project from the very beginning from
non-scratch so that will get a very good
idea how this this can be so very easily
done
it's so very easy people trust me on
that just follow me along and you'll
find that it's so easy right oh let me
get back to Dreamweaver and want to
demolish on about 70-percent the project
so that I can show it to you all over
again
alright
in fact i'm going to remove everything
that is inside the body of the document
whatever goes inside the opening of the
closing body tax people is what is
visible in the webpage and i'm also
going to demolish everything out here
ok so you can notice that i'm actually
using our opening in close
sorry i'm using html5 doctype the title
has been set to fancy box that's a
lightbox alternative what is lightboxes
quite similar to the way and see box is
although I thought this was a lot better
more empowered excuse me I have the
opening and closing style tags out here
so that i can write my internal are
embittered rules out here
ok first things first let me tackle the
HTML let me be inside the body of the
document let me start inserting the
images one by one so let's see if we can
actually you know i'm bringing our three
together
meet my contact not this matt least the
first picture goes in
i'm skipping the alternate text you
shouldn't on a real website people
ok now once you get the first picture
and you'll notice that the size is 800 x
500 I would want to use this image as a
thumb so I'm going to drop in the with
i'm going to click out here where it
says what I'm going to go down out any
properties by look I'm going to drop the
with 2 301 I had enter your right arm
scales down to 300 190 because i'm going
to use it as a Tom you need to click OK
similarly let me hit enter get in the
second image skip the alternate text you
sure it if you're working on a real
website scale down to 300 by 171 you
know I automatically use of it
300px scale down the high to keep the
aspect ratio to 131 but begin the third
image why I'm a skating down because i
want to use it other than insert the
image 30 much skip the alternate text
for now 300 with and automatically
scales on the high 2 190 okay at this
point we save the document up pick up in
google chrome while adding much at all
just we we just have three different
pictures are basically scale down so
that the with this 300 alright very good
now what I'm going to do is I'm going to
wrap all these three pictures inside i
do so
i'm going to use Zen coding courses
courses plugin to call out real fast of
hash my gallery and press ctrl +
$OPERAND comma you see what happens it
expands itself i'm using the encoding
supplying people you can get it for
dreamweaver you can just get up get the
plug into cord reel faster we have
actually done so let me cut this room
out here and they stood out here
so what I've really done is I've
encapsulated those three pictures and
saturday which has an idea of my candy
alright alright so i'm going to click
out here it says my gallery i'm going to
click on this plus button and i'm going
to go out there I'm going to say my
gallery space and ing basically i'm
going to target images inside my gallery
dev and i'm going to set the contextual
selected to compound obviously it's a
component of people so images inside my
gallery ID that's upon bond rule i want
to save the five inside the document
itself basically creating and unmarried
rules want to say okay let me define the
rules people that beset imagine off to
space out the basically the you know the
different pictures of 20 pieces all
around and
we go to the block diagram where a set
of display of block I would want my
pictures to be top bottom not left and
right so changing the inline to a block
the the intrinsic be able than with
behavioral images to be an inline
element basically stand left and right
I'm turning it to block will force it to
the top and bottom already at the same
time that being go to the bar calorie
i'm going to make sure that it's a ridge
of 5 PX and it's white in color and
let's say okay at this point let me save
the document up and take up a browser
preview you'll actually notice the three
pictures now with a rich high peaks
border already very cool let me go back
to Dreamweaver let me go to modify it a
little patron please let me then set the
background color of my document to a
hash let's say 0777 and let's say okay
at this point let me save the document
up take a razor preview and this is the
way things look like right now borders
looking really cool
wonderful right oh let me get back to
want my dream your document and advanced
further now next to people what I'm
gonna do is I'm gonna you know
click on any where the first time is any
where online number 22 alright i'm going
to link the small come to the original
bigger image and I'm gonna do that see
this is d this is the thom SSD time I
want to go to the link i want to link it
with the original size of the image I'm
going to go out here
browse for the original image which is
this much and I say okay now this little
image this is a time people this one is
a series of them link is the ordinary
wise at the time because i had scaled
down there tonight if you remember so
i'm i'm linking up with the original
bigger image like this already
similarly i'm going to do with the
second comp basically the ordinal image
which has been scaled down 300 171 as
you can see out here letting it out with
of you know with a bigger much to order
to get a match and likewise with the
click anywhere out here in line number
23 and I'm going to link it up really
good image which has not been scaled out
at this point
let me just take a preview in google
chrome so i click out you can see that
you know it takes me to the original
bigger image was gonna bring a much
bigger which we cool right now but the
you see the light works calorie hasn't
kicked in yet
I'm gonna do that now happy with the
core view so you can actually see the
code clearly for a minute so we have the
around the different i do calorie my
gallery that is then we have those three
pictures you know the small counseling
to the ordinal bigger image so you're
the a and Qatar nature of this is the
from and this is the original bigger
image rather this is the thumb and this
is the original bigger image we're cool
okay next people what I'm going to do is
I'm going to link it up with the plug-in
you see this is my local site folder and
this is the blogging people these are
the end of the requisite files that make
you know this is this is the fancy box
plugin that are downloaded and all the
requisite tried that inside out here and
as I told you earlier modeling link up
with certain files only that are
actually required for the blog into
function let's do that then
ok so just after the closing style tag
people which has an opening side dragged
out of the type attribute said to text
CSS I'm gonna start linking it up with
the requires javascript files so the
first thing that I'm going to do is I'm
going to link it with the main jquery
file the backbone that makes everything
fire you know this is the first thing
that you need to do link up with the
latest jquery library so script then we
have the type attitude going it's going
to be equal to text javascript and then
slc which I'm going to browse and get
inside the fancy box folder then I'm
gonna go to the left floor of the
library folder
well this is the layers equation 1 10.1
minified version people you can even get
it from being off the internet people
you can download and you can link it up
yourself or you can use it as a CD and
content delivery network to but in my
example i'm just going to link it up
this way
so one . 10.1 minify the latest equity
version i'm going to say okay
close it like this so we have the
opening and closing subtracts out here
ok this was the first thing to second
again i'm going to use the script tag
then type set to your right texture
strip again SRC and I'm gonna browse for
the mouse wheel back people this is
going to make the mouse we'd work if you
remember actually most revealed to you
know go through the different images 1
by 1 i'm going to link it up with this
file will not close the script tag out
here happy here under this time I'm
going to use the link but I want to link
to CSS files and link then we have the
air trip attribute to point to the
required CSS file let me click out here
go to the side truth and get back to FB
then get inside source and the fact that
i'm looking for this jquery fancybox CSS
is the one this is the way i'm going to
link it up then we have the relationship
attribute going will you see to say that
it's a style sheet that's all okay and
then we close the link time up next
people i'm going to type scripture game
type text/javascript as always and then
we have
SRC this browse and this time people
make sure that you link it up with
jquery fancybox back to equity and see
box back and let's say okay close to
script back up like this
ok the linking off the this document
would be external you know the
externally line plugin is actually
complete in a way at this point we just
say the document up and take up a
browser preview
still it doesn't work this the smaller
bit of code that i need to write only
after that can I you know see the fancy
box plugin in action so let's do that so
I'm gonna say script
type
text javascript as always looking for
dtime up like this and let me write some
internal jquery okay when I say and the
document is actually ready when the dawn
has initializing the elements are
accessible when the elements are
actually did to be manipulated this is
the vehicle checks and document to the
document . already Carla we check if the
dome has initialize all the elements are
actually accessible when they are when
they are i would want to target target
what target the class fancybox why am i
doing that is going to become very clear
very soon glass and see box
I want you to target the class fancy box
and apply on it a function called
fancybox it's an inverse function
basically the plug-in will finer fancy
box button parent semi-colon that's all
that you need to to now we are actually
ready and we can see the gallery in
action but notice out it clearly says
that is going to target the class fancy
box so we need to give these anchor tags
the class of fancy box before we can see
the gallery in action just spaced out
people and apply a class of fancy box
to each and every link like this next
about him just gonna cut rather copy
this bit is this bit out here like this
out here like this
sorry ctrl-c ctrl-v to paste it
okay at this point let me save the
document up and let's see the changes
now see what has happened when i click
on the first picture you see that you
know it mom opens up in fancy box of
fancy box is an action but it still
isn't a candy you get the option to
close it like this see from the right
top corner like so
ok but they're not linked together all
these pictures are linked together they
asked separate gallery by themselves you
know anyone who just blows up just zooms
up you know that's all that is happening
right now I would want to club them i
would want to have a relationship among
them and you can do so using the
relationship with relative people r a
simple so after the class just have well
going like this and you can give a name
of your choice people i'm going with
gallery you decide your name
ok just create a relationship between
these three images
ok to have multiple galleries going
people decide on
two different names then ok so you can
have a drink galleries going if you have
so many different pictures and I'm just
going i'm using just one single name for
this you know for my and rel attribute
the relationship attribute and this is
going to link all the all just going to
club bring all the three pictures into
one single gallery let's see that in
action the press f2 well at this point
to save and view in google chrome write
very good people notice that now is
actually a gallery I can you know click
out here anywhere in the right part
right quadrant to advance or in the left
column to go back to the previous image
i can use the top rocky bottom arrow
keys left arrow keys on my keyboard of
the right arrow keys on my keyboard
right to advance record no to go to the
previous picture or simply use the
remember that link to the mouse strange
mouse scroll scroll wheel . jsy and I
can just scroll through the different
images like so we're using the mouse up
and down strolling alright and in the
end let me show you how to use the auto
play function so all you need to do is
just get inside the brackets out in my
number 24
alright and set the autoplay additional
option parameter on the insert curly
braces like so people and say auto play
calling true that's it that's all that
you need to do at this point let me see
the document up and take up a preview
let me click anywhere now
to launch the gallery and hopefully it
should automatically go to the next
picture is it with which it actually
does right
I also think you can control the speed
of this advanced let me just for a
minute go back to the the website
and see box and let me there are so many
options out there which i haven't used
one of them is the speed option that I'm
going to use not
autoplay I've used to place PDS as
defaulting to 300 let me use this
additional option parameter let me bring
it in the river
the default is 3,000 people so i'm gonna
comma separator like this and say play
speed calling and out of 5,000 out here
I think I probably yep i'm actually done
so this should slow down the speed so
have 12 to take up a browser preview
click anywhere
let's see if the you know the time
yes I clearly from three seconds it has
increased to five seconds and some other
tutorial people are going to show you
how to use YouTube videos from your
videos and google maps to write so I
hope you found this bit quite
informative quite useful you enjoyed the
tutorial you will from the video up
you'll subscribe you if you still
haven't and I also hope that will keep
coming back more tutorials from me your
dick by piece