jQuery .each only working on first element in bootstrap carousel

Question

I'm trying to use ElevateZoom in a bootstrap carousel. I've got it working properly on the first image in the carousel using a jQuery .each function, but it's not working properly on any of the subsequent images. It seems it will only work on the item that is "active" when the page loads.

Here is the HTML for my carousel:

<div id='carousel-custom' class='carousel slide'>
    <div class='carousel-outer'>
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div class='item active'>
            <span></span>
            <a href="images/large/product-image01.png" data-fancybox><img id="image_01" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image01.png" alt='' /></a>
          </div>
          <div class='item'>
          <span></span>
            <a href="images/large/product-image02.png" data-fancybox><img id="image_02" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image02.png" alt='' /></a>
          </div>
          <div class='item'>
            <a href="images/large/product-image03.png" data-fancybox><img id="image_03" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image03.png" alt='' />
          </div>  
          <div class='item'>
            <a href="images/large/product-image04.png" data-fancybox><img id="image_04" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image04.png"alt='' />
          </div>
        </div>

        <!-- Controls -->
        <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
          <span class='glyphicon glyphicon-chevron-left'></span>
        </a>
        <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
          <span class='glyphicon glyphicon-chevron-right'></span>
        </a>
      </div>

    <!-- Indicators -->
    <ol class='carousel-indicators'>
      <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='1'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='2'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='3'><img src='images/item-thumb.png' alt='' /></li>
    </ol>
</div>

And here is the code from my external javascript file. I've included this right before my closing tag, as it would not work in the header. Also of note, it does not seem to work at all if I use $(document).ready.

$('.carousel-inner .item a img').each(function(){
    $(this).elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
});

I'd appreciate any help understanding why this is only working on the first image in my carousel.

EDIT: I also tried manually selecting each image, but it still only works for the one image that is loaded when the page loads:

$("#image_01").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_02").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_03").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_04").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });

Answer 1

If You want to loop through all images in carousel-inner class try this...

$('.carousel-inner img').each(...

or

$('.carousel-inner').find(img).each(...