Menu icon Foundation

My Posts

No Content

My Comments

Dimitri KOPRIWA commented on Tomas Gray's post over 5 years

I am facing the same issue.

        <div id="gallery_viewer" class="orbit-container">
            <ul data-orbit>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
            </ul>
        </div>

I've also nested orbit into a reveal modal, content is loaded through ajax

it is the first time I try foundation and I have to admit, it's a lot buggy for a v5, I had to go so many times into foundation.js to fix the code, also last update through grunt did a mess on some pages !

Edit: I finally found something, you can render your ajax loaded orbit slide with

 Foundation.libs.orbit.init()

In my case, the content was loaded through ajax when modal was opening, I was able to recalculate my height

   this.initOrbit = function(){
    var self = this;
    Foundation.libs.orbit.init(); // intiialize after query
    if( UMfirstLoad ){ // global scope var to bind this event once (if modal get toggled)
      UMfirstLoad = false;
      $(document).on( 'opened', function(){
        self.resizeOrbit();
      });
    }
  };

  this.resizeOrbit = function(){
    var imgHeight = $( '[data-orbit]' ).find( 'img[data-gallery]' ).outerHeight();
    $( '[data-orbit]' ).animate( { // since the modal dropdown, hard resize was uggly, but still this is not a valuable solution
      height: imgHeight * this.gallery.img_y + "px" 
    });
  };

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Tomas Gray's post over 5 years

I am facing the same issue.

        <div id="gallery_viewer" class="orbit-container">
            <ul data-orbit>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
            </ul>
        </div>

I've also nested orbit into a reveal modal, content is loaded through ajax

it is the first time I try foundation and I have to admit, it's a lot buggy for a v5, I had to go so many times into foundation.js to fix the code, also last update through grunt did a mess on some pages !

Edit: I finally found something, you can render your ajax loaded orbit slide with

 Foundation.libs.orbit.init()

In my case, the content was loaded through ajax when modal was opening, I was able to recalculate my height

   this.initOrbit = function(){
    var self = this;
    Foundation.libs.orbit.init(); // intiialize after query
    if( UMfirstLoad ){ // global scope var to bind this event once (if modal get toggled)
      UMfirstLoad = false;
      $(document).on( 'opened', function(){
        self.resizeOrbit();
      });
    }
  };

  this.resizeOrbit = function(){
    var imgHeight = $( '[data-orbit]' ).find( 'img[data-gallery]' ).outerHeight();
    $( '[data-orbit]' ).animate( { // since the modal dropdown, hard resize was uggly, but still this is not a valuable solution
      height: imgHeight * this.gallery.img_y + "px" 
    });
  };

Posts Followed


Following

  • No Content

Followers

  • No Content