Works perfectly up until the 6th page, and than bullets start appearing instead of images... Why?
===

I have the following JS code:  

    $(document).ready(function(){
     for(var i=1; i <= 6; ++i){
        $('.etalage'+(i===1 ? '':i)).etalage({
            show_hint: false,
            thumb_image_width: 464,
            thumb_image_height: 464,
            source_image_width: 1000,
            source_image_height: 1000,
            zoom_element: '#custom_zoom_element'+(i===1 ? '':i),
            //source_image_height: 480,
            //source_image_width: 480,
            zoom_area_width: 400,
            zoom_area_height: 400
        });
     }
    });

Which zooms into a large separate image when I hover over the thumbnail.  It works great for the first 5 images, but after that neither image shows up.  Here's one of the 6 essentially identical groupings of html: 


    <div>
    <ul class="etalage">	
			<li>
				<img class="etalage_thumb_image" src="codecanyon/demo_files/images/image2_thumb.jpg">
				<img class="etalage_source_image" src="codecanyon/demo_files/images/image2_large.jpg">
			</li>  
    </ul>
</div>    


Another interesting thing to note is that on the 6th, 7th, etc. page a bullet from the <ul> list-style-type shows up on each page.  Any ideas what mistake I'm making.  Thanks again.  