Javascript Jquery MultiZoom插件在页面加载时未加载_Javascript_Jquery_Jquery Plugins

Javascript Jquery MultiZoom插件在页面加载时未加载

javascript jquery jquery-plugins

Javascript Jquery MultiZoom插件在页面加载时未加载,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我对jQuery multizoom插件有问题document.ready（）和window.load（）不会在主函数上启动它。页面加载 div（滑体）从左向右滑出然后在这个div（#slide_body）中，我调用jQuery插件Multizoom on PIctures 由于幻灯片的原因，jQuery multizoom未加载。我尝试了document.read（）或window.load（）但插件无法启动如果我调整网页的大小（Ctrl+鼠标滚轮），那么它就会开始工作，因为它会重新定位

我对jQuery multizoom插件有问题

document.ready（）

和

window.load（）

不会在主函数上启动它。页面加载

div（滑体）从左向右滑出
然后在这个div（#slide_body）中，我调用jQuery插件Multizoom on PIctures
由于幻灯片的原因，jQuery multizoom未加载。我尝试了
```
document.read（）
```
或
```
window.load（）
```
但插件无法启动
如果我调整网页的大小（Ctrl+鼠标滚轮），那么它就会开始工作，因为它会重新定位页面元素
或者，如果我点击一个拇指图像，它就会开始工作。但第一张图片在页面加载时永远不起作用

请指导如何在页面首次加载时加载此页面。除了Document.ready（）或window.load（）之外要尝试的任何其他事件

谢谢

<script>
function slid_body(){
    document.getElementById('slid_body').style.left = "0px";
    //document.getElementById('slid_body').style.width = "804px";
}
function slideIn() {
    //document.getElementById('slid_body').style.left = "0px";

    document.getElementById('slid_body').style.left = "-804px";
}
</script>
<body onload="javascript:slid_body()">   
 <div id="slid_body_out">
            <div id="slid_body">
                <div id="heading">
                    <ul id="breadcrumbs">
                        <li>Collection</li>
                        <li>
                            Casual</li>
                      </ul>
                <div id="left">
                    <div id="prodetail">
                        <div id="pro_dtl_left">
                            <div id="pro_dtl_leftimg">

                                <div class='targetarea'><img id='multizoom1' src='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG' alt='zoomable'L32840'></img></div>
                            </div>
                            <div id="pro_dtl_right_moreviews">
                                <p>
                                    Scroll on above image to view enlarged picture<br />
                                    Use Mouse Scroll to Zoom in/out.
                                </p>
                                <li>More Views</li>
                                <br />
                                <span id="ctl00_ContentPlaceHolder1_litThumbs" style="display:inline-block;width:300px;"><ul><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG'  data-large='images/ProductImages/Original/634981200372366040_XGN_6539.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634981200372366040_XGN_6539.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982980662846576_XGN_6537.JPG'  data-large='images/ProductImages/Original/634982980662846576_XGN_6537.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982980662846576_XGN_6537.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982981340675266_XGN_6540.JPG'  data-large='images/ProductImages/Original/634982981340675266_XGN_6540.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982981340675266_XGN_6540.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982981855793870_XGN_6538.JPG'  data-large='images/ProductImages/Original/634982981855793870_XGN_6538.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982981855793870_XGN_6538.JPG' alt='L32840' /></a></li></ul></span>
                            </div>
                        </div>


            </div>
        </div>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {

                $('#multizoom1').addimagezoom({
                    descArea: '#description',
                    speed: 1000,
                    descpos: true,
                    imagevertcenter: true,
                    magvertcenter: true,
                    zoomrange: [3, 10],
                    magnifiersize: [500, 450],
                    magnifierpos: right,
                    cursorshadecolor: '#5C2E91',
                    cursorshade: true
                });

            })

        </script>
</body>


函数体（）{
document.getElementById（'slided_body'）.style.left=“0px”；
//document.getElementById（'slided_body'）.style.width=“804px”；
}
函数slideIn（）{
//document.getElementById（'slided_body'）.style.left=“0px”；
document.getElementById（'slided_body'）.style.left=“-804px”；
}

收藏

随便的


在上面的图像上滚动以查看放大的图片

使用鼠标滚动放大/缩小。

更多视图

可能是

body onload=“javascript:slided_body（）”

与

$（document.ready）发生冲突
尝试以下方法，将脚本保留在一个位置：
<body>   
 <div id="slid_body_out">
            <div id="slid_body">
                <div id="heading">
                    <ul id="breadcrumbs">
                        <li>Collection</li>
                        <li>
                            Casual</li>
                      </ul>
                <div id="left">
                    <div id="prodetail">
                        <div id="pro_dtl_left">
                            <div id="pro_dtl_leftimg">

                                <div class='targetarea'><img id='multizoom1' src='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG' alt='zoomable'L32840'></img></div>
                            </div>
                            <div id="pro_dtl_right_moreviews">
                                <p>
                                    Scroll on above image to view enlarged picture<br />
                                    Use Mouse Scroll to Zoom in/out.
                                </p>
                                <li>More Views</li>
                                <br />
                                <span id="ctl00_ContentPlaceHolder1_litThumbs" style="display:inline-block;width:300px;"><ul><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG'  data-large='images/ProductImages/Original/634981200372366040_XGN_6539.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634981200372366040_XGN_6539.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982980662846576_XGN_6537.JPG'  data-large='images/ProductImages/Original/634982980662846576_XGN_6537.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982980662846576_XGN_6537.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982981340675266_XGN_6540.JPG'  data-large='images/ProductImages/Original/634982981340675266_XGN_6540.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982981340675266_XGN_6540.JPG' alt='L32840' /></a></li><li class='multizoom1 thumbs'><a href='images/ProductImages/Medium/634982981855793870_XGN_6538.JPG'  data-large='images/ProductImages/Original/634982981855793870_XGN_6538.JPG' data-title='L32840'><img src='images/ProductImages/thumb/634982981855793870_XGN_6538.JPG' alt='L32840' /></a></li></ul></span>
                            </div>
                        </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {

                $('#multizoom1').addimagezoom({
                    descArea: '#description',
                    speed: 1000,
                    descpos: true,
                    imagevertcenter: true,
                    magvertcenter: true,
                    zoomrange: [3, 10],
                    magnifiersize: [500, 450],
                    magnifierpos: right,
                    cursorshadecolor: '#5C2E91',
                    cursorshade: true
                });

                function slid_body(){
                     document.getElementById('slid_body').style.left = "0px";
                }
                function slideIn() {    
                     document.getElementById('slid_body').style.left = "-804px";
                }

                slid_body();
            })

        </script>
</body>



收藏

随便的


在上面的图像上滚动以查看放大的图片

使用鼠标滚动放大/缩小。

更多视图


Hi。。这样图像缩放器很好。。但是div的滑动停止了。。知道为什么吗？