How to start/stop CrossSlide (jQuery) - javascript

I found that CrossSlide causes video playback on the same page to stutter quite badly. My thought was to have the cross slide effect on the same page stop or pause during video play back, annd then start again when video stops.
Id doesn't look like there is any start stop function included. Does any one know how I might be able to accomplish this?
Thanks.

I've tried to use stop on the CrossSlide homepage at http://www.gruppo4.com/~tobia/cross-slide.shtml. Doesn't work.
I tried an improvised method, that is using sleep set to a very large value. The down-side is the slides have to revert to the first frame upon calling it and resuming.
On that page, using Firebug to run the exact same crossSlide call except for sleep:
$('#test1').crossSlide({
sleep: 100000, // <--- this one
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' }, // remaining slides doesn't really matter
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
To resume:
$('#test1').crossSlide({
speed: 45, // <--- this one
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' },
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
Note: You can't use sleep and speed together.

It looks like CrossSlide just uses $.animate() on img elements ---
have you tried $('#container img').stop(); ??

I wanted to stop CrossSlide and return the container back to its original state.
$('#container img').stop().hide('fast'); // worked for me!

Related

How to Load New Webpage Without Reloading Browser? Vanilla JS

I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js

How to wait for page to load befor Reveal.js starts

I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()

JWPlayer load() and playAd() not starting using onBeforeStart()

I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)

Magnific Popup - Scroll using the Ajax popup

I know the lightbox gallery you can scroll left and right and view picture after picture but is this possible with the ajax popup? I don't believe you can assign a delegate to allow this functionality.
Examples here.
Yep, it's possible with ajax too, you can even mix ajax with another content type.
<button class="link">Click me</button>
<script>
$('.link').magnificPopup({
items: [
{
src: 'ajax-file.html'
},
{
src: 'ajax-file-2.html'
},
{
src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
type: 'image'
}
],
type: 'ajax',
gallery: {
enabled: true
}
});
</script>

Parallel jQuery effects

I want to execute two effects in parallel. A jQuery UI "transfer" animation and a "fadeIn" on another element. They should begin and end at the same time.
My code so far:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300, function() {
$('#bar').fadeIn(300);
});
});
I understand that both effects are executed one after another. Is it possible to achieve parallel effect execution?
You had the fadeIn function in the "callback" of the effect. The callback is triggered/run only after the animation has finished. This should help you out..
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300);
$('#bar').fadeIn(300);
});
$('#foo').hover(function() {
$('#bar').fadeIn(300);
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300 );
});
You can do 2 or more parallel fx using animate.
Two run the two animations in parallel i.e. simultaneously use queue : false and don't put the second animation in the callback function of the first one like this:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, { duration:300, queue: false});
$('#bar').fadeIn({ duration: 300, queue: false});
});

Categories