close fancybox and open new one using functions - php

I have an application where I am using Fancyboxes to display content from the server through IFRAMES within the Fancyboxes. So, I am looking to run a script after data is submitted or changed in the server that calls the current fancybox with IFRAME to close and open another fancybox with a new url, size, and iframe inside of it.
I have tried several different codes through various googled sites, but none have worked for my app.
Help would be greatly appreciated!
UPDATE: Found the answer here: http://www.amitpatil.me/fancybox-runtime-resizing-of-iframe/

Call $.fancybox.close or parent.$.fancybox.close() (from iframe), and open a new one:
$.fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 680,
'height' : 495,
'href' : 'http://example.com/new'
});
or simply resize fancybox: $.fancybox.resize().
This will help you in resizing: How do you resize Fancybox at runtime?
[UPDATE]
As I understand: You have A.php opened with fancybox. On A.php you probably have a form, and the form is submitted to B.php. If this is the situation, you have to close+open OR just resize the fancybox in the document.ready of B.php by parent.$.fancybox.function_name.

Don't know if you've tried this, but seems to work for me:
parent.MyFunction(); // call this from the iframed url
function MyFunction(){ // have this in your parent page
// call your fancybox close function here
}

The method suggested by #TamasPap didn't work for me, and since I'd spent hours researching and experimenting until I finally found a method which worked, I wanted to share it.
parent.$.fancybox.open({ href : 'iframe2.html', type: 'iframe'});
parent.$.fancybox.close({ href : 'iframe1.html'});
You can specify any options, helpers or css after type: 'iframe' in the same manner you would when creating the function.

Related

Gallery and Fancybox

I am using the Gallery Snippet on MODx Revolution 2.1.5.
I am calling out the basic Gallery Snippet along with the specified Album.
I am trying to link Fancybox (jQuery Lightbox) up to the Thumbnails and images.
This is what MODx Outputs on the Resource:
<div class="gal-item">
<a href="path/to/page/test.html?galItem=1&galAlbum=1&galTag=">
<img class="" src="/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F1%2F4.jpg" alt="lorem-ipsum-2.jpg" />
</a>
</div>
I have selected the content correctly, When I click on the image wrapped in the link tag I get this message:
The requested content cannot be loaded.
Please try again later.
How can it not be loaded? It's loading the Thumbnail and it needs the original image to create the Thumbnail. How can it not find the image?
Note: I am using the default setup for this Add-on.
Thank you!
As AlexC has mentioned I reckon it's to do with your big image path. Have you tried going to that URL direct and seeing if the image loads. You could trying removing the fancybox code and then click on the thumb and see if the link works as normal. The image should load on it's own in the browser window.
I can be am lots of causes why id does like that.
I think what it can be, you try to load content before you have this guy, I mean use some Ajax and it loads after you apply the "fancybox"
you can try this :
remove the "fancybox" classname
and use this code :
$(".gal-item").live("click", function(){
var $href = $(this).find("a").attr("href");
var $href = $(this).attr("href");
$.fancybox({
href:$href
});
});

Convert href link to image link use with thumbshots

I have seen some good scripts come by but not one i really could use.
My website is php sql driven and i like to change the links on the site with a image
from thumbshots.
The code i have so far is:
<?php echo openld_htmlspecialchars($link['title']); ?>
And as far as the script i have go like:
$('.post-body a').each(
function(){
$('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)).replaceAll($(this));
});
I used the .replaceAll function but it shows only the pictures and are not click links.
I used .insertAfter but then the text link keeps showing.
It's probably not a huge change in the script code but i don't seem to find the answer on my question.
Thanks
I hope that what you are looking for ...
$('.post-body a').each(function(){
$(this).html("<img src='http://open.thumbshots.org/image.aspx?url="+encodeURIComponent(this.href)">");
});

add class to php generated element with jquery

I need some help. I am bringing in a string from a custom field in wordpress. This string is an iframe embed code for both youtube and vimeo. I need to add a class to this iframe in order for fancybox to do its thing.
<?php
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true);
echo $videoLinks;?>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
When testing by inserting an iframe embed code in the custom field I get this. (no class added)
<iframe src="http://player.vimeo.com/video/33039612?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p>HG Skis: Trillinton.. from HG Skis on Vimeo.</p> <script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
Relatively new to jquery, fancybox works on images manually tagged with fancybox class. Will adding class based on a certain event fix my issue?
try
<script>
$(document).ready(function(){
$('iframe').addClass('fancybox fancybox.iframe');
});
</script>
it should play the trick... of course, I assume you are using fancybox v2.x
It's possibly about timing. If fancybox is operating via a script that fires automatically on DOM ready, looking for "fancybox" elements to attach event handlers to, it might have already done its job by the time your addClass script fires. Something tells me this isn't necessarily the problem, though; the document ready function will actually be LATER than scripts running before the page is fully built.
There's also a syntax issue: 'fancybox fancybox.iframe' is not valid. You can add space separated classes if you want to add multiple, but "fancybox.iframe" is not a valid class. I believe JavaScript will let you add it, but you can't style it and there might be problems selecting it.
Don't you simply need $('iframe').addClass('fancybox')?
I'd make sure that your addClass is succeeding first, and if it is, are the classes required all present and accounted for. Then, debug timing issues.
The code you have shown works fine. That is, when I open a file with this it works:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<iframe>sfdfsf</iframe>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
What does your fancybox code look like?
You can turn youtube links into embedded videos with something like this:
$(document).ready(function() {
$("a.youtube").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf', // <--add a comma here
'swf' : {'allowfullscreen':'true','wmode':'opaque'}
});
return false;
});
Same thing can be done with Vimeo urls.

JAIL JQuery Plugin (jQuery Asynchronous Image Loader)

I would really appreciate if anyone can spot anything that I am doing wrong here!
I am attempting to use this plug-in: http://www.sebastianoarmelibattana.com/projects/jail
I have included it in my web page which is a search form that submits via an AJAX request and displays the search results in a table. This table happens to be another plugin called dataTables.
Here are the relevant bits of code:
The re-initialisation of the plug-ins after the AJAX request has been successfully completed (the same initialisation is done in the actual HTML page aswell):
// re-initialise lazyload, lightbox and dataTable plugins
$('img.lazy').jail();
$('a.lightbox').lightBox();
$('#test-docs-table').dataTable( {
"bPaginate": false,
"sDom": 'Rlfrtip',
"aoColumns": [
null,
null,
{ "sType": "title-numeric" },
null
]
});
This is the line of php that displays the relevant table cell with the thumbnail in it:
$shortname = $row['filename'];
$doc = "/central/testdocs/".$row['filename'];
$thumb = "include/doc-thumbnail.php?doc=$doc";
echo("\n<div class=\"thumbnail\">\n<td class=\"center\"><a class=\"lightbox\" title=\"$shortname\" href=\"$thumb&dpi=96\"><img class=\"lazy\" data-href=\"$thumb\" src=\"images/blank.png\" width=\"50\" height=\"50\"/></a></td>\n</div>\n");
Notice that another plug-in is involved - lightbox so not sure if that affects the situation.
At the moment it looks like the JAIL plug-in is doing something but all the images are loaded as soon as the page has loaded.
The lightbox still works when you click on the thumbnails - the page actually works just the same as it did before except that before the page is fully loaded the thumbnail cell is empty.
I discovered what was wrong, the silliest of things!
Because I tried to use the original lazy load plug-in I had an existing rule in my CSS hiding images of class lazy so the plug-in wasn't able to do it's thing.
If anyone else runs into this problem that's what to do!

TinyMCE Draws Okay, But Won't Let Me Type In It. In FF, Buttons Have Error: Component returned failure code: 0x80004005

In previous applications, I was able to get TinyMCE to work just fine. But in this web app, I get the rich editor to show up okay, but for some reason I cannot type into the rich editor field and when I click a button like for bolding, I get this error:
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://mysite/tiny_mce/tiny_mce.js :: anonymous :: line 1" data: no]
Source File: http://mysite/tiny_mce/tiny_mce.js
Line: 1
I'd like to know what I can do to debug what's going on here. What could be causing this strange error?
Some background:
This code loads the TinyMCE:
<script type="text/javascript" src="http://mysite/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
mode : 'none',
editor_selector: 'mceAdvanced',
theme : 'advanced',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_buttons1 : 'fontsizeselect,bold,italic,|,bullist,numlist,|,outdent,indent,|,removeformat',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_font_sizes: "1, 2, 3, 4",
width: '600',
height: '200',
remove_script_host : true,
cleanup_on_startup : true,
cleanup: true,
debug : true,
convert_urls : false
});
tinyMCE.execCommand('mceAddControl', true, 'fldOverview');
</script>
<textarea id="fldOverview" name="fldOverview" class="textbox"><?= OVERVIEW ?></textarea>
Tested on:
FF3 fails. Opera (latest stable) works. Windows IE7 works. Safari (latest stable) works.
The answer is here.
The deal is this. Ever use Facebook? We were trying to implement a similar interface where you click to edit a profile section, it collapses and re-expands with a progress bar, then collapses and re-expands with a profile form. In that profile form, we had the TinyMCE rich editor.
Well, it turns out that there's a quirk with DIVs being hidden and then shown to display the TinyMCE control. It gets the timing off or something? Anyway, we were using the slideToggle API in jQuery to collapse and re-expand a DIV with new contents that we pulled back via jQuery AJAX stuff. And when we did, somehow this slideToggle API hosed us up.
The fix was to do the slideToggle like we normally do, but before we load the tinyMCE editor with the execCommand technique, we need to use the show API in jQuery to ensure our DIV is forced open and visible, first. When we did that, the problem went away.
Are you executing this in Firefox ?
Because according to this, it comes up when you disable popups in firefox because of the way pop up blocking is implemented.
Enable pop ups and you are good to go!

Categories