Fancybox minimum does not work for video properly? - fancybox

When using fancybox with an overlay, I seem to have issues with the jQuery working?
View it at mg.hejmej.com/index.html (2nd box from the left)

Since you are targeting your youtube videos via embed mode
http://www.youtube.com/embed/HGVTaIlzocM
then you need the proper fancybox script using 'type':'iframe':
$("a.fancybox-vidz").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'type' : 'iframe',
});
You may optimize your link to autoplay and to position itlself behind the fancybox close button like
<img alt="Photo" src="images/h3.jpg" class="fade" style="opacity: 1;">

Related

fancybox hide loading animation

I am using fancybox and want to disable loading animation.
My code:
$(document).ready(function() {
$("#mypop").fancybox({
'onStart ': function(){ $.fancybox.hideActivity },
'onComplete' : function(){ $.fancybox.hideActivity },
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8,
});
});
And the loading animation still works what do I do worng ?
The docs say $.fancybox.hideLoading() for v2 if that is any good to you.
http://fancyapps.com/fancybox/#docs
Edit - #user1139767
You are missing the ()'s from the end of the $.fancybox.hideActivity() calls.
This post (http://stackoverflow.com/a/3673152/1791606) mentions the loading animation not appearing because of using an iframe as the type which accidentally achieves what you seem to be wanting to do.

< and quotation change to HTML entities in tinyMCE

In DB, it is the following.
<img src="../../../../assets/images/frontpage/big_tree.jpg" alt=""
width="516" height="200" />
But when it is in tinyMCE, all the <, > and " change to html entities like this.
So it does not display in FF.
<img src="../../../../assets/images/frontpage/big_tree.jpg"
alt="" width="516" height="200" />
How can I avoid this problem?
I have the following tinyMCE init
tinyMCE.init({
mode : "textareas",
/* // if I want to add to a specific area then use this
mode : "specific_textareas",
editor_selector : "mceEditor", // add class="mceEditor" where you want to add tinyMCE
*/
theme : "advanced",
plugins : "advimage,advlink,media,contextmenu",
//theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,separator,",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "media",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
//extended_valid_elements : "hr[class|width|size|noshade]",
extended_valid_elements : "span[class|align|style]",
file_browser_callback : "ajaxfilemanager",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});
Thanks in advance.
In php you can use html_entity_decode.
You need to eigther save the tinymce contents in the DB as is ("<" and ">" as real characters) or you will need to entity decode your database content before rendering them into the web page. Depending on your script language (perl, php, python,...) there are special functions to do this.
I had same issue
I corrected it by adding
$_POST = array_map( 'stripslashes', $_POST );

Update parent.page after Fancybox close

Working on a webshop, and using fancybox to a quickshop type thing. My problem is that when user click "Add to basket" in fancybox, fancybox should close and refresh parent page. Using this:
$(".quickshop").fancybox({
'autoDimensions' : true,
'width' : 798,
'height' : 480,
'autoScale' : true,
'scrolling' : 'true',
'type' : 'iframe',
'titleShow' : false,
'onClosed': function() {
parent.location.reload(true);
}
});
And it does the trick, but it also reloads page when user just clicks the normal close button.
So is there any way to check if "Add to basket" link has been clicked, and only then reload page?
This should work:
Add to basket
Where "webshob.aspx" is a link to the page you have a fancybox on.

How do i set the proper width when fancybox opens an external blueprint styled page?

I'm styling a ruby-on-rails app and I've got a link to an external page which opens in fancybox.
The external page is styled with blueprint's 24 column width (950px wide).
I've hidden the wide elements (display:none in css) from that page so that the elements I'm interested in are only 250px wide in fancybox.
But when it opens in fancybox it somehow still seems to read the .span-24 attribute rather than opening at the smaller size.
I can't create another external page and must use the blueprint styled one. Any advice on how to force fancybox to open, centered, as a 250px wide box?
Edit:
Here is the code I'm currently using:
$(document).ready(function() {
$("a#fancypants-1").fancybox({
'autodimensions' : true,
'width' : 250,
'scrolling' : 'no',
'opacity' : true,
'overlayShow' : true,
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
'transitionIn' : 'elastic',
'hideOnContentClick': false ,
'transitionOut' : 'none'
});
});
try like this
$.fancybox({
'autoDimensions' : true,
'height': 'auto',
'width':250px;
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
});

tinymce text editor doesn't load in facebox modal window

I'm trying to use tinymce editor with facebox modal window. But tinymce doesn't load when the modal window is opened and I get no errors of Jscript in firebug
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
})
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true
});
</script>
any help?
Now I'm working on another project and I had the same issue again
This time I used colorbox and put this code onComplete event of fancybox.
$(".edit").colorbox({
onComplete : function(){ tinyMCE.execCommand('mceAddControl', true, "textare_id"); },
onClosed : function(){ tinyMCE.execCommand('mceRemoveControl', true, "textare_id");}
});
and It worked thanks to gutch for his answer on
TinyMCE - undefined 'e','j','t' when loading for a second time in fancyboxm
P.S. Tinymce init function defined in the index file of whole project