We Keep Coding

Refresh parent window after iframe fancybox closes

I have a site that when I click on a link it pops open a fancybox window for a user to enter some details in to the form.
Once the user has finished with the form and closes it I want the parent window to refresh so the new data shows.
I am using fancybox version 2.1.5 and would prefer if I can make the change to jquery.fancybox.js to implement this change and not on the individual boxes as this is something that needs to work on all fancy boxes.
Any suggestions?
This is how I am running the fancybox at the moment:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'device-info.php',
type : 'iframe',
padding : 5
});
});
});
</script>
This is referenced from the href like this:
<a class="fancybox fancybox.iframe" href="edit-device.php"><img src="img/edit.png"</a>

You could use a general config object and just modify the needed attribute per call. Something like this:
// This is the basic config, common to all calls
var fancybox_general_config = {
type : 'iframe',
padding : 5,
afterClose: function() {
location.reload();
}
}
// modifies just the href attribute, keeping other values
fancybox_general_config.href = 'device-info.php';
$("#fancybox-manual-b").fancybox(fancybox_general_config);
// modifies just the href attribute again, keeping other values
fancybox_general_config.href = 'device-info-2.php';
$("#fancybox-manual-c").fancybox(fancybox_general_config);
Hope it helps!

determine my own fancybox order

I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?
I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.
http://jsfiddle.net/XF8WW/7/
In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.
The only problem in my solution can be found in the last function I wrote (clickPage).
In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.
function clickPage($pageNr) {
$.fancybox.close();
//$('.fancybox-overlay.fancybox-overlay-fixed').click();
$pageNrMinOne = $pageNr - 1;
$pageNrMinOne = $pageNrMinOne.toString();
$pageNr = $pageNr.toString();
console.log($pageNr);
console.log($pageNrMinOne);
$(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
//$('.page' + $pageNr).click();
}
I know the code works, because when I enter it in the console it does.
Thank you for your time
Have a nice day

Alright, I managed to fix it.
Rather than using this script for my booklet:
http://www.netzgesta.de/booklet/
which rearanges the HTML I used this script:
http://builtbywill.com/code/booklet/
The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.
Thanks everyone for your replies!
Have a nice day

I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:
var images = [
{
'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
'title' : 'some title' //optional
},
{
'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
'title' : 'some title'
},
//etc
]
$.fancybox.open(
images,
{
index : 0,
nextEffect : 'none',
prevEffect : 'none',
margin : 100,
padding : 10,
type : 'image',
wrapCSS : 'fancy-gallery-wrapper',
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.7
},
title : {
type : 'inside'
}
}
});
(fancybox v2.0)
Ultimately, you are making your project overly complex, needlessly.
Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).
Hope that helps -

My jquery code is working in google chrome console not after saving it?

i have to select and deselect images and Jquery my code is working fine in Google developer console but not after i save it in my file.
This work in chrome developer console not when i have it in my code
image
This was the last question which i asked it is related to thisReference
mycode
$(document).ready(function() {
var selectpic;
$('img').click(function () {
$('img.highlight').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
selectpic = $(this).attr('src');
});
});
This is actually inside a popup div.
main window which calls the above popup
function showImageUploadDialog(event) {
$(".ui-widget-overlay").show();
cdDiv();
$('#gallery').hide();
$('#upload_popup').dialog({
height : 'auto',
width : '848px',
modal : 'true',
top : '58px',
left : '559px',
resizable : 'false',
dialogClass : 'pop_up'
});
$(".ui-dialog-titlebar").hide();
}
I think it should be made global,And I don't know how to make it.

it worked after updating to the latest version of jquery!!

Using tinyMCE into modal window

I'm using Grails 1.3.7 and I use tinyMCE via richui. I'm trying to display a modal window which enables users to send a mail. However, if tinyMCE is correctly displayed, I can't use the text editor because of this error :
t.win.document is null
I finally found the reason here, at the end of the article :
http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/
It seems that when I call the page with the jquery script building the modal window, DOM isn't refreshed and doesn't create the corresponding textarea.
Anyway I don't know how to resolve this, so here is my code :
Jquery code :
function dialogSendFirstMail(id) {
var monurl = "/myApp/emailTemplate/writeFirstMail.gsp?id_for_mail="+id;
var titre = "Premier email"
//alert(monurl);
$("#dialogSendFirstMail").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
title:titre
});
});
}
GSP calling the script for the modal window :
<!-- ... -->
<g:if test="${params.sendFirstMail}" >
<div id="dialogSendFirstMail"></div>
<script>dialogSendFirstMail(${idProfil});</script>
</g:if>
</body>
modal window (only this for the moment) :
<richui:richTextEditor name="firstMail" value="%Email_de_bienvenue%"/>
In summary, if I detect that I have to send a first mail, the page creates a div in which is placed tinyMCE. This is what the user will see.

As you have mentioned, the reason that you the the error "t.win.document is null" is because the DOM isn't refreshed. So you will have to add the tinyMCE control explicitly when you load the modal dialog. You can use something like this in the gsp which renders the richUI editor (writeFirstMail.gsp in your case) :
jQuery(document).ready(function() {
//your tinyMCE settings here
tinyMCE.settings = {
mode : "textareas",
theme : "simple",
editor_selector : "mcesimple",
width: 400
};
tinyMCE.execCommand("mceAddControl", false, "yourTextareaId");
});
Once the dialog is closed, you can remove tinyMCE control from the textarea using this:
tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");

Flowplayer in fancybox?

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?

Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.

I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.