Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    296
    Thanks
    3
    Thanked 4 Times in 4 Posts

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

    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:

    Code:
    <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!

    Code:
    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

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    296
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Solved. Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •