currently i am using fancybox 3.0. It is on autoplay. How do i make it when it changes to next image there will be fade effects ?
This is currently my code
$('[data-fancybox="project1"]').fancybox({
slideShow : {
autoStart : true,
preload: '40',
},
});
$('[data-fancybox="project2"]').fancybox({
slideShow : {
autoStart : true
},
});
Different transition effects are available starting from v3.1
Preview - https://codepen.io/fancyapps/pen/LyNXqr
You can get code here - https://github.com/fancyapps/fancybox/tree/3.1
transitionEffect : "fade"
Related
I'm trying to change the background color of an event (in Day View) of fullcalendar v4. I've spent hours trying to implement eventRender, to no avail. This has led me to find other workarounds, but now, I'm striking out!
I'm trying to figure out the solution explained here: [Fullcalendar - change event color based on value ..
But, every time the search for the word 'yes' is TRUE, I get an error in chrome console saying 'Failure parsing JSON'. If I change the search query to something that will create 'false', I do not get this error. To me, this means that the search is working, but the event render function is failing somehow.
my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
defaultView: 'resourceTimeGridDay',
defaultDate: '<?php echo $startdate?>',
validRange: {
start: '<?php echo $startdate?>',
end: '<?php echo $maxdaycal?>'
},
height: 700,
...
...
eventSources: [
{
url: 'getevents2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
cache: false,
},
{
url: 'getbreaks2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
cache: false,
color: 'grey',
editable: false,
}
],
eventRender: function(info) {
if(info.event.extendedProps.desc == "yes") {
element.style.css('background-color', '#000');
}
},
....
});
calendar.render();
});
My goal: Search for the word "Accomp" in the title of the element (probably in info.event.title) .. and have the background change to a different color .. like red .. or something.
I've also tried to show an Icon in this field if the word Accomp is present, but -- I had to show it in a modal, because I couldnt get eventrender to show html.
I think this is because of the differences in FC v4 .. but I'm not sure.
I've also tried: [Is it possible to assign the background colour of a FullCalendar event based on its title? .. but I couldn't get that sorted out either.
UPDATE: The search function is working, as I can see it in the console log, but whenever I try to set the css, the calendar does not render.
eventRender: function(info) {
console.log(info.event.title);
if(-1 != info.event.title.indexOf("Accomp")) {
console.log(info.event.title);
fc-title.css('background-color', '#000');
}
},
This is based on some other answers that areavailable, but it appears that there are differences in FC4... This works for me!
eventRender: function(info) {
if(-1 != info.event.title.indexOf("Accomp")) {
info.el.style.backgroundColor = "red";
}
},
I'm my project i need to overwrite default setting for fancybox. Thumbnails autostart into true, like below. How I should do it.
thumbs : {
autoStart : true, // Display thumbnails on opening
hideOnClose : true // Hide thumbnail grid when closing animation starts
},
It would be best to override defaults using JS:
$.fancybox.defaults.thumbs.autoStart = true;
I have a set of WYSIWYG editors that are all initialized via TinyMCE on demand.
In the previous version of TinyMCE I was able to easily remove buttons by specifying the button theme_advanced_buttons1, theme_advanced_buttons2 etc. But since the newest release of TinyMCE 4.0 , it seems as tho that no longer works.
I am running the modern theme, so maybe the theme_advanced_buttons1 doesn't work with the modern theme? I've tried theme_modern_buttons1 , but that didn't work.
I'm thinking it may have changed with the newest release, as there is a new toolbar with the options for 'File, Edit, Insert...' etc.
Anyone know how I can hide the buttons on initialization? Heres the code I'm trying:
```
// initialize tinyMCE editor on our movie description text area
function initialize_movie_descriptions() {
$('.movie_description_editor').each(function() {
var id = $(this).attr('id');
tinyMCE.init({
mode : "exact",
elements : id,
theme : "modern",
plugins: "wordpress,wplink, paste",
theme_advanced_buttons1: "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
o.content = o.content;
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
}
});
});
}
initialize_movie_descriptions();
```
Edit
Apparently changing the line plugins: "wordpress,wplink, paste", to plugins: "", seems to have removed the 'Insert' menu item in the first toolbar. I guess because it's not loading any plugins now??
If you don't want all buttons but keep some of the functionality you have to keep to plugins. Simply just add the buttons you want in toolbar. The Same way with the menu:
tinymce
.init({
...
plugins : [code fullscreen save table contextmenu paste textcolor" ],
//buttons you want to show, else set "toolbar:false"
toolbar : "insertfile undo redo | styleselect",
...
menu : {
...
edit : {
//menu edit
title : 'Edit',
//items of menu edit
items : 'undo redo | cut copy paste pastetext | selectall'
},
...
});
you can find a list of plugins with their configuration in tinyMCE here: http://www.tinymce.com/wiki.php/Plugins
I struggled with the same problem after updating Wordpress to version 4.0. I found the solution on the wiki-advanced-page of TinyMCE. In TinyMCE 4 "theme_advanced_buttons" is replaced by "toolbar". You probably want to hide the "menubar" too, see example below:
tinyMCE.init({
mode: "exact", // not needed
theme: "modern", // default - not needed. Only theme available in WP 4.0
height: height, // e.g. 100
menubar : false, // you probably don't want to show the [file] etc bar
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6",
toolbar : "formatselect,bold,italic,underline,removeformat", //choose buttons in bar
});
There's a fast way to remove everything you see: Using CSS. Maybe it's not the best one, but is the faster one:
#mceu_15, #mceu_17, #mceu_18 {
display:none; }
Those #mceu numbers are the icons I want to hide (added by annoying plugins ;)
NOTE: You have to add this css on your_theme/admin.css
If it doesn't work look / add in your theme functions this:
function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');} add_action('admin_enqueue_scripts', 'admin_style');
My Fancybox is working so far, except for the close button which doesn't appear.
This is my Javascript:
$(".fancybox").fancybox();
$('.single').fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside' } }
});
});
I've tried working with the modal thingy but I don't know where I should put it, as I am new to Javascript.
How can I add fancybox with the button helper and thumbnail helper?
And is it possible for the buttons(button helper) to be put under the image so that I can watch and select which I want to see?
the buttons
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
and the thumbnail code
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I am a bit new with JavaScript I couldn't get it to work.
What I am trying to do is mix them together and put the buttons on the bottom
P.S. Can I also uses fancybox thumbnail helper to work with Youtube videos?
You also have to load the jquery.fancybox-buttons and jquery.fancybox-thumbs js and css files apart from the fancybox regular js and css files. They are under the subdirectory "helpers" of the zip file.