Не работает фотогалерея которая использует AJAX

[trim]

Добрый вечер!
Помогите пожалуйста разобраться в следующем вопросе.

есть следующий html мой

<div class="product_block_img">
        <p>
            <a >
            <img border="0" id="files/otgruzki/{$g->image}" longdesc="files/otgruzki/{$g->image}" onclick="javascript:enlarge(this);" style="border: 0px solid;" width="66" height="50" hspace="0" src="{if $g->image}files/otgruzki/{$g->image}{else}design/{$settings->theme}/images/no_foto.jpg{/if}" alt="{$g->name|escape}" title="{$g->name|escape}" vspace="0">
           </a>
        </p>
      </div>

есть js скрипт (позаимствован)

$(function(){

    $("body").delegate("a", "click", function() {
        // alert('Вы нажали на элемент списка');
        $("#popup").hide();
    });
    
    $("#shipment_filter .input_search").focus(function () {
        $("#input_search_lbl").hide();
    });
    $("#shipment_filter .input_search").blur(function () {
        if ($(this).val() == "")
            $("#input_search_lbl").show();
    });
    
    
    //Отображение галереи
    $(".product_block_img p a.demo").hover(
        function(e){
           // $("#popup").queue("fx", []);
            var current_item = $(this).closest('td');
            var new_coord;
            jQuery.ajax({
                type: "POST",
                url: "gallery.php",
               //эта строчка мне не понятна 
               data : {id:$(this).attr("id")},{element_id:$(this).attr("id"), iblock_id:$(this).attr("rel")},
                dataType : "html",
                success: function (data, textStatus) {
                    if (textStatus == "success") {
                        $("#inner").html(data);              
                        $("#popup").fadeIn(); 
                        var CoordY = current_item.position().top; 
                        var CoordParentY = current_item.offset().top; 
                        var CoordFromTop = CoordParentY - $(window).scrollTop();  
                        var window_scroll = $(window).scrollTop();
                        var window_height = $(window).height();
                        if (CoordFromTop + $("#popup").outerHeight() + 10 < window_height) {
                            new_coord = CoordY;
                        }
                        else {
                            new_coord = window_scroll + window_height - $("#popup").height() - $(".shipment-list").offset().top - 20;
                        };
                        $("#popup").css("top",new_coord +"px");
                        var arrowY = CoordY - new_coord + (current_item.outerHeight() / 2);
                        if ((CoordParentY + 60 + current_item.outerHeight()/2) > (window_scroll + window_height))
                        {
                            $("#arrow").css("top","600px");
                        }
                        else {
                            $("#arrow").css("top",arrowY+"px");
                        };
                        $(".thumbs").click(function() {
                            parent_item = $(this).closest("li");
                            index = parent_item.index();
                            $("#big_picture a").attr("rel", index);
                            height = $(this).attr("data");
                            margin_top = (298 - height)/2;
                            if (height <= 298)
                                $("#big_picture img").css("margin-top", margin_top);
                            else
                                $("#big_picture img").css("margin-top", "0");
                            detail_src = $(this).attr("name");
                            $("#big_picture img").attr("src",detail_src);
                            big_src = $(this).attr("href");
                            $("#big_picture a").attr("href",big_src);
                            return false;
                        });
                        $("#hidden-list a.hidden-thumbs").fancybox({
                            'speedIn'		:	600, 
                            'speedOut'		:	200, 
                            'overlayShow'	:	false
                        });
                        $("#big_picture a").click(function() {
                            selected_element = $(this).attr("rel");
                            $("#hidden-list li:eq("+selected_element+") a").click();
                            $("#popup").fadeOut();
                            return false;
                        })
                    };
                }
            });
            return false;
        },
        function() {
             $("#popup").delay(200).fadeOut();
            return false;
        }
    );
    
    
    
    
    $("#shipment-table td.photo a").click(function() {
        return false;
    });
    $("#popup").hover(
        function() {
            $(this).queue("fx", []);
        },
        function() {
            $(this).delay(200).fadeOut();
        }
    );

});
function mousePageXY(e)
{
  var x = 0, y = 0;

  if (!e) e = window.event;

  if (e.pageX || e.pageY)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)
  {
    x = e.clientX + 
      (document.documentElement.scrollLeft || document.body.scrollLeft) - 
      document.documentElement.clientLeft;
    y = e.clientY + 
      (document.documentElement.scrollTop || document.body.scrollTop) - 
      document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
}
function checkPopup() {
    cursorX = $("html").data("cursorPointer").x;
    cursorY = $("html").data("cursorPointer").y;
    var elem = document.elementFromPoint(cursorX,cursorY);
    console.log(elem);
}

Подскажите следующее, что и как нужно изменить в html или что нужно добавить что бы в итоге получить вот такой эффект как на этом сайте
ссылка
когда наводишь мышу на фотку.

Также интересует что в этом случае должен отдавать сервер. Дело в том что с аяксом и вообще клиентской частью можно сказать сталкиваюсь впервые. Так же можно какими нить дельными ссылками помочь, лишними не будут. Заранее спасибо!