title: Jquery MultiZoom Plugin not loading at Page load
body: <p>I have a problem with jQuery multizoom plugin. <code>document.ready()</code> and <code>window.load()</code> won't start it on the main function. on page load </p>
  
  <ul>
  <li>div (#slide_body) slides out from left to right.</li>
  <li>then inside this div(#slide_body) I am calling jQuery plugin Multizoom on PIctures.</li>
  <li>Because of slide_body jQuery multizoom is not loading. I have tried <code>document.read()</code> or <code>window.load()</code> but the plugin wont start. </li>
  <li>if I resize the webpage (Ctrl + mouse wheel) then it starts working, as it repositions the page elements.</li>
  <li>or if I click a thumb Image then it starts working. But first image never works on Page Load.</li>
  </ul>
  
  <p>Please guide how to load this first time when the page loads. any other event to try apart from Document.ready() or window.load()</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;script&gt;
  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";
  }
  &lt;/script&gt;
  &lt;body onload="javascript:slid_body()"&gt;   
   &lt;div id="slid_body_out"&gt;
              &lt;div id="slid_body"&gt;
                  &lt;div id="heading"&gt;
                      &lt;ul id="breadcrumbs"&gt;
                          &lt;li&gt;Collection&lt;/li&gt;
                          &lt;li&gt;
                              Casual&lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;div id="left"&gt;
                      &lt;div id="prodetail"&gt;
                          &lt;div id="pro_dtl_left"&gt;
                              &lt;div id="pro_dtl_leftimg"&gt;
  
                                  &lt;div class='targetarea'&gt;&lt;img id='multizoom1' src='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG' alt='zoomable'L32840'&gt;&lt;/img&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div id="pro_dtl_right_moreviews"&gt;
                                  &lt;p&gt;
                                      Scroll on above image to view enlarged picture&lt;br /&gt;
                                      Use Mouse Scroll to Zoom in/out.
                                  &lt;/p&gt;
                                  &lt;li&gt;More Views&lt;/li&gt;
                                  &lt;br /&gt;
                                  &lt;span id="ctl00_ContentPlaceHolder1_litThumbs" style="display:inline-block;width:300px;"&gt;&lt;ul&gt;&lt;li class='multizoom1 thumbs'&gt;&lt;a href='images/ProductImages/Medium/634981200372366040_XGN_6539.JPG'  data-large='images/ProductImages/Original/634981200372366040_XGN_6539.JPG' data-title='L32840'&gt;&lt;img src='images/ProductImages/thumb/634981200372366040_XGN_6539.JPG' alt='L32840' /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class='multizoom1 thumbs'&gt;&lt;a href='images/ProductImages/Medium/634982980662846576_XGN_6537.JPG'  data-large='images/ProductImages/Original/634982980662846576_XGN_6537.JPG' data-title='L32840'&gt;&lt;img src='images/ProductImages/thumb/634982980662846576_XGN_6537.JPG' alt='L32840' /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class='multizoom1 thumbs'&gt;&lt;a href='images/ProductImages/Medium/634982981340675266_XGN_6540.JPG'  data-large='images/ProductImages/Original/634982981340675266_XGN_6540.JPG' data-title='L32840'&gt;&lt;img src='images/ProductImages/thumb/634982981340675266_XGN_6540.JPG' alt='L32840' /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class='multizoom1 thumbs'&gt;&lt;a href='images/ProductImages/Medium/634982981855793870_XGN_6538.JPG'  data-large='images/ProductImages/Original/634982981855793870_XGN_6538.JPG' data-title='L32840'&gt;&lt;img src='images/ProductImages/thumb/634982981855793870_XGN_6538.JPG' alt='L32840' /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              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
                  });
  
              })
  
          &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>