jQuery FancyBox Plugin
Demonstration
FancyBox with remote content
Click here to open a remote page in a FancyBox
FancyBox with images
Click here to open an image in a FancyBox
FancyBox to create a gallery of images
FancyBox to create a gallery of images with only one visible image
Slick Videos Presentation With Fancybox
Visit the tutorial's page.FancyBox to create a gallery of mixed images and videos
How to setup
As usual, the first thing to do when you want to use a plugin is to include the required files in the header of your page.
For the FancyBox, those files are first the jQuery library, then the plugin script, and an additional stylesheet:
Very similar to the LightBox, the next step is to declare how and when the FancyBox will be displayed on your page.
So in the same fashion, the following code tells that every link that has a class fancybox will have its content opened in a fancybox.
It can be added in the page header or in a separate js file.
Finally, you just need to create a link whose class will have to be fancybox and whose href attribute will need to contain the path of the element you wish to open within the fancybox:
<!--Fancy Box Shadow Box-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#single_image").fancybox();
});
</script>
<!--End of Fancy Box-->
This is in the body:
<p>A copy of the conceptual design of the memorial is attached as <a id="single_image" href="images/memorial-concept.png">memorial-concept.pdf</a>.</p>
I can't get this to work. Any help would be great.
Thanks,
<!--Fancy Box Shadow Box-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#single_image").fancybox();
});
</script>
<!--End of Fancy Box-->
This is in the body:
<p>A copy of the conceptual design of the memorial is attached as <a id="single_image" href="images/memorial-concept.png">memorial-concept.pdf</a>.</p>
I can't get this to work. Any help would be great.
Thanks,
Any uppgrade suggestion ?
I have videos with different sizes, that are already embedded in html pages (produced by Camtasia). i am using the "open an html page" type link.
I would like to be able to determine the size of the fancybox using the css. Is that possible?
You mentioned the default size of the fancybox in an earlier post. I measured the fancybox, found 600x400, and found two occurrences of those figures in the .js files.
Here is what the code looks like:
... |cos|userAgent|400|navigator|600|slow|Function| ...
When I changed those, the size of the window did change. Is that what you meant? Or is there a better way of doing it?
Is there a easy way to accomplish this?
Thanks
Hi Alex. Do you actually wish to open this new page still in the fancybox? Or would you rather open the link in the parent page? If you prefer to open it in the parent page, use the target="_top" with your link.
Resizing the frame when the user clicks the link seems more complex...
There could be a solution but it will also affect the size of your first fancybox. You could for example, change the default height and width to something bigger. Or maybe proportional to the screen size.
Regards.
I'm trying to set FancyBox up for a new project I'm working on. I've gotten it working, but there is a link to another page (Google Driving Directions) in the box. When a user clicks that link, it pulls up the Google page inside the box, but it's still very small and the user is forced to scroll both horizontally and vertically in order to see most of the page. Is there a way to resize FancyBox for a web page instead of an image?
Thanks!
Alex
I was wondering how to have two different fancybox css, for two different galleries on the same page. Each gallery would use its own css. They are not distinguishable at this point. I also looked around but did not find anything prior to posting. Is this possible?
Thanks!
One thing I wanted to do, that I cannot seem to get to work, or find any coding examples of, is how to open up a google search result inside an iframe, instead of opening them up in a separate window.
Any ideas?
regards
Scene
Hi somar, I've updated the page to show an example of mixed gallery. Have a look at the demonstration.
The way to do it is as follows.
You create a ul, with each li being a step of your gallery.
When you want to show an image, you place the image path in the href attribute of the link like you did.
When it's a youtube video, create a div with an id (for ex id="myvideo1"), outside the ul and paste the youtube embed code in it. Hide this div for a better effect.
Then, in your list, create a link that points to the anchor of the div, (for ex a href="#myvideo1").
As a result, when you browse your gallery, it either shows an image, or it plays a video as you flicker through the different items.
Good luck. Jeremy
<div class="contentArea">
<div class="full-page">
<div class="full-page">
<a href="images/pic1.jpg" class="zoom img" title="Pic 1" rel="portfolio" style="margin-right: 17px;">
<img src="images/pic1-thumb.jpg" width="150" height="100" alt="Pic 1" />
</a>
<a href="images/pic2.jpg" class="zoom img" title="Pic 2" rel="portfolio" style="margin-right: 17px;">
<img src="images/pic2-thumb.jpg" width="150" height="100" alt="Pic 2" />
</a>
<a href="images/pic3.jpg" class="zoom img" title="Pic 3" rel="portfolio" style="margin-right: 17px;">
<img src="images/pic3-thumb.jpg" width="150" height="100" alt="Pic 3" />
</a>
</div>
Yes it is possible to add a query string in the fancybox link. As long as it leads to a valid page. Check the link you'd like to open without the fancybox and make sure it works first. Look at the demonstration, I changed the first link to open a google search within the fancybox and it works.
Concerning the size as a percentage, it seems that the frameWidth and frameHeight options only accept a pixel value. But you can calculate a pixel value from the browser size and pass it to the fancybox after. This is how you can do that. The width of the browser is obtained like this: var browserwidth = jQuery(document).width();. Then you set your percentage, for example 50: var percentage = 50;. And then you calculate what it gives you in pixels: var fbwidth = Math.ceil((browserwidth*percentage)/100);.
You do the same for the height, and you pass those values to the fancybox options:
jQuery("a.fancy").fancybox({
frameWidth: fbwidth,
frameHeight: fbheight
});
And it works like a charm.
Is it possible for fancy box to open up a link like "yoursite.index.php?act=viewProd&productId=36" in an iframe window?
When i try, i just get the loading picture.
Also, can I set the iframe to be a percentage of the browser instead of absolute size?
TIA
Do you specifically mention the id of your div in the javascript call when you register the fancybox?
In other words do you write something like $('#div1 a.fancybox').fancybox() and then $('#div2 a.fancybox').fancybox() and so on?
Or are you only using something like $('a.fancybox').fancybox() ?
That's the only thing I can think of from your short message. You can send me a link to your work if you want me to have a look.
Regards. Jeremy
I am new to Jquery and have an issue with using multiple galleries on 1 page.
Each gallery has it's own unique div id which is called in javascript, however the first gallery manages to show all of the images in all of the subsequent galleries on the page.
Any ideas where I am going wrong?
Yes I know why it does that. As the thumbnails you are loading via Ajax are not present when you first load the page, they are not registered with the event that triggers the fancybox. Once you call your xmlhttp request, at the end of it, you need to register the freshly loaded thumbnails with the fancybox again. So for example, if you have used something like $('a.fancybox').fancybox() at the beginning, call this again at the end of your xmlhttp request function and it will work.
Good Luck.
Ok good then.
Well done.
Well if you need some help later on you know where to come now :-)
Good luck.
You have an interesting problem.
At least I am glad that your gallery is working because that's the trickiest part.
Just to clarify, are your images tags written like this?: <img src="/lib/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" />.
Please note the absence of 'px' after the size of the image.
You can email me a little portion of your code if you want me to have a look at it at jeremy@jdmweb.com, to see if I can spot what is wrong.
Otherwise have a look at the source of this page and compare it to your code. I don't think this is a major issue really, we should be able to solve it quite easily.
I am very new to jQuery but have followed your tutorial and gotten my gallery of images to work. However, I can't seem to change the size of the thumbnails to be other than what your thumbnails are on this tutorial. I've resized my thumbs to 150x150 but they still show up at 72x72. How do I go about fixing that? I developing locally so I don't have a site to show you.
Thanks for your help!
Hello. I went onto your website, and I discovered that there's a 404 not found error on your picture. It means that the script is not finding it.
I think it might be because the path to the picture is case sensitive in your hostging whereas it is not on your localhost. Make sure the script can access the picture and then it should work.
Good luck.
On webpage I gave in website window I have 1 picture there and want to get it working with fancybox... on localhost I have no problem at all.. but since I gave this to webhosting I have problem that zommed picture is not loading and freezes in loading screen of picture... I checked paths everything and it should be ok. Can you help pls ?
Thanks for the feedback -- much appreciated. I'll give your suggestion a shot some time this week.
The reson why they don't all get grouped together is because in your jQuery code, you are using the class of the thumb to set up a group ( $("a.pic") and $('a.fancybox') ), and those classes are different, resulting in the creation of 2 different galleries.
Also, the fact that you are using the function $('a.fancybox').each(), means that you are creating 1 gallery per link whose class is fancybox, that's why when you open it, you have img 1 of 1 instead of 1 of 3.
Maybe you could try something a bit different. You affect an event function on all the links. When a link is clicked, you check its class, if the class is .pic then you do a fancybox, and if it is .fancybox then you do an iframe. In that way, they will all be based on the same base, but they still will be able to differenciate between your 2 classes. The only thing that you might loose is your counter.
It would look like something like:
$("a[rel=group]").click(function(){
if($(this.hasClass("pic")){
$(this).fancybox(); //Normal fancybox
} else {
$(this).fancybox(); // Iframe
}
})
Then I came across this and it works like a charm! Looks great too.
Example: I have several thumbs on a gallery page which all use one simple FB class/function, and a few more thumbs that require an iframe implementation. The iframe ones *do not* get included in the gallery cycle even though they share the rel='group' tag. (The iframe implementation works perfectly, by the way, if you click that thumb directly -- but it doesn't display any back/next links in it and claims to be "1 of 1". The images, on the other hand show "1 of 3" rather than "1 of 4" and the back/next cycle skips the iframe one entirely.)
[ js: ]
$("a.pic").fancybox({
'hideOnContentClick': false,
'overlayOpacity': .7,
'overlayColor': '#000',
'centerOnScroll': false
});
$('a.fancybox').each(function(){
var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)
[0].replace('width=',''));
var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)
[0].replace('height=',''));
$(this).fancybox({
'frameWidth':fWidth,
'frameHeight':fHeight,
'hideOnContentClick': false,
'overlayOpacity': .7,
'overlayColor': '#000',
'centerOnScroll': false
});
});
});
[ html: ]
<a class="pic" href="images/demo_pic.jpg" rel="group" title="Image 1 caption"><img src="images/temp_img_thumb1.jpg" /></a>
<a class="pic" href="images/demo_pic2.jpg" rel="group" title="Image 2 caption"><img src="images/temp_img_thumb2.jpg" /></a>
<a class="fancybox" rel="group" href="flash_video_embed.html?width=529&height=400" title="video"><img src="images/temp_img_thumbvideo.jpg" /></a>
<a class="pic" href="images/demo_pic3.jpg" rel="group" title="Image 3 caption"><img src="images/temp_img_thumb3.jpg" /></a>
----
Don't worry about the crazy parsing in the JS for the iframe -- it just allows a custom height and width to be passed to the function. Again, this works fine on its own -- the issue is that the rel='group' trick isn't looping the iframe one into the mix. Any ideas...?
You're welcome! ;-)
Yes there is a way. As you can see, I modified the demonstration to show you. It is quite easy really, and is also quite similar to a normal gallery setup. You'll just have to hide the other elements with a display: none. As a result, they won't be visible on the page, but the gallery will work.
This is how I've done it:
->Create the gallery. The first li is visible, the others are hidden.
<div id="gallery2">
<ul>
<li><a rel="group" href="/Path_to/image1.jpg">
<img src="/Path_to/thumb1.jpg" /></a></li>
<li class="hidden"><a rel="group" href="/Path_to/image2.jpg">
<img src="/Path_to/thumb2.jpg" /></a></li>
<li class="hidden"><a rel="group" href="/Path_to/image3.jpg">
<img src="/Path_to/thumb3.jpg" /></a></li>
<li class="hidden"><a rel="group" href="/Path_to/image4.jpg">
<img src="/Path_to/thumb4.jpg" /></a></li>
<li class="hidden"><a rel="group" href="/Path_to/image5.jpg">
<img src="/Path_to/thumb5.jpg" /></a></li>
</ul>
</div>
->Add the style hidden in the stylesheet:
#gallery2 li.hidden{
display:none;
}
->Add the jQuery setup:
jQuery(document).ready(function(){
jQuery("#gallery2 a").fancybox();
});
And it should work. Let me know.
Is there a way to have a single image on the page that when clicked will open a gallery in Fancybox? I do not want to display all the photos on the page for each category but would love to have the galleries work this way.
Hi Stephen.
Yes there is a way. As you can see I've udated the demonstration of this post to add a gallery example.
This is how I'e done it. First, create you html markup:
<div id="gallery">
<ul>
<li><a rel="group" href="/Path_to/image1.jpg">
<img src="/Path_to/thumb1.jpg" /></a></li>
<li><a rel="group" href="/Path_to/image2.jpg">
<img src="/Path_to/thumb2.jpg" /></a></li>
<li><a rel="group" href="/Path_to/image3.jpg">
<img src="/Path_to/thumb3.jpg" /></a></li>
<li><a rel="group" href="/Path_to/image4.jpg">
<img src="/Path_to/thumb4.jpg" /></a></li>
<li><a rel="group" href="/Path_to/image5.jpg">
<img src="/Path_to/thumb5.jpg" /></a></li>
</ul>
</div>
Please note that the rel group as been added to each link.
Then, in your javascript, setup the gallery like this:
jQuery("#gallery a").fancybox();
That should do. Let me know. Good luck.
You're welcome.
2 things. First I've found that associating the version 1.00 of fancybox, and the version 1.2.3 of jQuery gives the most compatible results, especially with IE8. That's why I like that version.
Then, as you can see, in the demonstration links it is working.
Is your problem occuring with any single remote content? Because sometimes this is caused by the loaded website itself.
Ive DL the latest version of this script, but there seems to be some issues with the display of remote content, basicaly it will load for some time, then redirect to the new URL.
It this the reason why you stick to version 1.00 of facny box ?
It worked. you had razon
<link rel="stylesheet" type="text/css" href="../jquery.fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.yesopen").fancybox({
'zoomSpeedIn': 400,
'zoomSpeedOut': 400,
'overlayShow': false
});
<a title="title" id="single_image" class="yesopen" href="albunes/imagen ><img src="albunes/sml_imagen">
It worked... and I love your work
To add an overlay and to control the size of the box, you can use the following options in the javascript setup:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
frameWidth: 600,
frameHeight: 400,
overlayShow: true,
overlayOpacity: 0.5
});
});
</script>
This will show an overlay of opacity 0,5, and a box of 600*400. Enjoy !
I've downloaded my own files from the site, and put them in a folder.
In this folder, I've created a file test.html, with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script> //The jQuery from the download
<script type="text/javascript" src="jquery.fancybox-1.0.0.js"></script> //The fancybox script from the download
<link rel="stylesheet" type="text/css" href="fancy.css" />
<script type="text/javascript"> //Javascript Setup
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<a href="fancy_closebox.png" class="fancybox">Test FancyBox Plugin</a> //Link that opens in a fancybox
</body>
</html>
It's working absolutely nicely.
Is this page working for you if you place it in the fancybox folder an run it?
Can you send me the page you are working with? Or a link to your work? So I might be able to see what's going wrong.
<a href="memberprofile.php?member=44" class="fancybox">Test FancyBox Plugin</a>
The class you are using in the javascript setup and in the links must be the same!
That's why in your example, according to what is written in your header, your links should have the class "fancybox" and not "fancy" to work.
Does that solve the issue?
<script type="text/javascript" src="fancybox/jQuery.js"></script>
<script type="text/javascript" src="fancybox/jquery-fancybox.js"></script>
<link href="fancybox/fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
and to run I used
<a href="memberprofile.php" class="fancy">Test FancyBox Plugin</a>
I am using the one downloaded from this site only.
Then, can I ask you which version of jQuery are you using? And do you have the problem in several browser or just one ? Have you put the code in your header or a separate linked js file?
Thank you.
Thank you