Question

简介我有一个包含大图片和2个按钮的网页 - ＆＃39;接下来移动＆＃39; ＆安培; ＆＃39;移动前一个＆＃39;。此外，可以使用来自（{{3}}）的jquery缩放代码放大或缩小图像。

我想要的代码 - 当网页第一次加载时，我应该能够缩放/缩小图像。当我点击“下一步移动”时＃ 39;或者＆＃39;移动前一个＆＃39;按钮，新动态加载的图像应该能够放大/缩小。

当前问题目前，我的网页工作正常，但图片放大/缩小部分除了下一步移动＆＃39;或者＆＃39;移动前一个＆＃39;单击按钮。当第一次加载页面时，图像可以放大/缩小，但下次移动时不能缩小图像。或者＆＃39;移动前一个＆＃39;单击按钮。

代码 -

<script>
    $(document).ready(function() {
      $("#big_pg_img").smartZoom(); // where #big_pg_img = id of the image
    });
</script>

<script>
    function gotoNextPage(){//--> NEXT
        var currPage = document.getElementById('curr_pg').value;
        var nextPage = parseInt(currPage)+1;
        var totPages = document.getElementById('tot_pgs').value;

        var edId = document.getElementById('edition_id').value;
        var pgId = document.getElementById('page_id').value;
        var img_ele = "#img_"+nextPage;

        if(parseInt(currPage) < parseInt(totPages)){
            $.ajax({
                type:'POST',
                url:"<?php echo base_url(); ?>pages/load_req_page_via_navigator/"+edId+"/"+parseInt(nextPage)+"/"+0,
                dataType: 'json',
                success:function(msg){
                    $('#big_pg_img').smartZoom({'containerClass':'zoomableContainer'});
                    //alert('2');

                    $("#slider1_container").html(msg);
                    for(i=1;i<=totPages;i++)
                    {
                        var img_ele_old = "#img_"+i;
                        $(img_ele_old).removeClass("selected");
                    }
                    $(img_ele).addClass("selected");
                    $("#page_thumb_container").scrollTo('.selected');
                },
                error: function(result)
                {
                    //alert('e');
                    $("#slider1_container").html("Error");
                },
                fail:(function(status) {
                    //alert('f');
                    $("#slider1_container").html("Fail");
                })
            });
        }else if(parseInt(currPage) == parseInt(totPages)){
            alert('This is the Last Page');
        }
    }

    function gotoPreviousPage(){//<-- PREVIOUS
        var currPage = document.getElementById('curr_pg').value;
        var startPage = 1;
        var prevPage = parseInt(currPage)-1;
        var totPages = document.getElementById('tot_pgs').value;

        var edId = document.getElementById('edition_id').value;
        var pgId = document.getElementById('page_id').value;
        var img_ele = "#img_"+prevPage;

        if(parseInt(currPage) > parseInt(startPage)){
            $.ajax({
                type:'POST',
                url:"<?php echo base_url(); ?>pages/load_req_page_via_navigator/"+edId+"/"+parseInt(prevPage)+"/"+0,
                dataType: 'json',
                success:function(msg){
                    $('#big_pg_img').smartZoom({'containerClass':'zoomableContainer'});
                    //alert('3');

                    $("#slider1_container").html(msg);
                    for(i=1;i<=totPages;i++)
                    {
                        var img_ele_old = "#img_"+i;
                        $(img_ele_old).removeClass("selected");
                    }
                    $(img_ele).addClass("selected");
                    $("#page_thumb_container").scrollTo('.selected');
                },
                error: function(result)
                {
                    //alert('e');
                    $("#slider1_container").html("Error");
                },
                fail:(function(status) {
                    //alert('f');
                    $("#slider1_container").html("Fail");
                })
            });
        }else if(parseInt(currPage) == parseInt(startPage)){
            alert('This is the First Page');
        }
    }
</script>

请告知我的代码有什么问题。谢谢。

放大/缩小jquery代码无法按预期工作

0 个答案: