I want to disable/hide browse button for source and other parameters in insert/edit video screen. At present I son't have back end implementation to provide the list of videos but I want this option available for insert/edit image. I am using file_browser_callback in tiny init but it looks to me that a same file_browser_callback is used to handle the browse for all the screen. Can someone suggest me a way to hide the browse for "insert/edit" video plugins but allow in "insert/edit image"?
Please check Fiddle
There is indeed one file_browser_callback but within the callback you can target different types. In my implementation I've done the following:
file_browser_callback: function(field_name, url, type, win) {
if (type == 'file') {
diaTitle = 'Insert link';
browser = '/linkmanager/index.php'+'?field_id='+field_name;
} else if (type == 'image') {
diaTitle = 'Insert image';
browser = '/filemanager/dialog.php?type=1&field_id='+field_name;
}
tinymce.activeEditor.windowManager.open({
title: diaTitle,
url: browser,
width: 860,
height: 600
},{
oninsert: function(url) {
win.document.getElementById(field_name).value = url;
}
});
}
Hope this can help you!
TinyMCE has provided a way to do this by using file_picker_types. You will need to add this to the tinymce.init, maybe right above your "file_browser_callback:"
file_picker_types: 'image',
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types
Related
I'm sorry but I don't understand Janis's answer on this page
Open fancybox 3 into iframe parent , this is too technical for me as it doesn't give a precise answer.
I can't work out what should be the script needed to open in a parent page from that answer that is pointing to the documentation (which is found in a section about opening iframes, instead of opening FROM an iframe into a parent page) and unfortunately I can't comment on that page so here I am.
How to access and control fancybox in parent window from inside an iframe:
// Close current fancybox instance
parent.jQuery.fancybox.getInstance().close();
// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();
OK so that closes or updates the parent window, but how to open various links in the parent window ?
Then Janis says:
This should give you a clue that you can use parent.jQuery.fancybox to use API from the parent page.
But how to "phrase" it ? in a script ?
Then, API section should give you a clue how to open image gallery programmatically:
$.fancybox.open([
{
src : '1_b.jpg',
opts : {
caption : 'First caption',
thumb : '1_s.jpg'
}
},
{
src : '2_b.jpg',
opts : {
caption : 'Second caption',
thumb : '2_s.jpg'
}
}
], {
loop : false
});
Does that mean you have to make a list of all the images you want to open in the parent page in one script ?
If so that doesn't make sense when you have many images and defeats the purpose of making each link call fancybox individually like so :
<a href="images1.jpg" data-fancybox data-caption="image 1">
<img src="images/image1_sm.jpg" alt="" class="image"/></a>
Or does it mean you have to make a script for each picture you want to be opened in the parent page ?
Here is a snippet that would open image gallery in current page or in parent page:
var $fb_links = $('[data-fancybox="images"]');
$fb_links.click(function() {
if ( window.self !== window.top ) {
window.parent.jQuery.fancybox.open( $fb_links, {
//animationEffect : 'fade',
hash : false
}, $fb_links.index( this ) );
} else {
$.fancybox.open( $fb_links, {}, $fb_links.index( this ) );
}
return false;
});
I hope you can see that it is not so scary to create your own click event that starts the script.
I am confused on how to refetch the resources by url (json feed).
This renders my calendar resources -
$('#calendar').fullCalendar({
...
resources: 'example.json?id=1',
...
});
This documentation (https://fullcalendar.io/docs/refetchResources) says "If the resources option was specified as a JSON feed it will be requested again."
So I have a button that I want to click to change the resource url and reload the resource feed -
$('.resource-button').on('click', function() {
link = $(this).attr('href');
$('#calendar').fullCalendar('refetchResources', {
resources: link
});
});
Any idea why it doesn't reload the new resource link? The list of resources refreshes like it is doing something but the data stays the same.
Thanks
This code
$('#calendar').fullCalendar('refetchResources', {
resources: link
});
makes no sense. As per the documentation you linked to, the "refetchResources" method does not accept any extra arguments. The { resources: link } object you supply to it is not expected, and is consequently ignored by fullCalendar. I'm not sure what gave you the idea that you could pass more arguments to this function.
The phrase you quoted:
"If the resources option was specified as a JSON feed it will be requested again."
means it will re-fetch existing resource data from the existing specified sources (hence the word "again"). I think you have misunderstood this explanation.
In other words all it does is refresh the already-specified sources. If you wish to change the list of resource dynamically, then you need to set the resources option first using the separate method to set options.
Here's an example which switches the resources from one URL to another when a button is clicked. You can of course adjust this to your needs, but the key thing to note is the use of the separate "option" method to change the Resource URL before calling "refetchResources".
HTML:
<button type="button" id="changeResources">
Click to Change Resources
</button>
<div id='calendar'></div>
JavaScript:
var resources = [
"https://api.myjson.com/bins/m7blz",
"https://api.myjson.com/bins/cqj3b"
]
var currentResourceIndex = 0;
$(document).ready(function() {
$('#calendar').fullCalendar({
resources: resources[currentResourceIndex],
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'timelineDay',
header : {
left: 'prev, today',
center: 'title',
right: 'next'
},
});
$("#changeResources").click(function() {
if (currentResourceIndex == 0) currentResourceIndex = 1;
else currentResourceIndex = 0;
$('#calendar').fullCalendar('option', 'resources', resources[currentResourceIndex]);
$("#calendar").fullCalendar("refetchResources");
});
});
See http://jsfiddle.net/toytd26b/57/ for a working demonstration of switching the resources using a button (as per the code above).
See https://fullcalendar.io/docs/dynamic-options for documentation of how to set calendar options after the calendar has been initialised.
$('.resource-button').on('click', function() {
link = $(this).attr('href');
$('#calendar').fullCalendar('option', 'resources', link);
$('#calendar').fullCalendar('refetchResources');
});
I want to add a link named "Add to favorite" in the footer of my site. I don't find any module which can do it, so please is there any way to do this ?
Big Thanks
I will just explain what Pete already said.
You need to add this javascript code somehow to make your "Add to favorite" button functional:
<script type="text/javascript">
$(function() {
$('#bookmarkme').click(function() {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,window.location.href,'');
} else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else if(window.opera && window.print) { // Opera Hotlist
this.title=document.title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
</script>
You need to create a link in a block or template:
Add to favorite
If you have your own theme, then put the javascript in a separate file and add it in the theme info file:
scripts[] = myFile.js
You can add it via a custom module also with durpal_add_js() function.
The easiest & NOT RECOMMENDED way is to add it in the block body itself, just after adding the link. You need to set formatting as "Full HTML" or "PHP" though for this to work.
Is there a WordPress plugin that will enable deep linking to an embedded iframe? I'd like to be able, for example, to tweet a URL to a post that has extra information that will be passed down to the iframe.
An example would be an iframe that plays a video. The extra information in this case might be the time offset to start playing the video.
The extra info could be passed as query params, fragments, or some other way.
Probably not via a WordPress plugin, unless you are looking to develop a custom plugin.
It is best to avoid iframes whenever you can for these reasons.
That said, the solution is pretty simple using the window.postMessage method and works in most browsers, including IE8 and up.
Notes:
All messages should be sent as strings to avoid a nasty bug in IE8/9. If you want to pass an object, pass it in JSON format.
You can't JSON.serialize() the window.location object in IE8. If you are trying to pass that object, you have to copy the properties one by one.
IE only supports el.contentWindow.postMessage(), not el.postMessage().
Outer page
window.onload = function()
{
var child = document.getElementById('deep_link_frame');
var msg = {
"location" : {
"hash" : window.location.hash,
"host" : window.location.host,
"hostname" : window.location.hostname,
"href" : window.location.href,
"origin" : window.location.origin,
"pathname" : window.location.pathname,
"port" : window.location.port,
"protocol" : window.location.protocol,
"search" : window.location.search
}
};
child.contentWindow.postMessage(JSON.stringify(msg), '*');
};
Inner page
function bindEvent(el, eventName, eventHandler)
{
if (el.addEventListener)
{
el.addEventListener(eventName, eventHandler);
}
else
{
el.attachEvent('on' + eventName, eventHandler);
}
}
bindEvent(window, 'message', function(e)
{
if (e.origin === "http://your-domain.com")
{
var message = JSON.parse(e.data);
alert(message.location.href);
}
});
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.