How can I switch slides automatically in SlideJS from SlidesJS.com? - javascript

I am working on getting SlideJS running, and have some aspects of presentation and behavior in order.
One thing I haven't yet managed is to get it to automatically slide, or transition, from one slide to the next.
The code that is getting the reported error is line 67 in SlideJS's main plugin file, at the last line besides the closing brace below; my copy is at https://cjshayward.com/wp-content/Slides-SlidesJS-3/source/jquery.slides.js:
if (typeof TouchEvent !== "undefined") {
$.data(this, "touch", true);
this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
Commenting out the assignment, with my invocation, suppresses the reported error, but I think the code may want more information than this line which appears to merely halve an existing setting. I can assign, without immediate reported error,
this.options.effect['qwerty'] = 'qwerty';
But I get a similar error (i.e. setting a property of undefined), if I have as much as:
this.options.effect.slide['qwerty'] = 'qwerty';
I've tried a number of configuration options, and I can see the manual circles to click to move between slides, but have not yet managed to get an automatic transition (the plugin supports slide or fade options; I want the 'slide' effect). My present options target is:
<script>// <![CDATA[
jQuery(function(){
jQuery('#slides').slidesjs({
slide:
{
speed: 200
},
interval: 2000,
active: true,
auto: true,
effect: 'slide',
height: 528,
interval: 5000,
pauseOnHover: true,
restartDelay: 2500,
swap: false,
width: 940
});
});
// ]]></script>
In view-source:http://www.slidesjs.com/, there are multiple sample invocatiosn, but the only invocation I see after slidejs.min.js's inclusion (the last script loaded from a URL) is:
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 350,
navigation: false
});
});
</script>
Thanks,

Have look at:-
https://jsfiddle.net/5x2tqdsv/
You need to fix your html and also remove the following line:-
effect: 'slide',

There were two issues.
One was that the HTML needed fixing.
The other was that the options were being presented, flat, where the source to http://www.slidesjs.com/examples/playing/ has:
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
I presently have everything I want, besides the data initially displayed all at once before being Hijaxed (I should be able to address that several ways, and it's not my concern). Besides the HTML issue, there was another issue I had in that I was trying to use a flat dictionary to specify options when I needed to have one option/key (play) have its own dictionary as the value instead of e.g. a number or boolean as its value the way most other options appear to.
The updated JSfiddle I'm working from now is https://jsfiddle.net/ydvtynjL/

Related

Since updating animejs my javascript no longer functions

Essentially I had an 'animejs' animation trigger when the nav button is clicked and then the same animation would reverse after a second click. It would toggle. Now this no longer works after updating animejs.
I've tried using a variable such as
var playing = true; and to toggle between it but that doesn't possess the same functionality as before.
the code looked something like this (this is simplified)
var navAnimation = anime.timeline({
duration: 100,
});
animation.add({
targets: 'navStuff'
//animation would be here
});
document.querySelector('.nav').onclick = () => {
animation.play();
// animation.play still functions properly
animation.reverse();
// animation.reverse(); is broken
};
//before the update you could simply place a two methods within the onclick function and it would toggle between them but that no longer is the case with animejs
What I want to happen is to be able to use a single target (button) to open my navigation and close it (toggle between the two state). I want to be able to spam the button and not see and glitches (as before).
Please beleive me I've spent an uncessary amount of time trying to get this working and it just refused to giv in.
I've attempted working with heights / transforms / colors, variable diffs, close inspection. Nothing works.
This is how I animate "reverses" now:
const notificationsContainerElement = document.querySelector('#demo-install-notifications-container');
let notificationsContainerAnimation = anime({
targets: notificationsContainerElement,
height: '350px',
easing: 'easeOutElastic(1.5, .5)',
duration: 1500,
delay: 0,
autoplay: false,
});
notificationsContainerElement.addEventListener('click', () => {
if(notificationsContainerAnimation.began === false) {
notificationsContainerAnimation.play();
} else if(notificationsContainerAnimation.began === true) {
notificationsContainerAnimation.began = false;
anime({
targets: notificationsContainerElement,
height: '100px',
easing: 'easeOutElastic(1.5, .5)',
duration: 1500,
delay: 0,
});
}
});
My first animation is autoplay: false, then, when I click an element, I .play() that animation, but notice the checks for the original animation's began. Once you hit play on an animation, the began property keeps changing.
Right...
But just doing notificationsContainerAnimation.reverse() on my animation just doesn't work no matter what. It just doesn't. I strongly believe it has to do with anime not being able to get where it's supposed to actually reverse to - the values.
The logic is sound, there's no way why it shouldn't work...but it doesn't.
So, for now, use 2 animations.

JS: How to prevent race condition?

My task is to improve the performance on an existing WordPress site therefore I installed cache and a race condition started happening.
This is the site. The full code is here, it doesn't fit in the editor, on line 474 there's this function
function loaded() {
var e = $("#content-wrap").attr("data-classes");
if ($("body").attr("class", e), $("#news-slider").length) {
var t = $("#news-slider").attr("data-timer");
$("#news-slider").slick({
dots: !1,
autoplay: !0,
speed: 800,
autoplaySpeed: t,
fade: !0,
cssEase: "linear",
prevArrow: "<span class='prev-slide'><i class='fa fa-angle-left'></i></span>",
nextArrow: "<span class='next-slide'><i class='fa fa-angle-right'></i></span>"
})
}
...
this line
$("#news-slider").slick({
gives slick not defined, sometimes, again it's a race condition. Sometimes an error in another function below it, the problem starts from loaded() function and below. Now I stopped caching the file and the homepage, where the file is loaded, the problem persists.
If I use $(window).load(function() either on the entire file or just this function, the homepage would be messed up, no errors would be visible in console though.
If I use $(document).ready(function() either on the entire file or just this function, the slider on mobile would be messed up, no errors would be visible in console though.
If I set a timer to delay the execution of the script, it wouldn't solve anything.

bxSlider reloadSlider() is undefined after page load

I'm working on an intime upload+refresh gallery (AJAX and jQuery based)
application.
I can upload multiple images with drag & drop and after uploading. I have to see how will look like the new gallery with the uploaded elements, which is in a bxslider based carousel (without page reload). I've done this successfully with the upload-refresh part. However when refreshing the slides the bxslider attributes from configuration are being lost.
When I want to use the reloadSlider() function I see the following error in Chrome console:
Cannot read property 'reloadSlider' of undefined
$(document).ready(function() {
$('.gallery_output').bxSlider({
slideWidth: 222,
minSlides: 1,
maxSlides: 5,
pager: false,
slideMargin: 0
});
});
function refresh_slider() {
var sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
}
UPDATE:
I added a button to trigger the event, but got the same error.
$('#refresh').click(function(){
var sliderToRefresh;
sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
});
Overall I just want to reload the bxSlider with a triggered function, without page reload. Any ideas why the reloadSlider() doesn't work?
You're defining the bxSlider in .gallery_output then trying to access it on #gallery_output :)

Lightbox_Me fadeOut Effect

I have been trying to set up LightBox_Me for a client. The idea is for an Age Verification overlay to appear when the page loads which asks "Are you over 18?". Yes or No. Upon clicking yes, the overlay disappears.
The Overlay will fade in, but I cannot work out how to get it to fade out.
Jive Release Notes with fadeOut support
The above link shows that the there should be support for fadeOut.
I have tried implementing this into the lightbox_me.js file which is where all of the appear effects are, but to no avail.
I have also tried implementing it into my age verification script, which is:
$(window).load(function () {
// Age Verification
if(!$.cookie('legal-age')){
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
//disappearEffect: fadeOut,
//overlayDisappearSpeed: 300,
//lightboxDisappearSpeed: fast,
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});
e.preventDefault();
}
});
The code above shows the 3 lines of code that should determine the fadeout animations.
Any help would be appreciated.
Cheers
If you are using the 'latest' build (which is over two years old now), then those particular options are no longer available. They were originally added over three years ago, and subsequently removed 9 months later.
Unfortunately there doesn't appear to be a graceful built-in way to fade out a lightbox_me lightbox any longer. If you are comfortable with jQuery you could probably re-add the code that was removed from that first commit, although I suspect it was removed for good reason.
A couple of other things worth pointing out:
Unless you're using a pre-1.9.x version of jQuery, the script is going to error out around line 31 - you'll want to replace this:
ie6 = ($.browser.msie && $.browser.version < 7);
...with this:
ie6 = navigator.userAgent.match(/MSIE 6/);
And if you do intend to re-add these effects, you'll want to make sure your values for disappearEffect & lightboxDisappearSpeed are declared as strings, otherwise it will error out:
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
disappearEffect: 'fadeOut',
overlayDisappearSpeed: 300,
lightboxDisappearSpeed: 'fast',
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function() {
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});

Option generateNextPrev of SlideJS doesnt work

I've got a problem with SlideJS. I dont want to display the previous/next-Buttons, so i've set the Option generateNextPrev to false. But that doesnt do anything.
Does anyone have an idea what am I doing wrong ?
Here is the Code:
$("#articlesSlider1").slides({
generateNextPrev: false,
play: 5000,
pause: 2500,
width: 700,
height: 320,
});
Check first in your HTML markup. And search for code below:
Prev</i>
Next</i>
Delete it, and try again. If you already added that prev/next in your code, generateNextPrev: false, won't work. Normally you don't need to add that link in markup, since Slidejs can generate that prev/next links.

Categories

Resources