Menu icon Foundation
Wacky Orbit Images

HI there!

      I'm trying to use the image orbiter but it's acting odd. A few things:

 

1. I don't want the images to auto play. I want the user to advance each image as they wish. 

2. I've created images that are 800w x 400h and it would be great if the orbiter would adjuat to that image size. 

 

Here's the code I'm using: 

......................................................

<div class="orbit" role="region" data-orbit data-auto-play="false">

  <div class="orbit-wrapper">

 

    <div class="orbit-controls">

      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>

      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

    </div>

 

    <ul class="orbit-container">

      <li class="is-active orbit-slide">

          <img class="orbit-image" src="img/Dtotals.png" alt="Totals">

      </li>

      <li class="orbit-slide">

          <img class="orbit-image" src="img/trans.png" alt="Transcripts">

      </li>

    </ul>  

  </div>

 

  <nav class="orbit-bullets">

    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>

    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>

  </nav>              

</div>

.................................

But here's how its displaying when I open a Chrome browser window from Dreamweaver CC 2019: 

This image shows the code from 4 bullets since i hadn't removed those when taking the image. 

 

This is really frustrating me and I was hoping for your help. 

 

How can I get the orbiter to better align to my image size?

Am I doing something wrong code wise or image size wise? 

 

Thank you so much for your time. 

 

image orbiterpoor layout

HI there!

      I'm trying to use the image orbiter but it's acting odd. A few things:

 

1. I don't want the images to auto play. I want the user to advance each image as they wish. 

2. I've created images that are 800w x 400h and it would be great if the orbiter would adjuat to that image size. 

 

Here's the code I'm using: 

......................................................

<div class="orbit" role="region" data-orbit data-auto-play="false">

  <div class="orbit-wrapper">

 

    <div class="orbit-controls">

      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>

      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

    </div>

 

    <ul class="orbit-container">

      <li class="is-active orbit-slide">

          <img class="orbit-image" src="img/Dtotals.png" alt="Totals">

      </li>

      <li class="orbit-slide">

          <img class="orbit-image" src="img/trans.png" alt="Transcripts">

      </li>

    </ul>  

  </div>

 

  <nav class="orbit-bullets">

    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>

    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>

  </nav>              

</div>

.................................

But here's how its displaying when I open a Chrome browser window from Dreamweaver CC 2019: 

This image shows the code from 4 bullets since i hadn't removed those when taking the image. 

 

This is really frustrating me and I was hoping for your help. 

 

How can I get the orbiter to better align to my image size?

Am I doing something wrong code wise or image size wise? 

 

Thank you so much for your time. 

 

Benoit Lemay 23 days ago

Hi,

What if you put a div around your orbit div with a max-width and max-height?

 

Which version of Foundation are you using?