Menu icon Foundation
Deep Linking to Orbit inside a Reveal Modal

I'm able to get Orbit working inside a modal. Now, I want to deep link into the slider to specific images. Here's what I have so far, but it is not working. See any problems in my code? The deep linking is causing it to be very inconsistent. I can bail on the deep linking, but it would be a better user experience. So far: http://thatcherdesign.com/MagneticVerb/BWtest/index.html

…
  <div id="homeModal" class="reveal-modal" data-reveal>
    <div class="reveal-modal-inner">
    <ul data-orbit data-options="timer:false">
  <li data-orbit-slide="photo-1">
    <img src="img/home/BrooklyhnWoods_1.jpg">
  </li>
  <li data-orbit-slide="photo-2">
    <img src="img/home/BrooklyhnWoods_2.jpg">
  </li>
  <li data-orbit-slide="photo-3">
    <img src="img/home/BrooklyhnWoods_3.jpg">
  </li>
    <li data-orbit-slide="photo-4">
    <img src="img/home/BrooklyhnWoods_4.jpg">
  </li>
  <li data-orbit-slide="photo-5">
    <img src="img/home/BrooklyhnWoods_5.jpg">
  </li>
  <li data-orbit-slide="photo-6">
    <img src="img/home/BrooklyhnWoods_6.jpg">
  </li>
</ul>
  
  <a class="close-reveal-modal">&#215;</a>
</div></div>
    
    
    <div class="row">
    <div class="medium-12 columns">
<ul class="small-block-grid-3 medium-block-grid-6 large-block-grid-6">
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-1"><img src="img/home/BrooklyhnWoods_1.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-2"><img src="img/home/BrooklyhnWoods_2.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-3"><img src="img/home/BrooklyhnWoods_3.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-4"><img src="img/home/BrooklyhnWoods_4.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-5"><img src="img/home/BrooklyhnWoods_5.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-6"><img src="img/home/BrooklyhnWoods_6.jpg"></a></li>
</ul>
    </div></div>
    
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>

<script>$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});</script>
  </body>
            

         

Screen shot 2014 03 22 at 8.37.02 pm

deep linkingOrbit

I'm able to get Orbit working inside a modal. Now, I want to deep link into the slider to specific images. Here's what I have so far, but it is not working. See any problems in my code? The deep linking is causing it to be very inconsistent. I can bail on the deep linking, but it would be a better user experience. So far: http://thatcherdesign.com/MagneticVerb/BWtest/index.html

…
  <div id="homeModal" class="reveal-modal" data-reveal>
    <div class="reveal-modal-inner">
    <ul data-orbit data-options="timer:false">
  <li data-orbit-slide="photo-1">
    <img src="img/home/BrooklyhnWoods_1.jpg">
  </li>
  <li data-orbit-slide="photo-2">
    <img src="img/home/BrooklyhnWoods_2.jpg">
  </li>
  <li data-orbit-slide="photo-3">
    <img src="img/home/BrooklyhnWoods_3.jpg">
  </li>
    <li data-orbit-slide="photo-4">
    <img src="img/home/BrooklyhnWoods_4.jpg">
  </li>
  <li data-orbit-slide="photo-5">
    <img src="img/home/BrooklyhnWoods_5.jpg">
  </li>
  <li data-orbit-slide="photo-6">
    <img src="img/home/BrooklyhnWoods_6.jpg">
  </li>
</ul>
  
  <a class="close-reveal-modal">&#215;</a>
</div></div>
    
    
    <div class="row">
    <div class="medium-12 columns">
<ul class="small-block-grid-3 medium-block-grid-6 large-block-grid-6">
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-1"><img src="img/home/BrooklyhnWoods_1.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-2"><img src="img/home/BrooklyhnWoods_2.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-3"><img src="img/home/BrooklyhnWoods_3.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-4"><img src="img/home/BrooklyhnWoods_4.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-5"><img src="img/home/BrooklyhnWoods_5.jpg"></a></li>
<li><a href="#" data-reveal-id="homeModal" data-reveal data-orbit-link="photo-6"><img src="img/home/BrooklyhnWoods_6.jpg"></a></li>
</ul>
    </div></div>
    
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>

<script>$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});</script>
  </body>
            

         

Screen shot 2014 03 22 at 8.37.02 pm
Rafi Benkual over 5 years ago

Just curious, wouldn't Clearing accomplish the same result?

Alex Graham over 5 years ago

You shouldn't need the 'data-reveal' in the anchor links

(I did try to include code to show but the comment area won't display it properly...)

Jay Thatcher over 5 years ago

Thanks for the ideas. I'll see if removing data-reveal works. I'll try Clearing to see how that works too.