[jQuery] jQuery + jCarousel Picture Gallery working fine in Firefox but not in IE

[Naveen]

Hi,

I'm trying to make a picture gallery using jCarousel (
http://sorgalla.com/projects/jcarousel/ ) and other jQuery features,
powered by Perl/CGI and XML at the backend.

The initial version of the gallery at http://gallery.naveeng.com/trek.html
is working fine in both FF and IE. Clicking a thumbnail on the left
scroller loads the corresponding image via jQuery in the main image
area, while the previous, next buttons are also fine.

I wrote a comments feature which enables a user to comment on
individual pictures and then it appears below the main image. It can
be seen at http://gallery.naveeng.com/trek_final.html but this works
fine only in FF, while in IE, the initial page loads okay, but
clicking a new thumbnail or any of the previous, next, first or last
buttons, make IE go blank (both IE 6 and IE7)!

The following are the additional changes done in the latter version,
which is not working in IE:

<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/
jquery.livequery.pack.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {

        $('#htmlForm').livequery(function(){
    $('#htmlForm').ajaxForm({
        success: function(resText) {
            $('#htmlExampleTarget').append(resText);
        }
    });
});
});

Also, in another custom javascript function cust(), I'm using a $.ajax
function to call the comments script "comm_all.cgi" and retrieving the
comments form. But commenting out this part makes the script the work
fine in IE!

function cust(url)
{

        re = /^(http:\/\/www\.naveeng\.com\/gallery\/Trek\/Canon\/Best
\/)thumbs\/(.+?)_thumb(\.jpg)$/i;
        array=url.match(re);

        var xfn = "Trek/data/new/" + array[2] + ".xml";

    jQuery.get(
        xfn,

        function(data){
        //      jQuery(document).ready(function() {
                        jQuery('#s_it').html(jQuery('title',data).text());
                        jQuery('#s_desc').html(jQuery('desc',data).text());
                        jQuery('#s_dt').html(jQuery('date',data).text());
                        jQuery('#s_pl').html(jQuery('place',data).text());
                        jQuery('#s_cam').html(jQuery('camera',data).text());
                        jQuery('#s_len').html(jQuery('lens',data).text());
                        jQuery('#s_fl').html(jQuery('flash',data).text());
                        jQuery('#s_res').html(jQuery('imgres',data).text());
                        jQuery('#s_sz').html(jQuery('imgsize',data).text());
                        jQuery('#s_or').html(jQuery('orientation',data).text());
                        jQuery('#s_ss').html(jQuery('ss',data).text());
//              })
                },
        'xml'
    );


        var insh="<a target=_blank href='" + array[1] + array[2] + array[3] +
"'><img src='" + array[1] + "main/" + array[2] + "_main" + array[3] +
"' border=0 /></a>";

        var inval=array[2] + "_main" + array[3];
        gup = document.getElementById('img_name');
        gup.value = inval;

        reg_ssi = /Trekking_Pic_(\d+)_main/i;
        arr_ssi = inval.match(reg_ssi);

        $.ajax({
        type: "GET",
        url: "comm_all.cgi?pic=" + arr_ssi[1],
        dataType: "html",
                eval: true,
        error: function(){
              alert('Error loading document');
        },
        success: function(data){
                        $('#ssi').html(data);
                }
      });


//      jQuery(document).ready(function() {
                jQuery('#main_div_2').fadeOut(2000).fadeTo(10, 1, function()
{jQuery('#main_img_div').html(insh);}).fadeIn(2000);
//      });



}


So what is the problem with the above function? And how should I
rewrite the $.ajax portion above so that IE doesn't go blank?

Thanks.

Naveen