I try to implement FancyBox 3 in a carousel from the plugin slider revolution. The next code works well with FancyBox 2 but with fancyBox 3 the arrows not work. I want o know if someone has the solution.
Link: https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/
Code that works well in FancyBox2 but not shows the arrows in fancyBox3
/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').attr('rel', 'gallery').fancybox({
/* begin FancyBox options */
width: 'auto',
height: 'auto',
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
fancyBox v3 uses data-fancybox attribute for grouping instead of rel.
So, replace
.attr('rel', 'gallery')
with
.attr('data-fancybox', 'gallery')
Simple demo - https://codepen.io/anon/pen/JyYryd?editors=1010
btw, v3 does not have these options you are using and afterClose callback is used instead of onClosed
Related
I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
I'm trying to use iframe with in fancyapp 3 and I need to set the parameters preload and scrolling to false and auto, but with my current code I'm not able to do so.
Can you please check what it is wrong in it?
Follows the code:
<script>
$("[data-fancybox]").fancybox({
iframe : {
scrolling: 'auto',
css : {
width : '600px'
}
}
});
</script>
<a data-fancybox data "http://www.test.com">show</a>
You can do like this:
$("[data-fancybox]").fancybox({
speed: 230,
infobar: false,
buttons: false,
fullScreen: false,
thumbs: false,
closeBtn: false,
iframe: {
scrolling: 'yes' //'no'//'auto'
}
});
I use slider revolution plugin of wordpress and i load a youtube in a popup when click play button using fancybox. The video is loaded by i receive this message before loading the video :
"youtube api could not be loaded revolution slider"
/* change revapi1 to whatever api number is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').fancybox({
/* begin FancyBox options */
width: 960,
height: 540,
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
type: 'iframe',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
I think your cache might have been the issue, you can use another browser to test it, or switch to incognito mode
I am trying to get a gallery up and running just with css bacground images put in iframes in fancybox.
Thats what I use:
$(".smallimg").click(
function(){
var baseimg = $(this).css('background-image');
var baseimg2 = baseimg.replace('url("','');
var bgimg = baseimg2.replace('")','');
$.fancybox({
helpers : {
overlay : true
},
width: '815px',
height: '550px',
type: 'iframe',
href: bgimg,
fitToView: false, //
scrolling: 'no',
iframe: {
preload: false
}
});
}
);
And I have several divs holding images as background images witht the class .smallimg applied.
For clicking image by image my code works quite good but I would like to have it in gallery style... is that possible?
Need to mention that the names of the images are NOT enumerated like 1.jpg 2.jpg ...
Rgds
Mirko
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO