2

I stubbornly tried to create an Orbit slide show based on zurb foundation 6 framework.

I followed all the steps on the instruction page:Orbit Slide Show.

I added everything needed for this type of slide show and included below CSS and Java Script classes in theme library:

  • motion-ui.css
  • foundation.css
  • foundation.js
  • jquery.js

The template code I used is here: Orbit SlideShow Problem

But unfortunately all images display vertically below each other (one image below another) and the Previous / Next button does not work properly, see below image:

enter image description here

I would be happy to hear what the problem is, share your experiences and guide me to know what is the right way to load that slideshow?

  • 1
    Are you seeing any errors in console? – Danny Englander Aug 12 '16 at 22:41
  • @Danny Englander: No,I don't see any error message. – Mojtaba Reyhani Aug 13 '16 at 0:32
  • Go to performance and uncheck aggregate js and css. Then go to the page in question and view page source. Check to see if all the .js and .css files that you need are indeed being loaded. – No Sssweat Aug 13 '16 at 5:09
  • @ No Sssweat: I have done that steps but Nothing has been changed. – Mojtaba Reyhani Aug 13 '16 at 5:59
  • 1
    I have a few other ideas, either your Drupal markup for this does not match what is actually in Foundation's or you have not instantiated the slideshow with something like var elem = new Foundation.Orbit(element, options); – Danny Englander Aug 13 '16 at 15:15
2

After many days searching for cause of this problem in throughout of the web resources, forums and reading variety of article, I fond that this issue for this that I don't keep the Priority of foundation Files Structure in my library, According to the Zurb Foundation documentation in this page: Installing JavaScript

It's important that you Make sure "Foundation.js" (or Foundation.min.js) files loads after "jQuery.js" (or jquery.min.js).

2

As an aside, there is a module that provides this with an 8.x branch in development:

https://www.drupal.org/project/field_orbit

As a maintainer of the 7.x branch, it works great.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.