Fancybox 2.0 and Youtube Video - javascript

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)

Related

Chrome App: Window interacting with another window's HTML code

I'm coding an app which, in its main window's javascript code, creates a new window.
Mainwindow.js :
chrome.app.window.create('sample.html', {
id: 'newwindow',
'bounds': {
'width': 200,
'height': 200
},
'resizable' : false,
'alwaysOnTop' : true,
'frame': { type: "none" }
}, function(createdWindow) {
/*here*/
})
sample.html :
<!DOCTYPE html>
<html>
<head>
<title>Chrome app</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style='background-image: url("img1.png"); height: 50px; width: 200px;'>
</body>
</html>
The thing i'd like to do is to interact with sample.html code inside mainwindow.js, in order to change the path of the background image. Is there a way to do that ?

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
}
}
});

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 code issue

I have downloaded fancyBox from here:
http://fancyapps.com/fancybox/#license
and this is the code I have in my 'test' Web page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fancyBox</title>
<meta charset="utf-8">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/* Different effects */
// Change title type, overlay closing speed
/* Button helper. Disable animations, hide close button, change title type and content */
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Button helper</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
I think I have the paths right on my server, but this is what I see:
http://www.bayingwolf.com/site_pop_up/image_pop.html
instead of the fancyBox (under Button Helper) on their site.
What am I doing wrong, please?
Thanks.
Blue

I'm getting a 404
"NetworkError: 404 Not Found - http://www.bayingwolf.com/site_pop_up/source/jquery.fancybox-1.3.4.pack.js"

Few problems
1) jquery.fancybox-1.3.4.pack.js is not loading.. (404 error.) You might want to check the path correctly
2) closing tags are missing for $(document).ready(function(){
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' +
this.group.length +
(this.title ? ' - ' + this.title : '');
}
});
})
</script>
Advice
Indent the code properly to avoid subtle bugs.

how open a gallery with fancybox on single link? (different html)

Hi I've a HTML with links to differents albums, and I would like just click on a
simple link to see the first picture from the gallery and then navigate. the problem is that each album is inside from other HTML .. in the galleries.html are just the links to albums.
Example:
galleries.html
<td><img src="album_prueba1/001.jpg" alt="image19" width="91%" height="56" /></td>
<td><img src="album_prueba2/40.jpg" alt="image20" width="99%" height="60"/></td>
PHP of a gallery:
<a class="fancyboxi" data-fancybox-group="gallery" title="Laurea"
href="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>">
<img src="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>" alt="" width="19%"/></a>
any idea?

index.htm
<html>
<head>
<title></title>
<link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>
</head>
<body>
Gallery 1<br/>
Gallery 2
<script type="text/javascript">
$(document).ready(function () {
$("#manualCall1").click(function () {
$.getJSON('gallery1.json', function (data) {
$.fancybox(data, {
'index': $(this).data('index'),
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'changeFade': 0
});
});
});
$("#manualCall2").click(function () {
$.getJSON('gallery2.json', function (data) {
$.fancybox(data, {
'index': $(this).data('index'),
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'changeFade': 0
});
});
});
});
</script>
</body>
</html>
gallery1.json
[{
"href" : "https://lh5.googleusercontent.com/-uK9RF21pLaw/T0-bfLydozI/AAAAAAAAG2Q/CHSPYlMM5hA/w339-h225-n-k/_DSC1774_DRI_PS_small.jpg",
"title" : "image title 1"
}, {
"href" : "https://lh4.googleusercontent.com/-B9Fop2ZofLI/T5JZiYzoZKI/AAAAAAAAH5M/0X6lYTa8LAs/w402-h266-n-k/_DSC8800-HDR_corrected_PS_small.jpg",
"title" : "image title 2"
}, {
"href" : "https://lh6.googleusercontent.com/-MtVcdgn6ZA0/T6LSPnrxfbI/AAAAAAAAIP8/g_BubTeiVbY/w467-h310-n-k/_DSC3079_DRI_PS_transf_small.jpg",
"title" : "image title 3"
}]
gallery2.json
[{
"href" : "https://lh4.googleusercontent.com/-PmHloor5LiU/T7K0_5nq55I/AAAAAAAAIcI/qz8NYty16Yo/w400-h248-n-k/_DSC3336_DRI_PS_defish_small.jpg",
"title" : "image title 2 1"
}, {
"href" : "https://lh3.googleusercontent.com/-Okzptj_C2cI/T76BCKM4asI/AAAAAAAAKSE/gvPy2sKdbmU/w386-h254-n-k/_DSC3533_DRI_PS_defish_small.jpg",
"title" : "image title 2 2"
}, {
"href" : "https://lh6.googleusercontent.com/-snm10rkSqDo/T94UWhaFGjI/AAAAAAAALAk/X7b5dVcSKb4/w412-h273-n-k/_DSC3440_DRI_PS_defish_small.jpg",
"title" : "image title 2 3"
}]

Categories

Resources