I have a video carousel created using the flickity carousel library, seen here on codepen. What I want to happen is that when a user slides the carousel, the selected slide stops playing, then the slide that takes the selected, middle position starts to play. Right now, using jQuery, I get the selected slide to initially play:
$(document).ready(function () {
var $partnerSlides = $('.partner-slides').flickity();
function onLoadeddata(event) {
var cell = $partnerSlides.flickity('getParentCell', event.target);
$partnerSlides.flickity('cellSizeChange', cell && cell.element);
}
$partnerSlides.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('durationchange', onLoadeddata);
});
$partnerSlides.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('durationchange', onLoadeddata);
});
});
But when the slides switch position, the selected slide just moves position and keeps playing, while the new slide takes the middle position and doesn't play.
Is there a way to update those functions each time the carousel slides?
I actually figured out what I thought is the best way to do this. There is an event for the carousel, 'settle.flickity', which fires each time the carousel settles after being slid or autoplayed (More can be read about the flickity events here on flickity. Therefore, this code:
var $gallery = $('.partner-slides').flickity(); //this is the carousel
$gallery.on('settle.flickity', function () {
console.log('Flickity settled at ' + flkty.selectedIndex);
$gallery.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('loadeddata', onLoadeddata);
});
$gallery.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('loadeddata', onLoadeddata);
});
});
Will play the selected video and pause any video that is not selected.
Related
I am using Flickity to create a slider of images and videos. When changing slides, I want to play the video on the current slide (which has a class of .is-selected), and then pause again once I move to the next slide.
The code below manages to find any videos within the slider, but plays them on any slide change, rather than specifically for the slide they are within. Any help would be much appreciated.
// Init Flickity
var $carousel = $('.carousel');
$carousel.flickity();
// On slide change
$carousel.on('change.flickity', function() {
// Find videos
var currentSlide = $(this).find('.is-selected');
var video = $(this).find('video');
// Play videos
video[0].play();
});
What you want to do is pause all videos on every slide change and only play the one on the selected slide. I did something similar (without jQuery):
var carousel = document.querySelector(".carousel");
var flkty = new Flickity(carousel, {
// ..
});
flkty.on("change", function() {
console.log("Flickity active slide: " + flkty.selectedIndex);
flkty.cells.forEach(function(cell, i) {
if (cell.element == flkty.selectedElement) {
// play video if active slide contains one
// use <video playsinline ..> in your html to assure it works on ios devices
var video = cell.element.querySelector("video");
if (video) {
console.log("playing video " + i);
video.play();
}
return;
}
// pause all other videos
var video = cell.element.querySelector("video");
if (video) {
console.log("pausing video " + i);
video.pause();
}
});
});
As I stated in the comment, you might wanna use the "playsinline" attribute for your videos, otherwise you'll run into problems on iOS.
Also: using the "settle" event instead of "change" allows you to start playing once the active slide settled at its end position.
I'm making a website for a client using the divi theme. The site has a background video with sound. The customer wants in the video a button to turn the sound on and off.
With the following code I was able to mute but I can not make a button to turn on and off.
Can someone help me?
jQuery (document) .ready (function () {
jQuery (". et_pb_section_video_bg video"). prop ('muted', true);
});
Try with volume level!
Edit
And here are the functions for some volume down/up buttons.
$(document).ready(function(){
// Video element
var myVideo = $(".et_pb_section_video_bg video")[0];
// On load state (muted)
myVideo.volume = 0;
$("#sound_up").on("click",function(){
var actual_volume = myVideo.volume;
if(actual_volume<1){
myVideo.volume += 0.2;
}
});
$("#sound_down").on("click",function(){
var actual_volume = myVideo.volume;
if(actual_volume>0){
myVideo.volume -= 0.2;
}
});
});
Assuming the et_pb_section_video_bg video class is on the video element...
I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen
$.fn.animation = function () {
//get the welcome msg element
var $message = $(this);
//get a list of letters from the welcome text
var $getList = $(this).text().split("");
//clear the welcome text msg
$(this).text("");
//loop through the letters in the list array
$.each($getList, function(idx, element) {
//create a span for the letter and set opacity to 0
var newElement = $("<span/>").text(element).css({
opacity: 0
});
//append it to the welcome message
newElement.appendTo($message);
//set the delay on the animation for this element
newElement.delay(idx * 90);
//animate the opacity back to full 1
newElement.animate({
opacity: 1
}, 1100);
});
};
$('.introduction').animation();
$('.secondary').animation();
First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.
Edited
Click here to see the whole code working.
Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.
Changes I made in script: To start the second text animation with delay I used setTimeout() function:
setTimeout(function(){
$('.secondary').animation();
},2000);
To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:
$('.carousel').on('slid.bs.carousel', function () {
// here is where you start the animation for the second slide
})
Re-Edit
To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:
$('.carousel').bind('slid.bs.carousel', function (e) {
if($whichSlide == 1){
//set $whichSlide position for the next slide event
$whichSlide = 2
//start to animate the text
$('.introduction').animation();
setTimeout(function(){
$('.secondary').animation();
},2000);
/*set the text on the second slide to be invisible
* because we don't want it to appear before animation starts
*/
$('.slide2').css("opacity",0);
}else if($whichSlide == 2){
$whichSlide = 1;
$(".carousel").carousel("pause");
$(".slide2").animation();
setTimeout(function(){
$(".carousel").carousel();
},3000);
$('.introduction').css("opacity",0);
$('.secondary').css("opacity",0);
}
});
See the working code
I did extend PhotoSwipe with a Slide Show function, see this example The Slide Show starts if you click the Play button in the upper right corner and you stop the Slide Show by clicking the pause button in the upper right corner. This works fine on a PC.
It works also on my iPad, but clicking the Pause button has a side effect: the image is zoomed-in. I have no idea thus this causes. Any idea?
The Start/Stop function is executed in a function playpause(). To get rid of this side effect I like to use the single tap event on the image to execute my playpause() function.
So my question is: how do I bind my playpause() function to the click / tap event on the image?
This is the code I use:
/** HTML **/
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<!-- Play/Pause button -->
<img src="res/play.png" width="30" height="30" id="$playpause" alt="Speel/Stop (spatie balk)" title="Speel/Stop (spatie balk)">
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
/** JS **/
function slideShowTimer() {
if ((stopAfterLastSlide)&&((slide_index == items.length-1))) {
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
playing= !playing;
pswp.close();
}
else {
slideShowTimerID = setTimeout("slideShowTimer()",viewtime);
pswp.next();
}
};
function playpause() {
playing= !playing;
if (!playing) {
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
} else {
document.images['$playpause'].src = pause_img.src;
slideShowTimer();
}
};
pswp = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
pswp.listen('destroy', function() {
if (playing) {
playing = false;
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
}
});
pswp.init();
/** CSS **/
#link--play {
position: absolute;
right: 132px;
padding: 6px;
z-index: 9999;
}
You aren't showing any code, which makes it quite hard to give proper help.
Just shooting in the dark: use event.preventDefault();
I adoped this implementation, and it works quite well: https://photoswipe.uservoice.com/forums/275302-feature-requests-ideas/suggestions/6964114-autoplay
I did bind my playpause() function to the click / tap event on the image with next code:
ui.onGlobalTap = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if ((framework.hasClass(target, 'pswp__img')) && !PC) {
if(!_controlsVisible) {
ui.showControls();
setTimeout(function() {
ui.hideControls();
}, 2000);
}
playpause();
return;
}
To see it working go to: http://andrewolff.jalbum.net/Reestdal_PS/#&gid=1&pid=6 but clicking in the image to start/stop the slide show works only on a mobile device like the iPad, on a PC you can use the space bar to start/stop the slide show.
I did not solve the side-effect you see on an iPad if you click on the play/pause button in the upper right corner.
I'm using the latest version (2.1.8) of fullPage.js in order to create a dashboard, which automatically slides vertically and horizontally by updating the window.location.
See jsfiddle.
The issue I'm facing is that when we come back around to section 2, the slider is still on the final slide position and has to slide back to slide 1, before progressing forward through the slides.
I've tried following the instructions of Issue #129 ,which looks to have worked for someone using version 1.7.2:
Make scrollSlider function public
Change the name of the calls to the function
Apply onLeave event code:
onLeave: function(index, nextIndex, direction){
//getting the section by the index
var section = $('.section').eq((index - 1));
//if the section we are leaving has slides...
if (section.find('.slides').length) {
//moving to slide 0
$.fn.fullpage.scrollSlider(section, 0);
}
}
However, this has no affect on the behaviour.
Is anybody able to suggest a method to ensure the slider is always put back to the default slide when moving to the next section using the latest version of fullPage.js?
All the best,
AshBestos
I had the same problem. Solved with a copy from function scrollSlider().
Named it function scrollDefault() and set this function public.
In my jquery.fullPage.custom.js
$.fn.fullpage.scrollDefault = function(section, slide){
if(typeof slide != 'undefined'){
var slides = section.find('.slides');
var destiny = slides.find('[data-anchor="'+slide+'"]');
if(!destiny.length){
destiny = slides.find('.slide').eq(slide);
}
if(destiny.length){
landscapeScroll(slides, destiny);
}
}
};
The setTimeout is a quick & dirty solution to hide the scroll animation. So when you click on another section and go back you see the first slide.
In my $(document).ready(function() {
onLeave: function(index, nextIndex, direction){
setTimeout(function(){
var section = $('.section').eq((index - 1));
if (section.find('.slides').length) {
$.fn.fullpage.scrollDefault(section, 0);
}
}, 500);
}