How To Use FancyBox – Dreamweaver CS6 Tutorial

Video

 

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.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

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.

<link rel="stylesheet" href="js/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />

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.

<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"></script>

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.

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

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.

<a href="images/films-image.jpg"><img src="images/films-image.jpg" width="350" height="233"></a>

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.

<a rel="some-gallery-name" href="images/festival-image.jpg"><img src="images/festival-image.jpg" width="350" height="234"></a>

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.

http://www.youtube.com/embed/cEAc4taG5s8?rel=0

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.

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
width : '70%',
height : '70%'
});
});
</script>

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.

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
width : '70%',
height : '70%'
});
<strong>$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox();</strong>
});
</script>

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!

  • TB

    Loved the tut, BTW what font are you using in DW & how did you get the dark theme?

  • 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?

  • liz b

    great tutorial!!! it was so helpful! do you have any tutorials on modal login popup boxes?

  • 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?

    Thanks
    Jen

  • 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

  • Muhamed Beg Bushati

    Thank you so much , really awesome videos from you ;)

  • 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

  • Khiron Roos

    Thanks you man just needed this :D

  • othides

    Hei Dodson! Can you help me about “How to create shopping cart with DW CS6?” :(

  • Janet

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

    $(document).ready(function() {

    $(“.fancybox”).fancybox();

    });

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

    $(document).ready(function(){$(‘.fancybox’).fancybox();});

    Mine is fine after this.

  • 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.

  • how do you put a custom text inside the iframe by getting the text from a div?

  • Victor B

    hi ..

    I have a problem with my think I’ve done the right thing. if you have time to help .. then my email here viababo.8831@gmail.com . so you can write as you can see my files.. Thanks

    @Victor B.

  • 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

  • Lucian

    I can not make it work on my site, maybe because has designed in Fireworks (since I’m no web developer). You could see what’s wrong with my code? http://www.editoracaoeletronica.com
    Forgive me if I’m asking too much ^ ^
    Thank you!

  • guest

    Not impressed.

  • Lilly M

    GREAT TUTORIAL, THANKS A BUNCH!!

  • Maybe I’m missing something here, but it appears to me that setting the width and height as you do, would apply to everything, not just iframes.

  • Alfredo

    Thank you very much for this tutorial!

  • 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.

  • Helga

    I’m using jquery-plugin latest.min.js,(http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/), but no longer works. Which should I replace. Thank you, Helga

  • anweb

    Hi,
    Great turtorial thank you very much, I have set up everything and it works locally but not live so can you please help me, this is the page

    http://www.amorgos-panogitonia.gr/accommodation/aloni.html

    Thanks,
    anweb

  • Koja

    Thank you very useful article.

  • 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

  • JG

    you are very beginner-friendly. love your explanations, patience, and production quality. keep up the great work!

  • Fahim raza

    Nice post. Can you tell please where to find a follow me slide out box for blogger blog. I need it for my blog 101helper.blogspot.com

  • 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

  • Roberto Cobo

    Thank you very much, you make me easy to design my webpage, great tutorial, very clever.

  • melanie bund

    Hi, do you have n idea of how to add live comments area to the lightbox?

  • 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.

  • olamide

    why did u add code.jequery.com

  • Pingback: dining tables and chairs essex()

  • Pingback: BluRay Film indir()

  • Pingback: satta matka()

  • Pingback: where can i buy hgh()

  • Pingback: matka play site()

  • Pingback: Free UK Chat()

  • Pingback: Anthony Kauffman()

  • Pingback: Webdesign()

  • Pingback: methanodex()

  • Pingback: job openings for freshers()

  • Pingback: Buy Steroids Online()

  • Pingback: Quick()

  • Pingback: Joseph de Saram#Rhodium()

  • Pingback: طراحی وب سایت()

  • Pingback: Agen Bandarq()

  • Pingback: more info()

  • Pingback: yandex ankara()

  • Pingback: قاب موبایل()

  • Pingback: economics tuition()

  • Pingback: ICQ Chat()

  • Pingback: yandex ankara()

  • Pingback: What is the definition of Loss()

  • Pingback: information()

  • Pingback: anabolic steroids for sale usa()

  • Pingback: more()

  • Pingback: venus factor()

  • Pingback: social media management()

  • Pingback: MotoGolf()

  • Pingback: Internet Services in Australia()

  • Pingback: Find Businesses in Australia()

  • Pingback: Get the facts()

  • Pingback: nandrolone phenylpropionate()

  • 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!

  • Pingback: tamoxifen citrate()

  • Pingback: tren a()

  • Pingback: how can i buy steroids()