title: Launch RoyalSlider from list of thumbnails
body: <p>I'm trying to launch a fullscreen instance of RoyalSlider dynamically from a list of non-scrolling thumbnails. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="royalSlider rsDefault"&gt;
      &lt;a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg"&gt;yay caption!&lt;img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /&gt;&lt;/a&gt;
      &lt;a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg"&gt;yay caption!&lt;img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /&gt;&lt;/a&gt;
      &lt;a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg"&gt;yay caption!&lt;img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>// RoyalSlider
  $(".royalSlider").on("click", ".rsTmb", function(event) {
  
      event.preventDefault();
  
      var index = $(event.target).parent().index();
  
      var slider = $(".royalSlider").royalSlider({
              keyboardNavEnabled: true,
              controlNavigation: 'thumbnails',
              globalCaption:true,
              globalCaptionInside: false,
              fullscreen: {
                  enabled: true
              },
              thumbs: {
                  // thumbnails options go gere
                  spacing: 10,
                  arrowsAutoHide: true
              }
          }).data('royalSlider');
  
      if (!slider.isFullscreen) { // not fullscreen
  
          slider.enterFullscreen();
          slider.goTo(index); // this quite often does not find the index
  
      }
  });
  </code></pre>
  
  <p><strong>UPDATE:</strong> this code works to transition from a list of thumbs to fullscreen and back again. However I'm still having problems arriving at the correct slide after returning to fullscreen. </p>
  
  <p>e.g. </p>
  
  <ol>
  <li>Page loads, thumbs appear -> works</li>
  <li>Click thumb, loads fullscreen -> works</li>
  <li>Exit fullscreen -> works</li>
  <li>Click another thumb that is not the current ID -> fullscreen loads but with the wrong image, or half an image (it's like the slider location gets out of sync)</li>
  </ol>