Access Wordpress slider plugin option from function - javascript

When using "WP Vegas" wordpress plugin (image slider) the options are set this way:
<script>
jQuery(function () {
jQuery.vegas('slideshow', {
delay: 8500,
backgrounds: [{
src: 'some-image.jpg',
fade: 1250
}, {
src: 'other-image.jpg',
fade: 1250
}, ]
})
});
</script>
Is it possible to access the "backgrounds" option from a javascript function?

Related

Video background doesn't play on mobile with VegasJS

I'm trying to autoplay a video background but it won't play on mobile. I'm using Vegas, a jquery slide from Jay Salvat https://vegas.jaysalvat.com/
So, I'm looking for help to autoplay the video background on mobile screens.
This is my code:
<script>
if ($('body').hasClass('video-background')) {
$('body.video-background').vegas({
preload: true,
timer: false,
delay: 5000,
transition: 'fade',
transitionDuration: 1000,
firstTransition: 'none',
slides: [
{ src: 'assets/images/slider-1.jpg',
video: {
src: [
'assets/videos/video-1.mp4'
'assets/videos/video-1.webm'
'assets/videos/video-1.ogv'
],
loop: false,
mute: true
}
},
{ src: 'assets/images/slider-2.jpg',
video: {
src: [
'assets/videos/video-2.mp4'
'assets/videos/video-2.webm'
'assets/videos/video-2.ogv'
],
loop: false,
mute: true
}
},
],
overlay: 'assets/images/bg.png'
});
}
</script>
The owner of the slider said to override this code to make the video play on mobiles but I'm very new to jquery so I don't know how exactly to override it and I just know that it detects if a screen is in mobile:
$.vegas.isVideoCompatible = function () {
var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
return !devices.test(navigator.userAgent);
}

Displaying a carousel on clicking each link - using Jquery and OwlCarousel

I have 3 carousels, and i'm trying to display each carousel on clicking a respective link, using jquery.
When i add the css "display: none" to a div, the owl carousel does not quite behave correct. The size of the carousel elements shrink, and sometimes disappear.
I have made a jsfiddle for it, i'd appreciate your help in finding what is going wrong - https://jsfiddle.net/prtkvarma/yLjw7gsk/3/
Thanks.
Following is just the JS part of the code -
jQuery(document).ready(function($) {
$('.owl-one').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-two').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-three').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
/*showing/hiding particular carousels on clicking links*/
$('.link-promotions').click(function() {
$('.sec-casino-games').hide();
$('.sec-live-odds').hide();
$(".sec-promotions").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-casino-games').click(function() {
$('.sec-promotions').hide();
$('.sec-live-odds').hide();
$(".sec-casino-games").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-live-odds').click(function() {
$('.sec-promotions').hide();
$('.sec-casino-games').hide();
$(".sec-live-odds").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
});
You typically want to stay away from built in special effects that hardcode inline styles on elements that leverage libraries that are heavy on visual user experience. The reason for this is because the jQuery built in special effects all change the style attribute of the element directly, which will typically clash with library CSS rules.
I've taken the liberty to rewrite most of your jQuery to be simpler, less redundant, and streamlined. The main thing, to answer your question, is to leverage the .addClass() method, which allows you to .animate() add classes to your element, much like that same manner that .hide() does. This is done by adding time in milliseconds as second parameter when using the .addClass() method.
jQuery
jQuery(document).ready(function($) {
$('.owl-carousel').each(function(index, element) {
jQuery(element).owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 4
}
}
});
});
var owl_content = jQuery('.owl-carousel');
var owl_links = jQuery('.select-link a');
jQuery(owl_links).each(function(index, element) {
jQuery(element).click(function(e) {
jQuery(owl_content).each(function(i, el) {
jQuery(el).addClass('c', 500);
if (i === index) {
jQuery(owl_content[index]).removeClass('c', 500);
console.log(i);
}
});
});
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
jQuery('.c.first').removeClass('c');
});
Fiddle
https://jsfiddle.net/dixalex/yLjw7gsk/8/
Sources
animating addClass/removeClass with jquery

How to view only 3 items on Owl Slider instead of 5

I am trying to implement owl slider in my website and it is working good but the only problem is that owl slider show 5 items on one slide by default so I need to make it 3 items to be display per slide instead of 5.
I have also tried to add below code which is available on it official website but it is not working for me please let me know how to fix.
jQuery(document).ready(function(){
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
})
Thanks
I have a similar problem, and my problem is below:
I import a dynamic css style file;
When document is ready, the dynamic file have not loaded, but owl is inited;
And then the dynamic file loaded, now the dynamic file's some style resize owl-carousel container, but now owl's responsive is not triggered;
You may should init Owl when all style is ready.
window.addEventListener("load", function () {
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true : false,
loop: ($(".owl-carousel .item").length > 1) ? true : false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
}, false);
Another workaround is below:
setTimeout(function () {
$('.owl-carousel').trigger('refresh.owl.carousel');
}, 500);

TinyMCE with FancyBox

I am currently struggling to get a FancyBox popup to work with a few embedded tinyMCE text areas. I have looked all over the internet, including pretty much every post on here and remain unsuccessful.
The FancyBox will load correctly and display the multiple tinyMCE text areas (the button toolbars all display correctly). The problem is that it will not actually display any text in the textboxes, and the actual text box is not editable.
My tinyMCE init code is:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Cause",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,code,separator,radspell",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none"
});
And my call to FancyBox is:
$('#PopupAdd').fancybox({
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
I have tried nearly every variation of the above code I can think of. If anyone has any new ideas as to how to approach this, it would be greatly appreciated!
Update:
My HTML is:
<lcmp:LittleButton ID="AddStatusButton" Tooltip="Add a new Status." OnClick="addStatusPopup(); return false;" />
Which creates a button that when clicked calls
function addStatusPopup()
{
$('#PopupAdd').trigger('click');
}
I had exactly the same problem. What worked for me was to run the tinyMce.init after the FancyBox opened.
I don't see how your loading the embedded text areas (inline, ajax, iframe?) but try adding a "type"
$('#PopupAdd').fancybox({
titlePosition: 'none',
type: 'iframe' // Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
Not seeing a fiddle or example makes it difficult but one could do a manual call like this:
$("#PopupAdd").click(function() {
$.fancybox({
href: '#PopupAdd',
type: 'inline',
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
});
All the above code looks complicated to me, keep things simple and use this tutorial - WordPress TinyMCE Editor Tips | How to Add Custom Buttons, Styles, Dropdowns & Pop-ups. All the working code examples are there to download and customise as well.
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/
The snippet below will add a "popup" to your tinyMCE editor .
'
(function() {
tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Custom Headline',
onclick: function() {
editor.windowManager.open( {
title: 'Insert h3 tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
}],
onsubmit: function( e ) {
editor.insertContent( '<h3>' + e.data.title + '</h3>');
}
});
}
}'

Loading images from database to Jquery Vegas Slideshow

I´m using the plugin Jquery Vegas Slideshow in a project and I'm trying to load images directly from my database into the slideshow script.
I have it running with the following code:
<script type="text/javascript">
jQuery.vegas('slideshow', {
backgrounds:[
{ src:'images/slider/slider_01.jpg', fade:2500 },
{ src:'images/slider/slider_01.jpg', fade:2500 },
]
})('overlay', {
src:'images/slider/overlays/06.png'
});
</script>
How can I populate the background parameter using Ajax?
I've read the documentation but there is no information about any server side language.
By checking the source code of vegas plugin on github, there does not seem to be any method to update background images dynamically after plugin is initiated. But as there is one method called destroy I would suggest to try following code which destroys the background and overlay assigned and re-initialize the plugin with new set of images.
// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 },
{ src:'2.jpg', fade:1000 },
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }];
//destroy vegas object background
$.vegas.desroy('background');
//destroy vegas overlay background
$.vegas.desroy('overlay');
// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: bgimages
}) ('overlay');
Try this Code :
$('body').vegas({
overlay: true,
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
color: 'red',
animation: 'random',
animationDuration: 20000,
slides: [
{ src: 'img/2.jpg'},
{ src: 'img/3.jpg' },
{ src: 'img/4.jpg' },
{ src: 'img/5.jpg' }
]
});

Categories