prettyPhoto in IE not working properly

prettyPhoto is not displaying properly on IE7. I have 3 pictures in the gallery, and the picture overlay only comes up when I click on the third picture, the other ones just behave like normal pictures (it just goes to the picture location).

This is my code:

<ul class="gallery clearfix">
            <li><a href="images/j/DSCN0868.jpg" rel="prettyPhoto[gallery1]" title="Hermoso "><img src="images/j/DSCN0868.jpg" width="250" height="180" alt="" /></a></li>
            <li><a href="images/j/DSCN0863.jpg" rel="prettyPhoto[gallery1]"><img src="images/j/DSCN0863.jpg" width="250" height="180" alt="" /></a></li>
            <li><a href="images/j/DSCN0855.jpg" rel="prettyPhoto[gallery1]"><img src="images/j/DSCN0855.jpg" width="250" height="180" alt="" /></a></li>
                    开发者_C百科    </ul>

The Javascript:

<link rel="stylesheet" href="prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
            $("area[rel^='prettyPhoto']").prettyPhoto();

            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_rounded',slideshow:3000, autoplay_slideshow: false});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                    custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                    changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                    custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                    changepicturecallback: function(){ _bsap.exec(); }
            });
    });
</script>

Thanks!

Try changing your js code in relation to this gallery to:

        $(".gallery li:first a").prettyPhoto({animation_speed:'normal',theme:'light_rounded',slideshow:3000, autoplay_slideshow: false});
        $(".gallery li").slice(1).children('a').prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

Should work then :D

btw. When asking a question like this include a link to an example, or preferably a jsfiddle demo.

What I see is that you are calling prettyPhoto() on 3-4 different selectors, are you sure these selectors don't include one element more than one time? this cause be the source of cause.

Try summing up length of matching elements in each selector to test this.