Using a jquery plugin for Youtube backgrounds (https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
I am trying to pause all the background videos with a single pause button, not sure for which reason it only pauses the first video, no matter the length of divs with background video.
I set up a jsfiddle explaining what I am trying to achieve.
The codes are as follow:
$('.vid').each(function() {
var vid = $(this).data('video');
$(this).YTPlayer({
videoURL: vid,
stopMovieOnBlur: false,
mute: true,
ratio: 'auto',
quality: 'default',
loop: true,
showYTLogo: false,
showControls: false,
containment: 'self'
});
});
$('.pauseit').on('click', function() {
$('.vid').YTPPause()
});
Thanks for any help on this.
Converting comment to answer.
Make sure the button is a button: type="button"
use .each again to pause the videos:
Like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() { $(this).YTPPause(); });
});
https://jsfiddle.net/mplungjan/swnj2bcg/
Take a look here. I modified the jsfiddle:
update
Chnage it like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() {
$( this ).YTPPause();
})
});
Related
Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!
use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);
I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1
I've been trying to figure out how to trigger animations on scroll, and I can't quite get it. Basically, I want to have a class that I can add to my titles that will trigger an animation any time the element with the class is scrolled into view.
I tried using the jQuery Inview plugin, but I couldn't get it to do what I wanted. Then I switched to Waypoints.js and I kind of have it working, but it's not perfect. Right now, the elements animate when I scroll to them for the first time but they do nothing when I scroll up and back down the page. The animations only fire once.
Below is my current code. If anyone can help me figure out a way to get the animations triggering every time the user scrolls past them—and also a way to condense the code so that it fires based on class and not ID—that would be really excellent. (Right now, I have separate function for each element.)
PS: I'm using animate.css, wow.js, textillate.js for the animations.
HTML
<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1>
jQuery
$(function () {
var l1 = $("#l1");
var waypoint = new Waypoint({
element: document.getElementById('l1'),
handler: function() {
l1.textillate({ in: { effect: 'flipInY' } });
},
offset: 'bottom-in-view',
});
});
Thanks for your help!
EDIT: I have found a partial solution that triggers the animations every time you scroll past them. However, I can only seem to get it to work with ids. I'd rather be able to target a class than have to write a separate function for each new title. Any ideas on how to modify the following code so that it works for a class of .lettering?
// Animate #l1
$(function () {
var animatel1 = $('#l1').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
var l1 = $("#l1");
var inview = new Waypoint.Inview({
element: $('#l1'),
enter: function(direction) {
},
entered: function(direction) {
animatel1.textillate('in')
},
exit: function(direction) {
animatel1.textillate('out')
},
exited: function(direction) {
}
})
});
Having it work with a class is a matter of looping through your array of elements. I see you're using jQuery, so it can help you with a bit of the boilerplate:
$(function () {
$('.your-class').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
$('.your-class').each(function() {
new Waypoint.Inview({
element: this,
entered: function(direction) {
$(this.element).textillate('in')
},
exit: function(direction) {
$(this.element).textillate('out')
}
});
});
});
This is what worked for me. Needed to wrap everything in an .each() function. Replace lettering with your class name and you should be good to go.
$('.lettering').each(function() {
var animatelettering = $('.lettering').each(function(){
$(this).textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
});
new Waypoint.Inview({
element: this,
enter: function(direction) {
},
entered: function(direction) {
animatelettering.textillate('in')
},
exit: function(direction) {
animatelettering.textillate('out')
},
exited: function(direction) {
}
});
});
I need to start scroll when user hover. I take a function reference from the question this and this. I notice that even the callback function is not working with initCallback option. Am I missing something or I forgot something to put in the code. Here is example of code fiddle
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.startAuto();
}, function() {
carousel.stopAuto();
});
};
You should use jcarouselAutoscroll plugin for that
Check this updated fiddle
INIT CODE
A(".example").jcarousel({
auto: 1,
wrap: "last"
}).jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: false
});
Code for hovering
$(".example li").hover(function () {
$(".example").jcarouselAutoscroll('start');
},function () {
$(".example").jcarouselAutoscroll('stop');
})
i am using the magnific Popup Plugin (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)
May i put my code in here first:
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
// Delay in milliseconds before popup is removed
removalDelay: 600,
// Class that is added to popup wrapper and background
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade',
type:'inline',
midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
callbacks: {
beforeOpen: function() {
if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){
if ($('.imagetitle').length > 0) {
// it exists
}else{
$(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
$(".image-container span.imagetitle").css({
"left": $(".image-container img").position().left+"px",
"margin-top":10+"px",
"margin-bottom":10+"px"
});
}
}
//Make it a Gallery! - Whoop Whoop
if($("div.white-popup").length > 1){
$("div.white-popup").append("<div class='popupgalleryarrowleft'> </div>");
$("div.white-popup").append("<div class='popupgalleryarrowright'> </div>");
}
},
open: function(){
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
}
}
});
});
So i want to have an inline gallery. It works everything fine, but this part doesnt:
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
I am just trying to get the next instance, when there is one. When i am running this code via firebug on runtime, it works!
Can anyone help me with this? Hopefully.
Greetings David
was looking for the same thing.
I think here what you are looking for http://codepen.io/anon/pen/kInjm
$('.open-gallery-link').click(function() {
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
});
});
I needed to create a custom navigation for galleries, so I played with using $.magnificPopup.instance.next();. It does work when put into a click handler for a gallery.
Otherwise, there is no "next instance" to find because it doesn't exist yet.
This will navigate to the next gallery image when clicking on bottom/title bar (see it on codepen):
$('.gallery').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.gallery').click(function() {
$('.mfp-bottom-bar').click(function() {
$.magnificPopup.instance.next();
});
return false;
});
And here's a more complete example on Codepen, with multiple galleries.
This one also adjusts for the height of the custom navigation and padding in the popup, using callbacks. Useful because the navigation button in my project had significant height and was being cut off by the bottom of the screen. (By default, only the image height itself is used to calculate how the popup fits in the viewport.)
Hope this is useful to someone. I know the question was two years ago, but maybe others will also find it by Googling, like I did.
I'm using the Flowplayer plugin inside the AnythingSlider control. I'd like to stop the slider from moving to the next slide when the user clicks to interact with the Flowplayer. I've tried the following but the slider continues to move to the next slide; the .click() call on the #start-stop item didn't work either. I'd like it to stop when the user clicks on any part of the Flowplayer, though in this case I tested it for the onStart.
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
//$('#start-stop').click();
$('.anythingSlider').anythingSlider.startStop(false);
}
});
Thank you.
Make sure you get the latest version of AnythingSlider, then try this:
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
$('.anythingSlider').data('AnythingSlider').startStop(false);
}
}
});