JQUERY keypress event in foreach
<p>I have a problem with a keypress event into a foreach.
It's a lightbox gallery homemade and I would add a keypress event to scroll the images.</p>

<p>This is the situation, when I click, the first image (.image-0) becomes display:inline-block.</p>

<pre><code>    &lt;?php
    $counter = 0;
    $num = count($photo);
    foreach ( $photo as $image ) 
    {
    $counternext = ($counter)+1;
    $counterprev = ($counter)-1;

    echo '
    &lt;script&gt;
    $(document).bind("keydown", function(e) {
    if ($(".image'-'.$counter.':visible").length) {

        var left = 37,
            right = 39
        if (e.keyCode == left) {
    $(".image'-'.$counter.'").css("display", "none");
     $(".image'-'.$counterprev.'").delay(1000).css("display", "inline-block");
        }
        if (e.keyCode == right) {
    $(".image'-'.$counter.'").css("display", "none");
     $(".image'-'.$counternext.'").delay(1000).css("display", "inline-block");
        }
            }
    });


&lt;div class="image-'.$counter.'" style="display:none;"&gt;
&lt;img src="url-'.$counter.'.jpg"&gt;
&lt;/div&gt;

';
$counter++;?&gt;
</code></pre>

<p>...the presskey dont work correctly! When I click right the page show me the last image, and when I click left show me the first..without the intermedially step (image-1, image-2, image-3, image-4)..... Where is the problem?</p>
