We Keep Coding

how to change fancybox width and height redirect one page to another page in same fancybox

I have two pages with different height and width.
I need to change there height and width when redirecting one page to another page.
$(".anchPrint").fancybox({
'width': '32%',
'height': '23%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
close: function () {
}
});

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

Removing jQuery fancyBox black bars

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

Fancybox - using to make a before/after gallery

Im trying to use Fancybox to build an before/after gallery. Thats how it works:
1) The page load with a lot of thumbnails
2) When the thumb is clicked, it loads the fancybox gallery
3) When the user hover the image, it changes to the "before" state
I already did the steps 1 and 2. How can I make the 3º?

Solved:
$(".fancybox").fancybox({
padding:0,
margin:60,
nextClick:true,
openEffect : 'none',
closeEffect : 'none',
nextEffect:'fade',
prevEffect:'fade',
nextSpeed :1,
prevSpeed:1,
afterShow : function() {
$('.fancybox-nav').hide();
$(".fancybox-image").hover(
function() {$('.fancybox-next span').click();},
function() {$('.fancybox-next span').click();}
);
}
})

Open page from bookmarklet, but, make it like a modal window?

I am using a bookmarklet which can (obviously) be called by the user anywhere:
javascript:(function(){window.open('http://*****.com/***.html?url=
'+encodeURIComponent(window.location.href),'my_page_name',
'left=200,top=200,width=480,height=500,personalbar=0,
toolbar=0,scrollbars=1,resizable=1')})()
How can I make this like a modal window, meaning no ugly browser window borders - should I use jquery or something like in the bookmarklet URL and if so, how?

You could use the approach Firebug Lite uses.
Basically you insert an external JS file into your page when you click on the bookmark.
My bookmark
Just change BASE_URL, PATH_TO_JS and PATH_TO_ICON to what you need it to be.
Also, don't forget the "http://" in the BASE_URL, unless you want to use a relative path.
Your external JS file could contain a script which adds an element to the page which hovers over others. I recommend using the CSS in Twitter Bootstrap to figure out how to make a reliable modal window.
Edit --
To help you out I wrote a small demo. It consists of 2 files:
bookmark.html - adapted firebug code to create bookmark which adds script dynamically
bookmark.js - creates a modal with an iframe
bookmark.html
Bookmark
bookmark.js
(function() {
var script;
if(!window.jQuery) {
script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js";
document.body.appendChild(script);
}
(function check_if_loaded() {
if(!window.jQuery) {
setTimeout(check_if_loaded, 50);
} else {
(function($) {
var
$dark_bg = $('<div></div>').css({'z-index': '1000', 'background-color': '#000000', 'opacity': '0', 'position': 'absolute', 'width': '100%', 'height': '100%'}),
$iframe = $('<iframe></iframe>').css({'width': '100%', 'height': '100%', 'border': 1, 'overflow': 'hidden'}).prop({'src': 'http://bijtel.com/cv/', 'width': '100%', 'height': '100%', 'scrolling': 'no'}),
$close = $('<div></div>').css({'position': 'absolute', 'top': 0, 'right': 0, 'padding': '5px 10px', 'cursor': 'pointer', 'color': '#ffffff', 'font-size': '10pt', 'font-family': 'verdana'}).html('close ×');
$modal = $('<div></div>').css({'z-index': '1010', 'background-color': '#ffffff', 'opacity': '0', 'position': 'absolute', 'top': '10%', 'left': '10%', 'width': '80%', 'height': '80%', 'box-shadow': '7px 7px 5px #333'}).append($close, $iframe);
$('body').css({'padding': 0, 'margin': 0}).prepend($dark_bg, $modal);
$dark_bg.animate({'opacity':0.5}, 400);
$modal.animate({'opacity':1}, 400);
$close.on('click', function() {
$dark_bg.animate({'opacity': 0}, 400, function(){ $dark_bg.remove(); });
$modal.animate({'opacity': 0}, 400, function(){ $modal.remove(); });
});
}(window.jQuery));
}
}());
}());
Demo at: http://bijtel.com/stackoverflow/bookmark/

I don't know much about the subject, but looking at the delicious.com bookmarklet I noticed some parameters to limit which parts of the browser window will be shown:
(function() {
f = 'http://www.delicious.com/save?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title) + '&v=5&';
a = function() {
if (!window.open(f + 'noui=1&jump=doclose', 'deliciousuiv5', 'location=yes,links=no,scrollbars=no,toolbar=no,width=550,height=550')) location.href = f + 'jump=yes'
};
if (/Firefox/.test(navigator.userAgent)) {
setTimeout(a, 0)
} else {
a()
}
})()
The parameters I'm talking about are the location, links, scrollbars and toolbar. That does not make it modal, though, and I doubt there is a feature for that (I'm assuming browser windows are independent of each other). But they provide a "cleaner" window nonetheless...
Update: check out this link. Basically, what the bookmarklet does is to create a new script tag and append it to the body. I'm assuming you could do anything you want in that script, including create a jQuery dialog the way you wanted (in fact, this bookmarklet does use jQuery, but it's embedded in the script itself; see the source).
Here's the code. I wouldn't use this bookmarklet myself (since I'd have to provide my username/password in the clear), but it's a starting point for you to do yours:
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('src', 'http://t.rc.vc/delicious/js/delicious.js?username=***&password=***');
e.setAttribute('id', 'delicious_submitter');
document.body.appendChild(e);
void(0);
Obs.: in both examples, I stripped the javascript: part and formatted the code for readability.