Using Zurb's Orbit with ExpressionEngine

Just like many of you, we have been doing a lot of responsive websites lately. When we can, we try to build our own without the use of frameworks. But that is not always a possibility due to budget or timeframe. When we have to use a framework we prefer to use Zurb's Foundation. We find that it has the right mix of functionality we need to be able to develop websites.

Recently a client we are working with asked for us to add some functionality on top of Zurb's Orbit. For those of you not familiar, Orbit is the image rotator that Zurb includes with their framework. Our client wanted to be able to dictate what quadrant the Caption showed up in. So with a little bit of CSS and an additional field or two in our channel we can create an image rotator that allows the author of the entry to specify which quadrant the caption appears in.

 
<div>
<div>
<ul>
 <li>{exp:channel:entries channel="rotator" limit="5" sortby="random"}</li>
 <li><img src="{cf_rotator_img}" data-image="osnnxackeioa"> <a href="https://bluefishds.com/template_group/template"> {title} - {cf_rotator_sub-title} </a></li>
 <li>{/exp:channel:entries}</li>
</ul>
</div>
</div>

You will need to include the following javascript files:

Add this code to your css file. I prefer to not modify the original foundation.css files in case an update is released, we wouldn't want to overwrite our changes. I know it adds some additional size to the site since you have to download some additional lines of code. But in the grand scheme of things I doubt 25 uncompressed lines of code are a huge problem. If you disagree then compress them to a line each and you should be ok.

.orbit-container .orbit-slides-container > * span{
 width: 200px;
 padding: 20px;
 background-color: #fff;
 color: #333;
 margin: 35px;
 opacity: 0.85;
}
.orbit-container .orbit-slides-container > * span.lower_left{
 bottom: 25px; 
 left: 60px;
}
.orbit-container .orbit-slides-container > * span.lower_right{
 bottom: 25px;
 right: 60px;
}
.orbit-container .orbit-slides-container > * span.upper_right{
 bottom: 250px;
 right: 60px;
}
.orbit-container .orbit-slides-container > * span.upper_left{
 bottom: 250px;
 left: 60px;
}

I prefer to use Pixel & Tonic's Pill fieldtype for the field that allows an author to select which quadrant the caption appears in. So we need to head over to Pixel & Tonic's Divebar and download/install their Pill fieldtype (just upload the files to your third_party folder and install the fieldtype).

We will then add a new field to the channel that contains the images used. In this example we are isolating the rotator in it's own rotator, but we often use a single entry channel for the home page that allows a user to manage many aspects of the home page from within a single entry (blog post soon).

This is what is added to your Publish Page:

Notice that the first item on the Pill is selected by default. This means that you can re-arrange the order of the Pill Options to make your most used position the default if you like.

I hope this is helpful. If you have a project that you need some help with or if you want to build something cool using Foundation Contact Us