Introduction
This
article explains how to display images and videos in the very same Fancybox gallery
using Json-data and existing html-tags as data. In the end, I will suggest a
method for generating Fancybox galleries directly from Json data, without the hassle of first having to lay out link elements on page.
Background
Fancybox is a Jquery library that can help you display images, videos and other html-type content in a nice way. The Fancybox Jquery Library will display the content in either pop-up windows or as a gallery-like presentations. It can also be used to present dialogue boxes able to process input from them. You can download the latest build and see some demonstrations of it using this link.
Using the code
The
problem of combining videos and images in the same Fancybox gallery
is spawning a lot of questions over the internet. Here is an example showing how you can display
Youtube clips and JPG images in the same gallery using link tags as data-sources.
Add all the references to Jquery and Fancybox just after the <head> tag on the page. I am using Jquery version 2.0.3 found here, and Fancybox version 2.1.5 found here. See a demonstrations on how to include the Fancybox references in the Demo folder found in the Fancybox download. Mine looks like this:
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
As you can see, I have also downloaded from here and added it to the page the page the JQuery mousewheel plug-in. This plug-in will make it possible to use the wheel on your mouse for navigating between the images and videos in the gallery.
Here are some links you can put anywhere on the web page between the <body></body> tags:
<a class="fancybox" data-fancybox-type="image" data-fancybox-group="group1" title="qwerty" href="your image file">Some text</a>
<a class="fancybox" data-fancybox-type="iframe" data-fancybox-group="group1" title="the video" href="a youtube video embed link ">Some text her to</a>
Then you need to intercept the on DOM ready event using JQuery. This is just for simplicity and will make the gallery appear on screen the minute the page is fully loaded; like they say: when the DOM is ready (Document Object Model). The following code can be put between the <head></head> tags of the HTML page.
<script>
$(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 0, 20, 0]
});
});
</script>Looking at the JavaScript routine right above here, you see this part of the function:
$(".fancybox")
This means: Select all elements on the page that have the class name fancybox. This is a Jquery selection routine, and has little to do with Fancybox. Next you se this marked in bold face:
$(".fancybox").fancybox({
This means: Use Fancybox on the selected elements.. or apply Fancybox to the selected elements. This will start the routine of turning your <a> links into a gallery. But before this all happens, the Fancybox routine need to read some options settings, and these are the rest of that code block. The routine will inspect the links and look for the data-fancybox-type attributes. The data-fancybox-type attribute indicate that the link is an image or a video (iframe). This will make the gallery switch between displaying the images in an ordinary <DIV> tag, and videos in <iframe> tags.
Given you've inserted some links of your own, the page should now open in a web browser.
For the less faint-hearted
Take a look at the supplied source code on top of this article. It will show you how to use Json objects as data for your gallery. From the code you can see that there are no html links involved; in fact, nothing is between the body tags of the webpage. Look ma' No hands! This invite thoughts like: Can I get link-data from a database or a webservice? Yes you can, but that must be my next article. The attached code file will certainly hint on how to consume data in the Fancybox plug-in. An eventual next article should focus on different ways of fetching data to the image gallery.
History
18 Feb. 2014: Wrote an introductory text on how to use the Fancybox Jquery plug-in.
