We're going to start by creating a basic HTML page, which will have jQuery and the Fancybox plugin loaded on it. We'll walk through the steps to get the plugin and make sure that it is loading on the page.
To install the Fancybox plugin, you will need only two things: a text editor or some way to create HTML, CSS, and JavaScript files, and an Internet connection to obtain the plugin.
Go to the Fancyapps website, http://fancyapps.com/fancybox/.
Scroll down to the download link and download the files.
Create a folder that will be the location of our demo HTML page.
Extract the zip file that was just downloaded and move the folder to the directory that will be used for the page. Rename the folder to
fancybox.Create a basic HTML page inside the folder. Here's a sample of a really basic HTML5 page with a title:
<!DOCTYPE html> <html> <head> <title>Chapter 1</title> </head> <body> <h1>Installing Fancybox</h1> </body> </html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Add the following script tags to load jQuery and Fancybox just under the
<title>tag:<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/ jquery.min.js"></script> <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.4"> </script>First, we load CSS for Fancybox, then jQuery (via Google CDN), and then the main Fancybox JavaScript file.
Now that we have everything loaded on the page, let's load the page and check for any JavaScript errors. If everything has worked, there should be no errors on the page and you should be able to open the console and type
$.fancybox. You will see something like the following code if everything has worked:function (){b.open.apply(this,arguments)}If you see that undefined Fancybox is not loaded on the page, check the file paths that you have in the
srcattribute of your script tags. Remember that we changed the directory to be calledfancyboxin step four.
We now have a basic HTML page, which has jQuery and the Fancybox plugin loaded. The download from the Fancybox website includes the full source of the plugin in a non-minified form, the minified version (which we are currently loading on the page), the necessary images and CSS files, and a folder that includes some demos.
We are loading jQuery from the Google CDN for several major reasons:
By using the Google CDN, we don't have to pay to host the file when we are using Fancybox on a live website.
Since it is common for other websites to use the Google CDN for jQuery, it is likely that users coming to our website will have the file cached. This makes our website load faster!
Using jQuery from the Google CDN also allows us to easily update the version of jQuery that is being used.
Note
In the previous example code, we are using jQuery version 2.0, which does not support IE 6, 7, and 8. If you need to support any of these browsers, use an older version of jQuery such as 1.9.2. Fancybox works with both versions.
Because we are using jQuery from the Google CDN, it will only work when the computer has access to the Internet. If you want to do any work while not having access to the Internet, you will need to download a copy of jQuery onto your computer.
If you looked around on the Fancybox website, you may have noticed that all of the files that are considered part of Fancybox are not included. For the very basic use of Fancybox, these other files are not necessary. These other files add extra functionalities to Fancybox, but Fancybox works just fine without them. Later in this book, we will discuss what extra functionalities these files provide.