Menu icon Foundation
Foundation 5.1.1 update orbit broken

I've recently ran a bower update on a project and now the orbit slider isn't working.

As per the other posts on the forum I have deleted my .sass-cache and recompiled my sass using compass clean and gone through and double checked that all my scripts are correctly included and being called properly.

I am not getting any JS Errors either which is strange but my orbit slider is just showing up as a bullet point with the image and description div.

The project is Wordpress based if that makes a difference and you can see the the problem on a staging site at the following URL:

http://www.neverdesign.net/testbed/

If anyone needs additional information let me know, I've added the code for my JS below as well

jQuery(document).foundation({
        orbit: {
			animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
			timer_speed: 10000, // Sets the amount of time in milliseconds before transitioning a slide
			pause_on_hover: true, // Pauses on the current slide while hovering
			resume_on_mouseout: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
			animation_speed: 500, // Sets the amount of time in milliseconds the transition between slides will last

			navigation_arrows: true,

			container_class: 'orbit-container',
			stack_on_small_class: 'orbit-stack-on-small',
			next_class: 'orbit-next', // Class name given to the next button
			prev_class: 'orbit-prev', // Class name given to the previous button
			timer_container_class: 'orbit-timer', // Class name given to the timer
			timer_paused_class: 'paused', // Class name given to the paused button
			timer_progress_class: 'orbit-progress', // Class name given to the progress bar
			slides_container_class: 'orbit-slides-container', // Class name given to the slides container
			bullets_container_class: 'orbit-bullets',
			bullets_active_class: 'active', // Class name given to the active bullet
			slide_number_class: 'orbit-slide-number', // Class name given to the slide number
			caption_class: 'orbit-caption', // Class name given to the caption
			active_slide_class: 'active', // Class name given to the active slide
			orbit_transition_class: 'orbit-transitioning',
			bullets: true, // Does the slider have bullets visible?
			timer: true, // Does the slider have a timer visible?
			variable_height: true, // Does the slider have variable height content?
			swipe: true,
			next_on_click: false
  		}
    });
            

         

Orbit5.1.1Update

I've recently ran a bower update on a project and now the orbit slider isn't working.

As per the other posts on the forum I have deleted my .sass-cache and recompiled my sass using compass clean and gone through and double checked that all my scripts are correctly included and being called properly.

I am not getting any JS Errors either which is strange but my orbit slider is just showing up as a bullet point with the image and description div.

The project is Wordpress based if that makes a difference and you can see the the problem on a staging site at the following URL:

http://www.neverdesign.net/testbed/

If anyone needs additional information let me know, I've added the code for my JS below as well

jQuery(document).foundation({
        orbit: {
			animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
			timer_speed: 10000, // Sets the amount of time in milliseconds before transitioning a slide
			pause_on_hover: true, // Pauses on the current slide while hovering
			resume_on_mouseout: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
			animation_speed: 500, // Sets the amount of time in milliseconds the transition between slides will last

			navigation_arrows: true,

			container_class: 'orbit-container',
			stack_on_small_class: 'orbit-stack-on-small',
			next_class: 'orbit-next', // Class name given to the next button
			prev_class: 'orbit-prev', // Class name given to the previous button
			timer_container_class: 'orbit-timer', // Class name given to the timer
			timer_paused_class: 'paused', // Class name given to the paused button
			timer_progress_class: 'orbit-progress', // Class name given to the progress bar
			slides_container_class: 'orbit-slides-container', // Class name given to the slides container
			bullets_container_class: 'orbit-bullets',
			bullets_active_class: 'active', // Class name given to the active bullet
			slide_number_class: 'orbit-slide-number', // Class name given to the slide number
			caption_class: 'orbit-caption', // Class name given to the caption
			active_slide_class: 'active', // Class name given to the active slide
			orbit_transition_class: 'orbit-transitioning',
			bullets: true, // Does the slider have bullets visible?
			timer: true, // Does the slider have a timer visible?
			variable_height: true, // Does the slider have variable height content?
			swipe: true,
			next_on_click: false
  		}
    });
            

         
Rafi Benkual over 5 years ago

Your markup works on 5.2 in codepen http://cdpn.io/vnJjf

Have you tried testing it on your local machine?

Jon de Araujo over 5 years ago

Ok so ran another Bower_update and the terminal output did appear to use the #5.2.0 git repository and no errors were reported then I created a new project and did a file compare and all of the files in my theme were the same.

Went through my functions file too and updated the wp_enqueue_scripts calls to include the right version numbers and tried using the Google CDN for jQuery and the one in the bower_components folder with neither making a difference.

I noticed that once the page was fully loaded and I ran a jQuery(document).foundation(); or $(document).foundation(); I was returned what looks like the whole DOM and then also changed the call from the footer to the header and tried it with no luck. Also tried running the call like:

(function ($) {
  $(document).foundation();
});

Again no luck though :( Tried all this on both my local machine and the server

Jon de Araujo over 5 years ago

Ok so another update:

Looks like I took a step in the right direction today by stumbling across this little line of code:

meta.foundation-data-attribute-namespace {
  font-family: false; }

It took about 4 and a half hours to come across that and now if you visit

http://www.neverdesign.net/testbed/

you will see that the slider is at least applying some of the classes and styles but things like the buttons don't work and the slider isn't actually moving through the images.

Previously it was apparently being set to 'Sans-serif'.

On another note this problem seems to affect to the Clearing Lightbox which can be found on this page

http://www.neverdesign.net/testbed/gallery-pages

It seems to be better with that line of SCSS in but I am wondering what else is missing because of it. Can anyone shed some light on this and how the namespacing works and why even though my settings.scss was up to date it wasn't included?

Still desperately trying to solve this. Thanks!!

Jon de Araujo over 5 years ago

Ok so another update, started the project again and now the slider loads but doesn't play despite the fact that the timer appears to be running. As with previously the next and previous slides are still not working and the click to next slide is also not working. The Clearing Lightbox appears to be fixed but still no luck with Orbit.

I've had a chat to the guys on the IRC channel which is incredibly quiet and had better luck on the #wordpress channel but the problem stumped them as well.

If anyone has any ideas about what's going on please reply, it will be much appreciated

Jon de Araujo over 5 years ago

For anyone following the issue, it would seem that the animate-in and animate-out classes aren't being dealt with correctly, not sure what is causing it but I've posted the issue on github now

Jon de Araujo over 5 years ago

Hooray, grabbed the orbit code from 5.0.3 and pasted it over the Orbit code in 5.2 and it works again. This is obviously a terrible solution but it's been a week now and no updates on github, no help on email support or IRC have left me hanging way too long.

All I can suggest to other people experiencing similar issues is that you either a. don't update, b. do update and keep a backup of your old orbit code to use or c. use a different framework.

Gabriel Taminiaux over 5 years ago

I had the same problem.
After I did a bower update my multiple orbits on the same page stopped working together.

In fact, only the first one initialized worked. The others simply stopped sliding.

I tracked down the problem to the line 3359 in foundation.js where it seems that self.cache.animating is only set to false by the first orbit launched and never by the others.

I commented out that line and everything went back to normal ( and still does until now )

Patrick Mccaffrey over 5 years ago

Are there plans to fix this? None of the current solutions are viable, in my opinion.

Things like this REALLY should stop a version from being released...