Now that we have the Fancybox plugin loaded on the page, let's make it actually do something. To start things off, we'll simply have Fancybox load a single image.
Before we get started, we need to set up a few more files. First, find an image to use. It should be a decently large image so we can see Fancybox do its thing. Create a folder called images alongside the index.html file and put the image in the folder. Now that we have an image to use, let's make Fancybox use it. We're going to build on top of the code used previously, when we learned how to install Fancybox.
Create a new JavaScript file called
scripts.jsin the same directory as ourindex.htmlfile.Inside the
scripts.jsfile, we need to add some code to the jQuerydocument.readyfunction. To get things started, let's just add aconsole.log()function call, so that we can see the function is being called:$(function() { console.log("hello world"); });By passing an anonymous function to jQuery (
$), we are telling jQuery that we want all of the code inside the anonymous function to be run when the document is finished loading.Now that we have our
scripts.jsfile created, we need to add it to the HTML file. Inside theindex.htmlfile, under the last script tag that we previously added, we need to add the following:<script type="text/javascript" src="scripts.js"> </script>
Now that we have a call to the
console.logfunction, you should seehello worldin the console in your browser when you reload the file. You should be able to find the console in the developer tools for the web browser of your choice. In Firefox, the Web Developer menu is available under the main menu (by clicking on the Firefox button at the top-left corner). In Chrome, it is under the main menu; go to Tools | JavaScript console. In Internet Explorer, it is located in the menu under the F12 developer tools tab.Before we get the JavaScript written to load the image, let's create the HTML tag for the link that will be clicked to load it. Just under the
<h1>tag add the following:<a id="show-fancybox" href="images/waterfall.png">Show Fancybox</a>
You will want to replace the
hrefattribute of the anchor tag to be your image's location. In the example, I have an image calledwaterfall.pngin theimagesfolder. If you refresh the page and click on the link, the image should be displayed in the browser.Now let's move back to the
scripts.jsfile. We know that our function is being loaded, so we can remove the call to theconsole.log function.Next, let's call Fancybox on our anchor tag with the following code:
$(function() { $('#show-fancybox').fancybox(); });You should see your image displayed in a Fancybox pop up as shown in the following screenshot:
Let's take a deeper look at what is going on in step two. Behind the scenes, jQuery is listening for several browser events, which the different browsers fire when the document has finished loading. Then, it will run the function that is provided. You may also see this in a slightly longer format, but it is doing the same thing:
$(document).ready(function() {…});Let's talk a little bit more about the last step. In the given code, $('#show-fancybox') retrieves a jQuery object, which represents our anchor tag. fancybox() is the call to Fancybox, which makes it work. Fancybox then takes the href attribute of the link and attempts to retrieve the URL provided. In our case, the URL points to the image we wanted Fancybox to display.
So what else can we do with the single image functionality of Fancybox? Let's take a look at some additional touches to our single image.
What if we wanted to add a caption to the image? Fortunately, it's incredibly simple. To add a caption to the image, all we have to do is add the title attribute to the link, shown as follows:
<a id="show-fancybox" href="images/waterfall.png" title="Just a little waterfall">Show Fancybox</a>
Now when Fancybox opens up the title Just a little waterfall, it will show up under our image.
Using a thumbnail on the page, for the user to click on, is also very easy. All we have to do is add the thumbnail as an <img /> tag, shown as follows:
<a id="show-fancybox" href="images/waterfall.png" title="Just a little waterfall"><img src="images/waterfall-small.png"></a>
In the example, the waterfall-small.png file is the thumbnail. Now the thumbnail is displayed on the page, and clicking on it displays the larger image in the Fancybox pop up.