Question

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>

<ul class="etalage2">   
        <li>
            <img class="etalage_thumb_image" src="codecanyon/demo_files/images/image4_thumb.jpg">
            <img class="etalage_source_image" src="codecanyon/demo_files/images/image4_large.jpg">
        </li>  
</ul>

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

Answer 1

You’ve set this up in your code to stop after 6 loops:

  for(var i=1; i <= 6; ++i){

Maybe you need to set i <= 6 to a var and have this var count the number of .etalage’s there are.

edit

so maybe:

var numberOfetalage = $('.etalage li').length

 for(var i=1; i <= numberOfetalage ; ++i){