Reloading jQuery function within another function

Question

this is a tricksy one, i am not even sure on how to word the title for this.

so what i have is a bit of a mix up i have a jQuery function called slideonlyone, that toggles divs and within the divs i have a jQuery plugin called the royalSlider(content slider).

what happens is when i first load up the page i have the one div un-toggled by default and the royalSlider plugin works fine. the moment i toggle the page to another div with the royalSlider plugin, it fails to load that plugin.

the head of my page looks like this:

  <head>
    <link rel="stylesheet" href="/css/system.css" type="text/css">
    <link rel="stylesheet" href="/css/royalslider.css" type="text/css">
    <link rel="stylesheet" href="/css/default/rs-default-inverted.css" type="text/css">
    <script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/js/jquery.royalslider.js" type="text/javascript"></script>
    <script src="/js/systems_jquery.js" type="text/javascript"></script>

      <script type="text/javascript">
        function slideonlyone(thechosenone) {
        $('.systems_detail').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
             $(this).slideDown(200);
        }
        else {
             $(this).slideUp(600);
        }
   });
  }
  </script>
</head>

the royalSlider is called in a seperate file i load called 'systems_jquery.js'

 jQuery(document).ready(function($) {
  var rsi = $('#slider-in-laptop').royalSlider({
    autoHeight: false,
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter: true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315
  }).data('royalSlider');
  $('#slider-next').click(function() {
    rsi.next();
  });
  $('#slider-prev').click(function() {
    rsi.prev();
  });
 });

the html looks like this i have this as a type of brief summary- when they click on the div is loads the slideonlyone function which toggles the products details

  <a href="javascript:slideonlyone('beagle_box');">
    <div class="system_box">
      <h2>BEE management systems</h2>
      <p>________________</p>
    </div>
  </a>

This is the product details div.

<div class="systems_detail" id="sms_box">
  <div class="laptopBg">
    <img src="/images/laptop.png" class="imgBg" width="707" height="400">
    <div id="slider-in-laptop" class="royalSlider rsDefaultInv">
      <img src="/images/1.jpg">
      <img src="/images/2.jpg" data-rsvideo="https://vimeo.com/45778774">
      <img src="/images/3.jpg">
      <img src="/images/4.jpg">
    </div>
  </div>
</div>

as you can see that apart of the details is the royalSlider it shows screen shots of the product. but since its only just appearing the images are not loaded into the slider and images are displayed under each other as if the plugin is broken but when i inspect the element and go to the console i can see that its not broken. so i suspect that the royalSlider is going to need to reload when ever i toggle the div so that it finds the IDs again??

is it possible to reload the royalSlider function when ever i toggle/slide some content from my slidonlyone function?

NOTE: if i toggle the div and the slider drops its content if i reload the page it picks them up again. so its definitely the royalSlider needing to reload once i have toggeld the div -- or reload the page once i have toggled the page.

Answer 1

Well if you want to run 'royalSlider' again than just wrap whole thing in a function. Then just run it at the time you think you need to reload it ('documentReady' or 'click', etc):

royalSliderReload = function() {

    var rsi = $('#slider-in-laptop').royalSlider({
            autoHeight: false,
            arrowsNav: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            controlNavigation: 'bullets',
            imageScaleMode: 'fill',
            imageAlignCenter: true,
            loop: false,
            loopRewind: false,
            numImagesToPreload: 6,
            keyboardNavEnabled: true,
            autoScaleSlider: true,  
            autoScaleSliderWidth: 486,     
            autoScaleSliderHeight: 315
    }).data('royalSlider');

    $('#slider-next').click(function() {
        rsi.next();
    });

    $('#slider-prev').click(function() {
        rsi.prev();
    }); 
}


$(document).ready(function(e) {
    royalSliderReload(); 
});


function slideonlyone(thechosenone) {
  $('.systems_detail').each(function (index) {
      if ($(this).attr("id") == thechosenone) {
          $(this).slideDown(200);
          royalSliderReload(); // slider will reload here
      } else {
          $(this).slideUp(600);
      }
  });
  }

Reloading jQuery function within another function

Question

1 answers

solution1
2 ACCPTED 2013-01-28 13:47:29

Reloading jQuery function within another function

Question

1 answers

solution1 2 ACCPTED 2013-01-28 13:47:29

solution1
2 ACCPTED 2013-01-28 13:47:29