title: Checking visibility of object in viewport when overflow is scroll
body: <p>I have an unordered list of list items containing a linked image. My CSS is set to only show one image at a time as defined by the width and height of the containing UL. Overflow is set to scroll.</p>
  
  <p>I'd like to check whether an image is visible (i.e. in viewport) (using jquery.visible plugin) and, if true, grab the image's alt attribute and append it in a P element on the page.</p>
  
  <p>But I don't know if my plugin determines visibility to be true for all images being that I'm "hiding" the images using overflow in my CSS.</p>
  
  <pre><code>section#photos {
      background: url(../img/photo_bg.png) no-repeat center center;
      background-size: 710px 543px;
      width: 710px;
      height: 543px;
      position: relative;
  }
  
   section#photos ul#container {
      position: relative;
      left: 45px;
      top: 5px;
      overflow: auto;
      height: 425px;
      width: 638px;
  }
  
  &lt;section id="photos"&gt;
  &lt;ul id="container"&gt;
          &lt;li class="photo"&gt; &lt;a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Parker sleeps after feeding" data-img-url="http://placehold.it/1000x1000"&gt;&lt;img class="lazy" src="http://placehold.it/1000x1000" alt="Parker sleeps after feeding" width="638px" height="425px"&gt;&lt;/a&gt;
  
              &lt;p class="caption"&gt;Parker sleeps after feeding&lt;/p&gt;
          &lt;/li&gt;
          &lt;li class="photo"&gt; &lt;a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Stork stats" data-img-url="http://placehold.it/1000x1000"&gt;&lt;img class="lazy" src="http://placehold.it/1000x1000" alt="Stork stats" width="638px" height="425px"&gt;&lt;/a&gt;
  
              &lt;p class="caption"&gt;Stork stats&lt;/p&gt;
          &lt;/li&gt;
          &lt;li class="photo"&gt; &lt;a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Happy family" data-img-url="http://placehold.it/1000x1000"&gt;&lt;img class="lazy" src="http://placehold.it/1000x1000" alt="Happy family" width="638px" height="425px"&gt;&lt;/a&gt;
  
              &lt;p class="caption"&gt;Happy family&lt;/p&gt;
          &lt;/li&gt;
          &lt;li class="photo"&gt; &lt;a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Happy Mom" data-img-url="http://placehold.it/1000x1000"&gt;&lt;img class="lazy" src="http://placehold.it/1000x1000" alt="Happy Mom" width="638px" height="425px"&gt;&lt;/a&gt;
  
              &lt;p class="caption"&gt;Happy Mom&lt;/p&gt;
          &lt;/li&gt;
          &lt;li class="photo"&gt; &lt;a href="#modalPhoto" data-toggle="modal" data-target="#modalPhoto" data-img-caption="Parker naps after feeding" data-img-url="http://placehold.it/1000x1000"&gt;&lt;img class="lazy" src="http://placehold.it/1000x1000" alt="Parker naps after feeding" width="638px" height="425px"&gt;&lt;/a&gt;
  
              &lt;p class="caption"&gt;Parker naps after feeding&lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;p class="caption_text"&gt;&lt;/p&gt;
      &lt;ul class="social_icons"&gt;
          &lt;li&gt;&lt;a href="http://facebook.com"&gt;&lt;img src="http://placehold.it/22x22" alt="" width="22px" height="22px"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/22x22" alt="" width="22px" height="22px"&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
          &lt;/section&gt;
  
  $('#container li').each(function () {
      if ($(this).$('img').visible(true)) {
          $('.caption_text').empty().append($(this).attr('alt'));
      }
  });
  </code></pre>
  
  <p>Here's my fiddle: <a href="http://jsfiddle.net/patrickbeeson/VPqV3/3/" rel="nofollow">http://jsfiddle.net/patrickbeeson/VPqV3/3/</a></p>
  
  <p>Any help would be appreciated!</p>