CODEWITHSUNDEEP
javascripthandlebars.jszurb-foundation
DanHeidel
DanHeidel

Reputation: 671

Foundation Orbit not working with Handlebars

I'm having problems getting Foundation orbit to work. I can call it from regular HTML and it works fine but when I try to use dynamically generated Handlebars HTML, it does not load.

The page is here: http://danheidel.github.io/resume-foundation/#art-contact The non-functional Orbit carosel is above, the functioning one is at the bottom of the page. (formatting on the latter is a bit screwy since it's not in the Foundation grid) Source is here: https://github.com/danheidel/resume-foundation

I'm not seeing any errors on load so I suspect that Orbit is not firing on the dynamically templated HTML. Has anyone gotten Orbit to work with templating?

The dynamically generated HTML from Handlebars is below. As far as i can tell, it's all formatted properly.

EDIT: I'm almost certain that Orbit is not firing because it doesn't intercept HTML changes after the initial page load. I tested by having JQuery post-load modify a div with the proper HTML and Orbit did not intercept that either. Can anyone tell me how to get Orbit to fire post-load?

      <div class="panel" id="minor-panel">
           <h3>Contact</h3>
           <ul data-orbit="">
                 <li>
                    <img src="img/contact part3_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part4_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part5_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part6_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>
           </ul>
     </div>

Upvotes: 0

Views: 419

Answers (1)

DanHeidel
DanHeidel

Reputation: 671

Ugh, poor showing Stack Overflow. :( Anyhow, I dug through the JS and found the answer. Just make a call to: 

Foundation.libs.orbit.init();

after each HTML update and it will properly format the slider.

Upvotes: 2

Related Questions