Infinite Scroll + hCaptions Example

Used to answer a question on Stack Overflow.

HTML

<script src="https://rawgithub.com/webcreate/infinite-ajax-scroll/master/dist/jquery-ias.min.js"></script>
<script src="https://rawgithub.com/ryun/HCaptions/master/jquery.hcaptions.js"></script>
<div class="listing">
  <div class="post">
      <a href="#" data-target="#myToggle" class="hcaption">
          <img src="http://placekitten.com/200/200" />
      </a>
          
      <div id="myToggle" class="hide cap-overlay">
          <h5>Exampleda Image</h5>
          <p>Content</p>
      </div>
  </div>
  <div class="post">
      <a href="#" data-target="#myToggle1" class="hcaption">
          <img src="http://placekitten.com/200/250" />
      </a>
          
      <div id="myToggle1" class="hide cap-overlay">
          <h5>Example Image</h5>
          <p>Content</p>
      </div>
  </div>
  <div class="post">
      <a href="#" data-target="#myToggle2" class="hcaption">
          <img src="http://placekitten.com/150/200" />
      </a>
          
      <div id="myToggle2" class="hide cap-overlay">
          <h5>Example Image</h5>
          <p>Content</p>
      </div>
  </div>
  <div class="post">
      <a href="#" data-target="#myToggle3" class="hcaption">
          <img src="http://placekitten.com/400/200" />
      </a>
          
      <div id="myToggle3" class="hide cap-overlay">
          <h5>Example Image</h5>
          <p>Content</p>
      </div>
  </div>
  <div class="post">
      <a href="#" data-target="#myToggle4" class="hcaption">
          <img src="http://placekitten.com/300/200" />
      </a>
          
      <div id="myToggle4" class="hide cap-overlay">
          <h5>Example Image</h5>
          <p>Content</p>
      </div>
  </div>
  
  <div class="navigation">
      <div class="next-posts"><a href="/gh/gist/response.html/9dc061bc079acebc6770">Next Posts</a></div>
  </div>
</div>

CSS

body {
    font-family: sans-serif;
}

img {
    display: block;
}

.post {
    border: 10px solid #333;
    clear: left;
    float: left;
    margin: 10px;
    padding: 0;
}

.cap-overlay {
    background: hsla(0, 0%, 20%, 0.5);
    box-sizing: border-box;
    color: #fff;
    padding: 25px;
}

JavaScript

$('.hcaption').hcaptions();

var iterator = 0;

$.ias({
    container : '.listing',
    item: '.post',
    pagination: '.navigation',
    next: '.next-posts a',
    triggerPageThreshold: 10,
    
    // You should not need this! This is purely to make
    // it possible to view repeated pages on JSFiddle,
    // since each hcaption requires a unique ID.
    onLoadItems: function (items) {
        $(items).each(function (i, item) {
            $(item).find('.hcaption')
              .removeAttr('data-target')
              .attr('data-target', 'tog-' + iterator);
                    
            $(item).find('.cap-overlay')
              .removeAttr('id')
              .attr('id', 'tog-' + iterator);
            
            iterator += 1;
        });
    },
    
    // This is the important bit --
    // reinitialize hcaptions on the new items.
    onRenderComplete: function (items) {
        $(items).find('.hcaption').hcaptions();
    },
    loader: '<img src="http://placehold.it/100x50/333333/ffffff/&text=LOADING..."/>'
});