I eventually want to create a photo gallery... clicking on a picture will launch a You Tube video. I am using fancybox 2.0.
I have the video opening up inline but I cannot control its dimensions. Could you please take a look at this page for me and see where I am fouling up.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Thank you,
darrell#bytebrothers.com
This is how your script looks like right now
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false,
type : 'swf'
})
and this is how it should look like
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false
});
});
you are missing some closing brackets.
On the other hand, if you are using fancybox-media, you don't need to specify type:'swf'
UPDATE: when targeting youtube videos in embed (youtube iframe mode) mode, add the class fancybox.iframe to your anchor so this
<a class="fancyYouTube" href="http://www.youtube.com/embed/dx6TZgUSquY">
should be this
<a class="fancyYouTube fancybox.iframe" href="http://www.youtube.com/embed/dx6TZgUSquY">
Related
When dealing with dynamically sizing the iframe in fancybox, I accidentally found that setting data-width and data-height on the [data-fancybox] is helpful after reading this answer.
Exmaple HTML element:
<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>" data-src="example.com" href="javascript:;">example.com</a>
and js:
$("[data-fancybox]").fancybox({
afterLoad: function ( instance, slide ) {
$('body').find('.fancybox-content').css({"width": slide.opts.width + "px", "height": slide.opts.height + "px"});
}
});
What I couldn't figure out is that there is no explanation of data-width and data-height usage on HTML element from fancybox documentation (please correct me if I'm wrong).
NOTE: these two code snippets above do work for me, but they have to work together, it wouldn't work if one of them is taken off.
Can anyone explain that a little bit for me please?
Based on fancybox 3 documentation, they do offer a way to set our own custom options by creating data-options attribute. Here is the example from the documentation:
<a data-fancybox
data-options='{"caption" : "My caption", "src : "iframe.html"}' href="javascript:;">
Open external page using iframe
</a>
You can see the value of these options by console.info( slide.opts ) from the callback function like onComplete (slide is one argument in the callback function ).
Not surprisingly, these two snippets are the same:
<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>" data-src="example.com" href="javascript:;">example.com</a>
<a data-fancybox data-options='{"width" : "<?= $banner_width; ?>", "height" : data-height="<?= $banner_height; ?>", "src" : "example.com" }' href="javascript:;">example.com</a>
So, in my javascript, I use slide.opts.width to get the value from data-width and slide.opts.heightto get the height from data-height, that is how my width and height value get passed from backend to frontend.
Since these two values are processed in afterLoad callback, so every iframe will be initiated with different width and height.
Properties - data-width and data-height - are used to tell the script real dimension of the image. The script then can calculate position and start zooming thumbnail while real image is still loading.
See documentation - http://fancyapps.com/fancybox/3/docs/#images
These properties are not used anywhere else.
You can use { iframe : { css : { width: '', height : '' } } } to set iframe element width/height, but there is no option to change iframe content.
Not sure how to explain this, but here goes:
Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.
So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).
Clicking the close button would still close it.
Is this possible? Do I make sense?
This is for FancyBox 2.
So for this html
<a class="fancybox" href="{target content}">open content at 1200px height</a>
use this script
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
height: 1200,
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no" // so no scroll bars inside fancybox
});
NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.
TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this html:
<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>
then add the callback beforeShow to your script to get the value of data-height like this
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
// height: 1200, // no fixed height but obtained dynamically
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no", // so no scroll bars inside fancybox
beforeShow : function(){
this.height = $(this.element).data("height");
}
});
I am making an app and i want to have the facebook "Like" button in the bottom of a page.
Is it even possible? I have played around with different things and this is what i have right now.
var win = Ti.UI.currentWindow;
win.showNavBar(); // Force the navbar to show
var bgImage = Ti.UI.createImageView({
height : 'auto',
top : -11,
image : 'images/h-4.jpg',
zIndex : 0
});
win.add(bgImage);
var ticksterImage = Ti.UI.createImageView({
height : 'auto',
top : 1,
image : 'images/takida.png',
zIndex : 0
});
win.add(ticksterImage);
var facelike = Ti.UI.createWebView({
html: '<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=368268836546636" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:80px;" allowTransparency="true"></iframe>',
height: '80dp',
bottom: 1,
});
win.add(facelike);
Am i going about this wrong? Should i have HTML5 or XFBML instead of iframe? I have tried all three but with no result.
I just get: Error loading app://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=234826439948817
Is it another way of doing this?
Thanx
//R
— asked 6 hours ago by Rickard Harrysson
I'd recommend not using a webview for it - try using the Ti.Facebook module. That will give you a lot more flexability in allowing the user to login to Facebook via Titanium. See the KitchenSink for examples.
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/facebook.js
If you must use a website, the html must be a full webpage, not just the iframe. It should start with <html><head/><body>. I recommend creating a webpage outside of Titanium that works, then plug the html of that page in the html property.
I am using FancyBox and I am having a slight problem.
I have a box, that is 930px wide where users can interact with things inside the popup.
The problem is, when a user in using a screen resolution that is, lets say 800x600, some of the items in the box do not display. The box has a fixed height and width (930x400).
I have tried to use scrolling: auto and scrolling: yes but nothing seems to work
Is there a way around this?
Thanks
UPDATE: - Included code snippet
$.fancybox({
"padding" : 3,
"type":"iframe",
"href":"/requirements/"+$(".sf_admin_form_field_id div.content").html()+"/edit?req_id="+$(this).children(".id").children("div").children("input").val(),
"width" : 934,
"height" : 391,
"overlayShow": true,
"overlayOpacity" : 0,
"scrolling" : "yes",
"onClosed" : function(){ window.location.reload();
}
Try
scrolling: 'auto' (note the quotes!)
and if this does not work can you include the fancybox initializer that you are using??
In the examples page when you search (CTRL+F) for image gallery and click the first image, there's this image gallery which you can browse with next/prev arrows. The animation between them is vertical -- the images fly vertically. How does one set them to fly horizontally?
In the help I found:
openMethod / closeMethod / nextMethod / prevMethod
Method from $.fancybox.transitions() that handles transition (you can
add custom effects there)
But I don't know where to go from here.
Also, this seems to be slightly related.
You can create your own custom transitions from here:
http://jsfiddle.net/xZBBS/
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
try this i am sure this will help