How To Use FancyBox – Dreamweaver CS6 Tutorial



1. Download fancyBox

The very first thing we must do is download fancyBox. If you are using this for a personal, non-commercial website it’s completely free, if not, a license is inexpensive, just $19 USD.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

2. Unzip + Organize

Once you download the file, unzip it and find a place on your hard drive to store it. We will be dragging these files into our Dreamweaver site in just a moment, but you want to save the files so you don’t have to keep re-downloading your fancyBox!

How To Use FancyBox - jQuery & Dreamweaver Tutorial

3. Organize In Dreamweaver

I have already created a folder called “js” to house any JavaScript documents or plugins. I right-clicked on that folder in the Files panel and hit “New Folder” and I named that folder “fancyBox”. Into this folder we will drag all of our fancyBox files that we downloaded. (NOTE: We’re not going to be using all of the fancyBox files in this tutorial, but each of them affords you different features for your gallery/display.)

How To Use FancyBox - jQuery & Dreamweaver Tutorial

4. Add jQuery To Website

Before we can use any jQuery plugin we must load jQuery into our website. We’re going to do this from an external website or what’s known as a “CDN” (Content Delivery Network). Long story short, a CDN makes your website load faster. We can even link to what will always be the latest version of jQuery. Place this code in theportion of your website.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

5. Linking To fancyBox CSS

We now need to establish the link between the fancyBox CSS file and our webpage. Add the follow code in the portion of your web page.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

6. Link To The fancyBox jQuery

We also need to connect to the fancyBox .js file. Once we do this we just need to call up the fancyBox and we’ll be ready to make this work! We want to load the “jquery.fancybox.pack.js” in the source folder. You can do that by adding the following code to thesection of the website.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

7. Attach fancyBox To Web page

Next we must write a couple lines of jQuery to attach the fancyBox to our page. This is a piece of cake (even if you’ve never written jQuery!) Follow along and add this bit of code as I have below. We’re basically telling our HTML document that once it loads up to load jQuery and execute the “fancybox” function on any HTML element with the class “.fancybox” on it. TIP: Place this code JUST before your closingtag.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

8. Link To Content

Now that we’ve laid the structure for our fancyBox plugin it’s time to make it work. Basically we want to create a link to the image or content we want to load in the fancyBox and then set the class of “fancybox” on that link. First let’s select an image and link it to itself using the pick whip.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

9. Make This Thing Work!

With our image still selected we want to jump into code view and add the code, “class=”fancybox” after our tag opens. Our link will now look like it does in the code below.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

10. Test In Browser

Hit “F12” to test this fancyBox in your browser. Behold the beauty!

How To Use FancyBox - jQuery & Dreamweaver Tutorial

11. Creating Galleries

Creating fancyBox galleries is incredibly easy. I’m going to link three other images that I have on my page to the larger versions of themselves and attach that “fancybox” class just like we did so we have four images that load in fancyBox. Problem is they’re not attached so they don’t form a gallery. We can do this by adding a small bit of code after our “class=”fancybox”. I’m going to add the code “rel=”some-gallery-name” to all of the linked images to group them into a gallery. NOTE: As long as they all have the same “rel” name they will be in the same gallery. I can break them into two different galleries by changing the name on two of the images. See an example of one of my linked images below.
[code type=”css” title=”Code”][/code]
Boom. Working fancyBox gallery.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

12. Display YouTube Video: Get The (Correct) URL

Displaying YouTube video may seem tricky, but it’s not too bad. The first important step is to get the correct link to you YouTube video. We want to select the “Share” button below the YouTube video and highlight ONLY the video URL after the “src” bit of code. That is the embed URL we want for our fancyBox. Set your link to go to this embed URL. TIP: Copy the whole bit of code and paste it into a text editor and delete everything except the video’s URL. Example of video URL below.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

13. Display YouTube Video: Inform fancyBox Of Data

fancyBox needs to know what kind of data this is. In our case it is an iFrame containing our video so we need to add an additional class to our link to this YouTube video. We need to add our “fancybox” class like we did with our other links, but we also need to add the class “fancybox.iframe” right after it. Check out my screenshot for an example.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

14. Display YouTube Video: It [Almost] Is Perfect!

Our YouTube video will now display in a fancyBox window, but that’s not enough for me. I want to set a size that our video will load as so users get a larger video when they click this YouTube link. NOTE: Screenshot shows that fancyBox does load our video. Let’s make it better!

How To Use FancyBox - jQuery & Dreamweaver Tutorial

15. Display YouTube Video:Tweaks

There are a whole number of options you can specify that will affect your fancyBox window. We’re going to set a width and height in the jQuery which will only affect our iFrame content and not our images that load in the very same fancyBox (we wouldn’t want to resize and potentially pixelate the photos!) Drop down into the jQuery code we wrote earlier and add and open and closed curly brackets inside of our parentheses there. Then add the width and height code as I have below.
[code type=”css” title=”Code”][/code]
This will size the width and height of the iFrame to 70% of the width and height of our window area. NOTE: Our video will not be resized out of proportion. It will still look good!

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

16. Display Google Maps: Finding The (Correct) URL

With a Google Map we have a much longer URL to find from a more complicated looking piece of code. Let’s jump in! Enter the address you wish to display in Google Maps to navigate to that place. Click on the link icon and copy the text in the “Paste HTML to embed in website” area.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

17. Display Google Maps: Woah, Wait, What URL?

The URL we want is in there. What I like to do is paste this code into a simple text editor and then find the URL located after the “src=” bit of code. That’s our URL!

How To Use FancyBox - jQuery & Dreamweaver Tutorial

18. Display Google Maps: Add URL And Class

In Dreamweaver I will link my image to this new URL we just harvested and I will also set my classes as we did for the YouTube video. “fancybox fancybox.iframe”. This will now load a moveable, useable Google Map right into your fancyBox.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

19. Tip: Automatically Add fancyBox To All Images

By Adding a creative line of jQuery code, we can tell our jQuery to detect any linked .jpg, .png, or .gif and auto apply fancyBox to them. You just need to have a couple linked images in your web page and then modify our jQuery code to add the new line of code that I’ve added below.
[code type=”css” title=”Code”][/code]

How To Use FancyBox - jQuery & Dreamweaver Tutorial

20. Tip: Check Out The Resources!

I strongly urge you to check out the resources and info on the fancyBox website and spend some time playing with the many different features of this incredible jQuery plugin.

How To Use FancyBox - jQuery & Dreamweaver Tutorial

How To Use FancyBox - jQuery & Dreamweaver Tutorial

Learn More!

Official fancyBox Site
Purchase License
fancyBox Tips & Tricks


Follow Me On Twitter!

Like Tutvid on Facebook!

More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation


  1. says: JD

    Great tut! I lol’ed when I saw all the kinds of meat in the content of your website mockup! Where did that come from?

  2. says: Jen

    Can I use fancy box to insert my own swf files? What coding do I use to load them with adobe flash player for all platforms?


  3. says: MA

    How do I make the output Fancybox image a link to an external website. Like this…
    click image—>fancybox image appears—>click fancy box image—>links to external site

  4. says: chewinggum

    i’m using dreamweaver cs6 and i’ve gone over the fancybox tut about 20x and have copied and pasted exactly what you put (except for the image link) in your written tutorial and it didn’t work. I went to the fancy box website and followed their instructions which are pretty much the same as yours and nothing. it didn’t work when i tried to activate it with the “class=fancybox” after the “a” tag. i deleted fancybox then downloaded it again and still nothing. i stripped my site to only have 1 image and just the pure fancy box code so i wouldn’t get confused with anything and still nothing. is there a problem with cs6 dreamweaver that it doesn’t work? i followed the instructions perfectly and nothing. is there something else i can do? please help

  5. says: Janet

    Maybe it’s in this code you’re supposed to copy?

    $(document).ready(function() {



    There’s a space after {
    Maybe it works with this code:


    Mine is fine after this.

  6. says: J G

    Any suggestions on what i may have done wrong. Fancybox works perfect in dreamweaver when i preview. When i actually uploaded the site, fancybox does not work properly. When you click on the image, it goes to a new window. Any suggestions would be greatly appreciated.

  7. says: looseshoulders

    This tutorial is very nice – it’s clear. Now my problem: fancy box works in Dreamweaver but not in the browsers. I rechecked the code 4x; followed exactly what you instruct. Any idea how to troubleshoot it? Thanks

  8. says: dirka dirka stan

    Great example and lesson -thanks, the only thing I might add was it didn’t work until I when I tested it locally in a browser using dreamweaver cs6 for me. I got it to work after I uploaded it to my server or used a image link online- for example I used “http:// in my image link for it to work. – maybe that was common knowledge -ha.

  9. says: Chilli749

    Hi I am having the same problems with cs5.5, I’ve done exactly what your saying in your demonstration and its just opening a normal image within the browser. Any Help would be great. Thanks

  10. says: zerothehero

    well ,its a great tut, you explain things really well .. BUT .. when I use it (and I have gone over it again and again 0 .. i just get the images with no frame and no buttons ? .. i get the feeling its ‘something and nothing’ .. but no way can I figure it out HELLLLLLPPP !!
    I am using cs6 also

  11. says: Trell West

    I would love to get some feedback on how I can implement fancybox for my latest blog post widget. For example, having the thumbnail post and the post content open in a lightbox as opposed to loading a new page.. I’m kindve stuck.

  12. Pingback: BluRay Film indir
  13. Pingback: satta matka
  14. Pingback: matka play site
  15. Pingback: Free UK Chat
  16. Pingback: Anthony Kauffman
  17. Pingback: Webdesign
  18. Pingback: methanodex
  19. Pingback: Quick
  20. Pingback: Agen Bandarq
  21. Pingback: more info
  22. Pingback: yandex ankara
  23. Pingback: economics tuition
  24. Pingback: ICQ Chat
  25. Pingback: yandex ankara
  26. Pingback: information
  27. Pingback: more
  28. Pingback: venus factor
  29. Pingback: MotoGolf
  30. Pingback: Get the facts
  31. says: Al Rios

    I started following you after I saw and tried to follow your fancyBox video. It all came together and worked great. Thank you for your shared knowledge! I always come back to see what else I can learn from you. Your video’s and documented walk throughs are great, easy to understand and follow. Keep up the great work!

  32. Pingback: tamoxifen citrate
  33. Pingback: tren a
  34. says: AAred Kross

    This was super helpful, especially the pictures from your actual code files!

    specifying how to link to the local css/js fancybox files from within the theme folder would probably be a great addition. that’s the obvious component I (and likely others) overlooked

Leave a comment
Leave a comment

Your email address will not be published. Required fields are marked *