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 about 5 years ago


My Comments

RJ Conway commented on RJ Conway's post about 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.

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.

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?

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 about 5 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on RJ Conway's post about 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.

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.

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?

Posts Followed



Following

  • No Content

Followers

  • No Content