We Keep Coding

Fancybox css issue

I use fancybox into a html page but i can't style the link to open the fancybox. Normaly i use a class to style the html link but with fancybox the class is already given to the fancybox. I need to change the background color of the link liks this:
background-color: #E9F3D8;
Here is the fancybox script i use into the html page
<script type="text/javascript">
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
And the link into this page looks linke this
mail

Hard to recreate problem with jsfiddle because all work fine here
<style>
a {
background-color: #E9F3D8;
}
</style>
<script>
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
Maybe give more details that we can help you or maybe I do something wrong with recreating.

How can we play .mov file in fancybox, using jquery?

My goal was to play a mov-file that's already uploaded on my server and it'd be nice to have it pop up inframe using fancybox and jquery. However I have attempted with no luck substituting .mov to swf-type in these codes:
<a class="various" href="Poem.MOV">Play movie</a>
with this Jquery from the fancybox website's suggestion-list:
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
This only sent me to a different webpage playing that mov-file. A different and closest code that ever worked by popping the video up in a fancybox inframe successfully BUT does not play or even show up at all. It only showed up in white frame without playing the film:
HTML:
<a class="fancybox" data-type="swf" href="Poem.MOV" title="Poem">Play Movie</a>
JAVASCRIPT:
<script>
jQuery(document).ready(function($){
$(".fancybox").on("click", function(){
$.fancybox({
href: this.href,
type: $(this).data("type")
}); // fancybox
return false
}); // on
}); // ready
</script>
I wonder if this is feasible to play .mov on our own server using fancybox without using third-party server such as YouTube or Vimeo. Thanks for your time.

You can use the JWplayer player with fancybox to play the .mov or other video formats.
below is the code to integrate jWplayer with fancybox:
$(".various").fancybox({
fitToView: true,
content: '<div id="myJWPlayer">Loading the player ...</div>',
scrolling: 'no',
afterShow: function () {
var video_href= j(this.element).data('url');
$('#myJWPlayer').css({height:'400px',width:'500px'});
setTimeout(function(){
jwplayer('myJWPlayer').setup({
'file' : video_href,
"autostart" : "true",
"controlbar" : "bottom",
"flashplayer" : "url-to-/jwplayer.flash.swf",
"volume" : "70",
"width" : 500,
"height" : 400,
"mute" : "false",
"stretching" : "fill"
});
updateViewTime(vid);
},100);
}
});

I had a problem where the HTML5 video player worked, but loading the same .mov into fancybox did not play. My solution was to either add the url of the video directly to the video tag, or to set the "type" attribute of the source tags as empty in the afterLoad() callback.
const attachment_movie = [ 'mp4', 'mov' ];
$.fancybox.open(gallery, {
buttons: [
'download',
'zoom',
'slideShow',
'thumbs',
'close'
],
thumbs: { 'autoStart': true },
afterLoad : function() {
var href = this.src;
var ext = href.substr(href.lastIndexOf('.') + 1).toLowerCase();
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video').prop('src', href);
// or
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video source').prop('type', '');
}
});

I managed to workaround the problem by replacing template for <video> tag. I added src="{{src}}" to the video tag. You can also pass that as a part of options.
$.fancybox.defaults.video = {
...$.fancybox.defaults.video,
tpl: `
<video class="fancybox-video" poster="{{poster}}" src="{{src}}">
<source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos,
download and watch with your favorite video player!
</video>`
};

How to show a FancyBox video on a Google Map marker?

I have a simple app with a Google Map and markers.
Clicking on the markers i have to show either an image, a slideshow or a video.
This is the javascript needed to display an image (properly working):
google.maps.event.addListener(marker1, 'click', function() {
$.fancybox({
href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg'
// other options
});
});
This is instead the attempt i have made to display a video:
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
Here i have recreate the situation with a Google Map with 3 markers, for one of them is possible to see an image, for the other a slideshow, for the third a video.
The image and the slideshow are working properly, but instead of the video i am seeing a blank box:
http://jsbin.com/ANuyojoW/13/edit
Someone perhaps knows how can i properly display a video?
Thank you very much!

Use following js:
Demo
// Video - Not working
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});

Fancybox Iframe bug with internet explorer

I'm getting a bug with Internet Explorer. The iframe doesn't have correct size and it is displayed on the top left of the page instead of the center.
In Firefox and Chrome, everything is working perfectly.
Tried many things but I couldn't find a solution :(
Please help me.
You can see the bug in IE8 here:
http://www.ni-dieu-ni-maitre.com/v2/index_v2.php
Click link labelled "iframe" on top left
Here's a screenshot of what it looks like:
Here's my code:
<head>
<script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery-1.8.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery.fancybox.js?v=2.1.1\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.$domain/scripts/jquery.fancybox.css?v=2.1.1\" media=\"screen\" />
<script type=\"text/javascript\">
$(document).ready(function() {
$('.fancybox').fancybox();
$('.fancybox').click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5,
autoScale : false
});
});
$(\".contactbox\").fancybox({
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
'overlayShow' : false,
href : 'contact.php',
type : 'iframe',
padding : 5,
autoScale : true,
scrolling : 'no'
frameWidth : 430,
frameHeight : 380
});
});
</script>
</head>
<body background=\"$background\" id=\"top\">
<a class=\"contactbox\" href=\"http://$domain/contact.php\">Iframe</a>

Your page is rendered in quirks mode because you don't have a correct HTML DTD declaration.
If you bring up IE dev toolbar (F12), you can see it renders correctly in standards modes.

How can i call the same fancybox javascript from more than one link?

The fancybox modal popup uses a bit of javascript:
$("#PeoplePopup").fancybox({
'autoScale' : false,
'padding' : 0,
'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'overlayColor' : '#000',
'overlayOpacity' : 0.5
});
which is fired when the link is clicked:
<a href = "peoplesearch.aspx" class="SmallWhite"
id="PeoplePopup">Search for Internal Contact details > </a>
How can I call the same popup code from multiple links?

User class instead of id, so you can you call the popupcode mutliple time.
//html
<a href = "peoplesearch.aspx" class="SmallWhite PeoplePopup">
Search for Internal Contact details </a>
//other links
...
...
//this jquery code will apply to the three links above
$(".PeoplePopup").fancybox({
//the same code here
})

While the provided answers are correct, I'd recommend giving jQuery some scope, otherwise you're searching for the existence of .PeoplePopup through the entire window object, e.g.
$('#PeopleContainer .PeoplePopup')
or
$('#PeopleContainer').find('.PeoplePopup')
While xpath selectors normally work left to right, jQuery understands how to optimize the first example.
if it's a small site, you won't notice the difference, but if you've got a dozen or more instances on the page and a pretty complex DOM, it will start to matter.

Use classes instead of an ID
$(".PeoplePopup").fancybox({
'autoScale' : false,
'padding' : 0,
'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'overlayColor' : '#000',
'overlayOpacity' : 0.5
});
Then in each link where you need this, add the PeoplePopup class -
Search for Internal Contact details >
Internal Contact details >