ajax部分视图加载后,fancybox无法正常工作

时间:2018-03-22 05:08:42

标签: javascript razor

我们正在使用javascript代码在照片库中加载更多活动,并在每个拇指点击我们正在fancybox中打开图库。初始加载拇指正在使用fancybox。但是在加载更多按钮后,我们将从控制器和AJAX返回部分视图,当我们点击新拇指打开图库时,它会在空白的新标签中打开,如href。请让我们知道这个问题,我们在这里提供代码。任何帮助表示赞赏。

<link href="/css/jquery.fancybox.css" rel="stylesheet" />
<link href="/css/photo-gallery.css" rel="stylesheet" type="text/css">   

<section id="p-tab-item-1">
    @Html.Partial("PhotoGalleryList", new ViewDataDictionary { {"CatParameter", "Gujarati" }})
</section>

<a href="javascript:void(0);" class="load-more-btn" onClick="LoadMore()" id="loadMoreBtnG">See More....</a>

@ *加载更多编码* @   

<script type="text/javascript" src="/scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.fancybox.js"></script> 
<script type="text/javascript">

$("input[id=p-tab-1]").click(function () {
        pageIndx = 1;
      if (Gtabflg == false) {
        $("#loadMoreBtnG").show();  
        loadImage('@CurrentPage.Id', 'Gujarati', pageIndx)
      }
      $("#loadMoreBtnE").hide();
        Gtabflg = true;
       Etabflg = false;
    });
});

//Initial Image load
function loadImage(pageNo, thumbType, pageIndx) {
    $.ajax({
        type: "POST",
        url: "/umbraco/surface/Controller/GalleryImages/",
        dataType: "html",

        data: { pgParam: pageNo, catparam: thumbType, index: pageIndx },
        success: function (data) {

            if (thumbType == "Gujarati") {

                $('#p-tab-item-1').html(data);
            } 
        },
        error: function (result) {
            console.log(result);
            alert(result);
        }
    });
}


function LoadMore(){

    $.ajax({
        type: "POST",
        url: "/umbraco/surface/Controller/GalleryImages/",
        dataType: "html",

        data: { pgParam: pageNo, catparam: thumbType, index: pageIndx },
        success: function (data) {

            if (thumbType == "Gujarati") {
                $('#p-tab-item-1').append(data);
                if (pageIndx == gujmax) {
                    $("#loadMoreBtnG").hide();
                }

            } 
            }

        },
        error: function (result) {
           console.log(result);
           alert(result);
       }
    });

}

$('#imgGallery').click(function(){

    $(".fancybox-thumb").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
            title: {
                type: 'over'
            }
        }
    });
});

//拇指点击加载灯箱图片

function GetImages(nodeid){
    $.ajax({
        type: "POST",          
        url: "/umbraco/surface/Controller/GetImages/",
        dataType: "html",
        data: { imgParam: nodeid },
        success: function (result) {

            $('#imgGallery').html('');
            $('#imgGallery').html(result);

            $( "#imgGallery" ).click();
            $( "#imgGallery a:first" ).click();

        },
        error: function (result) {
            console.log(result);
            alert(result);
        }
    });

}
</script>

}

部分查看代码:

                                                                                                                                                                @ item.GetPropertyValue(&#34;标题&#34)                                                                                                              

GalleryImage视图代码:

                                      

0 个答案:

没有答案