Removing jQuery fancyBox black bars - javascript

On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?

I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG

Related

Fancybox aling isn´t work on Firefox

I'm using Fancybox to show a iframe when a page load, but, the vertical aligment in Firefox and Chrome doesn't show fine, and IE work perfect. The code is this:
<script type="text/javascript">
$.fancybox.open([
{
type : 'iframe',
href : 'http://www.example.org/online/index.html',
title : 'Inscribete',
width: 800,
height: 580
}
], {
padding : 0
});
</script>
If you want to display the iframe with those dimensions, then you may need to use fitToView set to false.
Also, check your syntax. I would rather do something like
$.fancybox.open({
type: 'iframe',
href: 'http://www.example.org/online/index.html',
title: 'Inscribete',
width: 800,
height: 580,
fitToView: false,
padding: 0
});
That should work fine in most of modern browsers.
See JSFIDDLE

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.

Not able to scroll the image inside fancybox after Initializing Elevate Zoom

I have a dynamic fancy-box image gallery with Elevate Zoom Implemented in it, When the user clicks on from the fancy-box image the Elevate Zoom plugin is initialized and can see the magnified image in the fancy-box.
After disabling the Elevate Zoom plugin I'm not able to scroll the image from the fancy-box.
Is there any way to bind the scroll feature back to the fancy-box div after disabling the Elevated Zoom ?
I'm using Fancy-box 2.15v and Elevate Zoom 3.0.8v
$(".fancybox-thumb").attr("rel","gallery").fancybox({
scrolling: 'no',
prevEffect : 'none',
nextEffect : 'none',
type :'image',
maxHeight : '150%',
maxWidth : '90%',
fitToView : true,
arrows : true,
mouseWheel : false,
afterShow : function(){
$('.fancybox-image').click(function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
scrollZoom : true,
lensSize : 900,
});
$('#fancybox-buttons').hover(function() {
$('.zoomContainer').remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
});
});
},
beforeClose: function(){
$(".zoomContainer").remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
}
});

Setting width and height of fancybox

I've tried the following code with little to no avail:
$(document).ready(function(e){
$(".iframe").fancybox(
{
height: 950,
width: 400 }
);
});
I've put everything in quotes and everything without quotes and nothing seems to have any effect of the fancybox. There does seem to be some effect on the width, but it's irregular and temperamental. From what I can tell, all including the width does it set the width to it's default value.
Try:
$(document).ready(function() {
$(".iframe").fancybox({
maxWidth : 950,
maxHeight : 400,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false
});
});

Add a scrollbar to a modal box in prototype

im created a modal box using prototype.js using the following code, i want to add the scroll to this , how can i add that ?
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
overlayClose: false,
overlayOpacity: 0.25
});
From the ModalBox site:
NEW! “Scrolling mode”. If your content might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
So you just need to add a height value!
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
height: 500,
overlayClose: false,
overlayOpacity: 0.25
});

Categories