here is the code i used
eventClick: function(event) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'href': event.url,
});
return false;
},
............
when i click it for the first time it opens fine in a fancybox but when i click again it moves to a new page (event.url).Also there is tooltip being used and it goes null after the fancybox is opened for the first time
Use the following code to open Fancybox with url. It should work.
$('a.yourAnchor').fancybox({
'overlayColor': '#fff',
'autoDimensions': true,
'hideOnContentClick': false,
'scrolling': false
});
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;">
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.
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',
});
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