Плагин Jquery MultiZoom не загружается при загрузке страницы

У меня проблема с плагином jQuery multizoom. document.ready() и window.load() не запустят его в основной функции. при загрузке страницы

  • div (#slide_body) выдвигается слева направо.
  • затем внутри этого div(#slide_body) я вызываю плагин jQuery Multizoom на PIctures.
  • Из-за slide_body мультизум jQuery не загружается. Я пробовал 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>

javascript jquery jquery-plugins
person John Sheedy    schedule 12.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

возможно, это body onload="javascript:slid_body()", который сталкивается с функцией $(document).ready jQuery.

Попробуйте это, чтобы сохранить скрипт в одном месте:

<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>
person Tomas Prado    schedule 12.04.2013
comment
Привет .. Image Zoomer в порядке.. но скольжение div остановлено.. Любая идея, почему? - person John Sheedy; 13.04.2013