Menu icon Foundation

My Posts

  • 5
    Replies
  • Using Interchange with Orbit

    By RJ Conway

    Orbitinterchange

    I want to load Orbit and associated images only for medium up. Small devices should not load the Orbit slider or any of the slide images. I have tried using Interchange to supply the HTML partial for Orbit, but this breaks Orbit. The page shows the O... (continued)

    Last Reply by James Stone over 5 years ago

My Comments

RJ Conway commented on RJ Conway's post over 5 years

This isn't working for me. I'm not really clear where I should put the reflow code. In the app.js file? Before the closing body tag of the page with the orbit slider? Inline in the pages somewhere? Sorry, I'm at a loss. I have tried a few of these options and still have stacked slides rather than an orbit slider.

Helpful 0
RJ Conway commented on RJ Conway's post over 5 years

A section in the index.html uses Interchange to load partials, and the partial for both medium and large has code for Orbit slider (partial for small has alternate content).

<!-- Interchange gets HTML for the slider or alt content for small -->
<div data-interchange="[_partials/sliderNoOrbit.html, (default)], [_partials/sliderOrbit.html, (medium)], [_partials/sliderOrbit.html, (large)]">
</div>
<!-- End Interchange -->

The sliderOrbit.html partial contains this:

<!-- Orbit Slideshow for Medium Up -->  
<div class="orbit-container">
  <ul data-orbit id="slider" data-options="timer_speed:6000; resume_on_mouseout: true; slideNumber: false; animation:fade;">
    <li>
    <img src="images/Slide1.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption 
    </div>
    </li>
    <li>
    <img src="images/Slide2.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption
    </div>
    </li>
    <li>
    <img src="images/Slide3.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption
    </div>
    </li>
  </ul>
</div>  
<!-- End Orbit -->

The result is a page with the three slides for Orbit (with their captions) stacked on top of each other as in a list. No slideshow. :( Everything else on the page has the proper appearance and functionality.

Helpful 0
RJ Conway commented on RJ Conway's post over 5 years

Thank you for your reply, Rafi.

If I wanted to adapt the suggestion to Foundation 5 and force medium layout to print for all pages in a site, would this work?

@media print {
  @for $i from 1 through $total-columns {
    .medium-#{$i} {
      width: grid-Calc($i, $total-columns);
    }
  }
}

Would I place this code in my custom.scss file?

Helpful 0

Posts Followed

  • 5
    Replies
  • Using Interchange with Orbit

    By RJ Conway

    Orbitinterchange

    I want to load Orbit and associated images only for medium up. Small devices should not load the Orbit slider or any of the slide images. I have tried using Interchange to supply the HTML partial for Orbit, but this breaks Orbit. The page shows the O... (continued)

    Last Reply by James Stone over 5 years ago

Following

    No Content

Followers

My Posts

My Comments

You commented on RJ Conway's post over 5 years

This isn't working for me. I'm not really clear where I should put the reflow code. In the app.js file? Before the closing body tag of the page with the orbit slider? Inline in the pages somewhere? Sorry, I'm at a loss. I have tried a few of these options and still have stacked slides rather than an orbit slider.

Helpful 0
You commented on RJ Conway's post over 5 years

A section in the index.html uses Interchange to load partials, and the partial for both medium and large has code for Orbit slider (partial for small has alternate content).

<!-- Interchange gets HTML for the slider or alt content for small -->
<div data-interchange="[_partials/sliderNoOrbit.html, (default)], [_partials/sliderOrbit.html, (medium)], [_partials/sliderOrbit.html, (large)]">
</div>
<!-- End Interchange -->

The sliderOrbit.html partial contains this:

<!-- Orbit Slideshow for Medium Up -->  
<div class="orbit-container">
  <ul data-orbit id="slider" data-options="timer_speed:6000; resume_on_mouseout: true; slideNumber: false; animation:fade;">
    <li>
    <img src="images/Slide1.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption 
    </div>
    </li>
    <li>
    <img src="images/Slide2.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption
    </div>
    </li>
    <li>
    <img src="images/Slide3.jpg" width="800" height="300" />
    <div class="orbit-caption">
    Text for the caption
    </div>
    </li>
  </ul>
</div>  
<!-- End Orbit -->

The result is a page with the three slides for Orbit (with their captions) stacked on top of each other as in a list. No slideshow. :( Everything else on the page has the proper appearance and functionality.

Helpful 0
You commented on RJ Conway's post over 5 years

Thank you for your reply, Rafi.

If I wanted to adapt the suggestion to Foundation 5 and force medium layout to print for all pages in a site, would this work?

@media print {
  @for $i from 1 through $total-columns {
    .medium-#{$i} {
      width: grid-Calc($i, $total-columns);
    }
  }
}

Would I place this code in my custom.scss file?

Helpful 0

Posts Followed

Following

  • No Content

Followers

  • No Content

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635