title: Jquery with Sliing page and sliding images
body: <p>i just finished the 5 Sliding page site, which each page i have image slider.</p>
  
  <p>i am using Image slider within Page Slider. when i am trying to use the same image slider with different images for page slide 3, its not working. please help would be great Appreciate.</p>
  
  <p>i am not good in Jquery, so i did lot of research and no luck...</p>
  
  <hr>
  
  <p></p>
  
  <pre><code>                            &lt;div id="address"&gt;
                              &lt;img src="images/address.png" width="300" height="119" alt="address"&gt;
                              &lt;/div&gt;
  
                              &lt;div id="shop"&gt;
                              &lt;img src="images/shop.jpg" width="300" height="225" alt="Shop"&gt;
                              &lt;/div&gt;
  
                              &lt;div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"&gt;&lt;/div&gt;
  
                               &lt;div id="kitchen2"&gt;
                     &lt;script type="text/javascript"&gt; 
                    $(function(){
                  var options = {
                  firstImageIndex: 0,
                  borderWeight: 0 },
                                                                              params = {
                              sources: [
                              {
                                      preview: 'images/previews/1.jpg',
                  original: 'images/originals/1.jpg',}, 
                                      {
                                                                  preview: 'images/previews/2.jpg',
                  original: 'images/originals/2.jpg',}, 
                                      {
                                                                  preview: 'images/previews/3.jpg',
                  original: 'images/originals/3.jpg',}, 
                                      {
                                                                  preview: 'images/previews/4.jpg',
                  original: 'images/originals/4.jpg',}
                         ]
                  };
                  $( '.photocradle' ).photocradle( params, options );
                                   }); &lt;/script&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>                            &lt;div id="address"&gt;
                              &lt;img src="images/address.png" width="300" height="119" alt="address"&gt;
                              &lt;/div&gt;
  
                              &lt;div id="shop"&gt;
                              &lt;img src="images/shop.jpg" width="300" height="225" alt="Shop"&gt;
                              &lt;/div&gt;
  
                              &lt;div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"&gt;&lt;/div&gt;
  
                               &lt;div id="kitchen3"&gt;
                     &lt;script type="text/javascript"&gt; 
                    $(function(){
                  var options = {
                  firstImageIndex: 0,
                  borderWeight: 0 },
                                                                              params = {
                              sources: [
                              {
                                      preview: 'images/previews/5.jpg',
                  original: 'images/originals/5.jpg',}, 
                                      {
                                                                  preview: 'images/previews/6.jpg',
                  original: 'images/originals/6.jpg',}, 
                                      {
                                                                  preview: 'images/previews/7.jpg',
                  original: 'images/originals/7.jpg',}, 
                                      {
                                                                  preview: 'images/previews/8.jpg',
                  original: 'images/originals/8.jpg',}
                         ]
                  };
                  $( '.photocradle' ).photocradle( params, options );
                                   }); &lt;/script&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>i used the method below, and on first page slider, i am getting 2 image  overlap, i need 3 small images in 3 page slider with different size</p>
  
  <p>Link is <a href="http://theshoaibahmed.com/jquery.photocradle-0.4.2.js" rel="nofollow">http://theshoaibahmed.com/jquery.photocradle-0.4.2.js</a></p>
  
  <p>here is the link for what i am trying to achieve and not working</p>
  
  <p><a href="http://www.theshoaibahmed.com/roman/" rel="nofollow">http://www.theshoaibahmed.com/roman/</a></p>
  
  <p>if you noticed i used </p>
  
  <p>photocradle.$area = $( '' )
      .appendTo( $( "#kitchen2") );</p>
  
  <p>what option i can use so if i have to use 3 more image slider with different size, i would be able to use it.</p>