Using Zurb Foundation Orbit with Views

Events happening in the community are now at Drupal community events on www.drupal.org.
laughnan's picture

Anyone in attendance at the last Front-End meetup manage to figure out how to implement Zurb Foundation Orbit with Views to create a "slideshow." I have played with it (albeit briefly due to coursework), but I was wondering if anyone had tips.

Thanks!

Comments

Have you tried this module?

abelb's picture

http://drupal.org/project/field_orbit

I have never tried it but the maintainer is a good coder. i will test it out today and see if it works.

Wow -- that was pretty darn

laughnan's picture

Wow -- that was pretty darn simple to find. SMH.

Thank you! I will test it out also!

Can't use it. Don't know where to start

mail4botwe's picture

I'm using a foundation 4 base theme and I'm sure it is simple to use this module (field orbit) but i'm finding a very hard time on where to even start after installing the module. Would very much appreciate it if you could help me.

re: Where to start

firelf's picture

After you get the module(s) enabled, you'll be able to create a view of fields and the Orbit Slideshow should be one of the options for how to display any fields that contain images.

I tested it out

abelb's picture

And it works really well. It is not Views integration but the method works effectively. We are working on a views integration solution here at FunnyMonkey. I will let you know when we have worked it out.

Ideally, I would like to use Media 2 module, so that you can upload images and add the caption from there and it doesn't have to use the title or alt tag. That really bothers me semantically. And then build a views block that the user can place on a page.

Do you have thoughts on how you would want views integration to work? Anyone else?

I was thinking that a

mpgeek's picture

I was thinking that a Views-based implementation would be more general and reusable across multiple builds. What would be really nice is a display plugin that might include a template to produce the markup structure Orbit is expecting. From the end-user perspective, they should just be able to create a field collection of images, select the Orbit View display style (maybe that's a theme-specific display style or something), and just have have it work. Just a thought, as i haven't gotten to that point myself. I'm using Foundation on a current project, so a solution will be found... it'd just be interesting to see how others have handled it.

Basically the biggest initial

laughnan's picture

Basically the biggest initial thing that would sell this over Views Slideshow (ugh) is block integration -- making it simple to apply it to a theme.

Second, it would be nice to create separate nodes to integrate into the "slideshow" (maybe through a nodequeue relationship) and use the fields to set the captions.

I am really interested to see how integrating this with views will work out and cannot wait to see the work of FunnyMonkey!

The following has worked in

jgraham's picture

The following has worked in some proof-of-concept code, caveat this has not been thoroughly tested. I have not investigated the @todo well enough but this works well as long as each row is wrapped in a div. Then you just add the 'views-orbit' class via views UI and this pre-process detects that and adds the necessary js call to turn that view into an orbit slider.

/**
* Implements hook_preprocess_views_view().
*/
function THEME_preprocess_views_view(&$vars) {
  $added = &drupal_static(__FUNCTION__, FALSE);
 
  if (strpos($vars['css_class'], 'views-orbit') !== FALSE && !$added) {
    // @todo does the selector need to change based on our display settings? (eg. unformatted list, table, etc.)
    drupal_add_js("jQuery(document).ready(function () { jQuery('.views-orbit > div.view-content').orbit(); });",
      array('type' => 'inline', 'scope' => 'footer', 'weight' => 99999)
    );
    $added = TRUE;
  }
}

This approach does not have a clear path to support captions, for that I think we will need a custom display handler, as the markup that orbit wants is non-obvious (to me) to produce with existing views handlers.

Around the caption support we have discussed a few options, but nothing that we have come up with as options has a good UX across the board.

Beanslide

jessehs's picture

The beanslide module offers an alternate way of getting a fully featured slideshow block. (As many blocks as you want slideshows.) The benefit is that because of the field_collection and field_group modules, you can get groups of fields (header text, caption, link, etc.) without having to have each image be its own node.

It would be cool to get it set up to support the Orbit library. It currently supports jquery.cycle, jquery.vegas and responsiveslides libraries.

There's a README in the issue queue explaining how to get it started, if you want to take it for a spin.

add a data-orbit data attribute to the UL?

firelf's picture

Is there something in Views, Pages, or Display Suite that will let you "add a data-orbit data attribute" to the UL in Views?
Perhaps I am misunderstanding what field_orbit does. My slider is made up of one image each from many nodes, not one node of many images.
For some reason, the Views slideshow is bigger than the container it is supposed to fit inside, but an un-slideshowy UL fits quite nicely.

Use filters for multiple slideshows

ezy_'s picture

Was looking at a way to make multiple slideshows using the fields collection method with orbit in Drupal 7 and found the best solution with the current implementation was to use filters in the View editor: Field collection item: Value (not empty).

To do this - first select the slideshow you created under Structure > Views; Then under 'Filter Criteria' select one of the applicable field values you want to display and set the filter to NOT NULL. This will allow you to create multiple slideshows using foundation orbit slider and field collection.

oops - double post

ezy_'s picture

oops - double post

Anyone tried any animation option besides "Fade"?

bucoybrown's picture

This module works great if you stick mostly to the default settings for the field, but has anyone tried much else? My main pain point is the "Fade" animation that doesn't seem to change with any other option. Looking back at the project page, it looks like each of the demos use pretty much the default implementation, including fade transitions instead of slide-pushes. Even the Foundation docs for Orbit default to slide transitions, so seems odd to not have the option work. Anyone have success?

subscribe

dziabodo's picture

subscribe

How to use Orbit with Drupal 8

petermau's picture

I'am a newbie. I using Drupal 8 with ZURB Foundation 6. I've installed Orbit module. How can I use the Orbit Slide? Can everyone help me?

Portland (Oregon)

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: