3

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?

Improve this question
6
  • 1
    Are you seeing any errors in console?
    – Danny Englander
    Commented Aug 12, 2016 at 22:41
  • @Danny Englander: No,I don't see any error message.
    – Mojtaba Reyhani
    Commented Aug 13, 2016 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
    Commented Aug 13, 2016 at 5:09
  • @ No Sssweat: I have done that steps but Nothing has been changed.
    – Mojtaba Reyhani
    Commented Aug 13, 2016 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
    Commented Aug 13, 2016 at 15:15

2 Answers 2

Reset to default
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).

Improve this answer
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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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