Menu icon Foundation
Going crazy with Orbit

Hi, I got a question for developers or js coders.

Is it posible that when I fire a Reveal Modal that calls to an Orbit Slider, I could pick an specific slider to be display first?

If it posible, would you share this amazing power?

Orbitdeep linkingrevealmodal

Hi, I got a question for developers or js coders.

Is it posible that when I fire a Reveal Modal that calls to an Orbit Slider, I could pick an specific slider to be display first?

If it posible, would you share this amazing power?

Josh Saterdalen over 5 years ago

The Orbit doc page has info on deep-linking: http://foundation.zurb.com/docs/components/orbit.html#deep-linking

"To link to a particular slide in your Orbit slider you will need to add a data-orbit-slide attribute to each slide. Then anywhere on your page you can use data-orbit-link to link to that slide."

<a data-orbit-link="headline-1" class="small button">
  Goto Slide 1
</a>
<a data-orbit-link="headline-2" class="small button">
  Goto Slide 2
</a>
<a data-orbit-link="headline-3" class="small button">
  Goto Slide 3
</a>

Alex Plaza over 5 years ago

Thanks a lot, I already got that code inside the reveal I was using. But I never thought that it would work outside of it.

With your words I thiught: why not? and it worked just fine.
Thanks again.

Dominic Brown over 5 years ago

Is it possible to get a specific data-orbit-slide="name" from an other html page... okay let's rephrase this one:
I want to click on a "dropdown" link to load the page that contain the orbit and show the targeted slide.
How can I do that?

Menu code
HTML
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
<a href="#">Sponsorship</a>
<ul class="dropdown">
<li><a data-orbit-link="bronze" href="sponsorship.html">Bronze</a></li>
<li><a data-orbit-link="silver" href="sponsorship.html">Silver</a></li>
<li><a data-orbit-link="ambassador" href="sponsorship.html">Ambassador</a></li>
</ul>
</li>

Orbit slide code

<ul id="sponsor" data-orbit data-options="...">

          <li id="bronze" data-orbit-slide="bronze">