Setting vars too early?

JavaScript
1

I am build something using the royalSlider jQuery slider plugin.

It has an API that let’s you pull in various slide data. Per the documentation, the slider data is set as a variable with

var sliderInstance = $(".royalSlider").data('royalSlider');

When I type that into the browser console manually, it pulls in the slider data as a var like it should (I can see it via console.log(siderInstance).

BUT when I just add the same code as a script in the markup, it doesn’t set that as a var…

So, somehow I guess I am delcaring this too early? Before the slider is initialized, perhaps?

I don’t know how much I would avoid that…

The js markup on the page. The first script is how the slider is initialized.

<script id="addJS">jQuery(document).ready(function($) {
    $('#gallery-1').royalSlider({
      fullscreen: {
        enabled: true,
        nativeFS: false,
      },
      controlNavigation: 'thumbnails',
      autoScaleSlider: true, 
      autoScaleSliderWidth: 960,     
      autoScaleSliderHeight: 750,
      fitInViewport:true,
      loop: false,
      imageScaleMode: 'fit-if-smaller',
      navigateByClick: true,
      numImagesToPreload:2,
      arrowsNav:true,
      arrowsNavAutoHide: true,
      arrowsNavHideOnTouch: true,
      keyboardNavEnabled: true,
      fadeinLoadedSlide: true,
      globalCaption: true,
      globalCaptionInside: true,
      thumbs: {
        appendSpan: true,
        firstMargin: true,
        paddingBottom: 4,
        orientation:'horizontal',
      }
    });
  });
  </script>

  <script>

var sliderInstance = $(".royalSlider").data('royalSlider');
function slideDynamics() {
    var theCaption = sliderInstance.currSlide.caption.text()
    document.getElementById("slide-caption").innerHTML = theCaption;  
}
sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
slideDynamics();
  </script>
2

I am not sure how sliderInstance here is related to your to your first #gallery-1 slider. They are selecting different elements. Try something like this and see if it works…

var sliderInstance = $('#gallery-1').royalSlider({
 ...
}).data('royalSlider');

Notice that we are binding the initialization of the #gallery-1 element slider, then pulling out its data and storing it in sliderInstance.

This models many of the examples they show in their API documents for initializing and getting access to the API. Such as http://help.dimsemenov.com/kb/royalslider-javascript-api/dynamically-add-and-remove-slides

See if this works. :slight_smile:

Edit: Of course replace the ellipse with your initialization options in case you didn’t see what I did there.

1 Like
3

They should get the same thing since the sliders have a class of “royalslider”.

4

Beginners guess here but where is that script in the html in relation to the markup it refers to?

The first script is in document.ready so waits for the document to be ready but that second script will go as soon as it is seen. If the script is before the html it refers to then it won’t find it as it won’t exist yet.

1 Like
5

@PaulOB is right here. I didn’t even realize you were running it inside a ready() function. I also hadn’t realized that you were running multiple sliders. Honestly I would mix what Paul is referring to with the format I proposed inside your ready() event and you will get something that is more direct and also probably solve the problem. The two types of selectors here is just odd. :slight_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.