Develop Reference

fancybox, open gallery on click

I`m not sure, maybe this question is already answered or there is some similar, but i hope that this will be the easiest way for me, to figure out this problem.
So i have this code in my "head" tag:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#fb_man").click(function() {
$.fancybox.open([
{
href : 'both.jpg',
title : 'My title'
}, {
href : 'front.jpg',
title : '2nd title'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
And this one in my body:
<a id="fb_man" href="javascript:;"><img src="img/eyey.png"></a>
I want to open a gallery of 2 images (both.jpg and front.jpg) on click on eyey.png, but i get this error:
Uncaught TypeError: $.fancybox.open is not a function
How can i solve this error ?

just change this part from
$.fancybox.open([
to
$.fancybox([

Hide other images while running fancybox-thumb

I want to hide a large number of images on the html page. While using fancybox-thumbnail to show there are other images to view. Goal is to have the page look clean and not cluttered with a bunch of images. But it's not working, not sure if it's something conflicting or does this idea not work and I HAVE to show the other images on the page.
HEAD Tags:
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
BODY Tags:
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/3pk.jpg">
<div class="imgconcept"></div></a>
<div class="hidden">
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/clcfashnb.jpg"><img src="images/art/clcfashnb.jpg" alt="" /></a>
</div>

EDIT:
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
DEMO
The problem was actually straight forward. You were missing two vital libraries for the thumbnails to work.
jquery.fancybox-thumbs.js
jquery.fancybox-thumbs.css
That's all there was to it.
Your code was good.
$(".fancybox-thumb").fancybox({
prevEffect: 'none',
nextEffect: 'none',
helpers: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});

Fancy Box is not working with Box slider

I am doing a project for one of my client. I am using box slider for the banner and it works fine. For a specific page on the website I am also trying to use fancy box for image light box.But It doesn't work however box slider is still working. Here is the head tag.
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'float'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
And here is the the element where I am trying to use fancy box
<a href="images/lightbox/groups-size-option.jpg" target="_blank" id="single_2" title="Work Shops Chart">
<img src="images/group-size.jpg" alt="" border="0" />
</a>
when I disable box slider fancy box works. But when it is active fancy box doesn't work. Please help asap.Thanks

jQUery Dialog Box when Clicking Navigation Bar Link not Working

I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>

It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Fancybox 2.0 and Youtube Video

I want to open a youtube video in the new fancybox. I don't get it to work. It always goes directly to the page instead of opening it in the fancybox. Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube video</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function(){
$(".fancybox-media").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
Video
</body>
</html>
What I'm doing wrong? I also tried this code (as stated on the fancybox website):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" />
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox-buttons.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none'
});
});
</script>
</body>
</html>
This code should be the same as on this page. What is the difference?
EDIT:
It is the youtube link!
http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1
does work.
This link doesn't
http://www.youtube.com/watch?v=b_ojoebJyvc
What can I do?
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
href : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
});
//alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
alert(this.href);
});
});
This doesn't work. The href is never overwritten!
This also doesn't work (it always follows the link and no fancybox is openend):
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).data("href");
url.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
this.href = url
alert(url);
}
});
//alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
//alert(this.href);
});
});
So I think you can forget fancybox 2.0. Take the old one and you are good ...

Thanks to JFK again. This works now:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).attr("href");
url = url.replace(new RegExp("watch\\?v=", "i"), 'v/');
url += '?fs=1&autoplay=1';
this.href = url
}
});
});
</script>
</body>
</html>

Remove the dot in your class attribute and it should work:
Video
(edited)