Geek asks and answers

Cannot get destroy () method of jQuery UI plugin to work (+ conflicting jQuery plugins)

Background / General Problem

I am trying to fix a friend site where two added jQuery plugins do not play well. In principle, one ( foundation - tabbed grid layout) does not play well with the second ( RoyalSlider - image slider), because the latter should “see” the slider material, and the first hides inactive tabs. There are three tabs on this page, each of which has one of these RoyalSliders.

The source code initialized the slider for each of the three tabs at once in some jQuery on the main page. I tried to fix this by initializing only the active tab, and then when the tab is pressed, we insert the code to delete the previous instance of the slider and create a new one for the new tab.

Specific problem

The line $(currentLocation).royalSlider('destroy') that I added does nothing, and I cannot understand what I'm doing wrong. Now the sliders are initialized correctly for the first time, but when I return to any tab, the second slider appears inside the first, making me think that the delete function does not work; its size is smaller, and the animation is different from what the slider should be installed for (perhaps a rebound)? The number is never greater than two.

the code

, . ( ). -, RoyalSlider.js, ( , jQuery UI):

RoyalSlider.js:

(function($) {
     function RoyalSlider(element, options){ /* Make a slideshow, basically */ }
     RoyalSlider.prototype = {
          ... /* methods */
          destroy:function(){
               this._stopSlideshow();
               this._dragContainer.unbind(this._downEvent);
               $(document).unbind(this._moveEvent).unbind(this._upEvent);
               $(window).unbind(this._resizeEvent);
               if(this.settings.keyboardNavEnabled) {
                    $(document).unbind("keydown.rs");
               }
               this.slider.remove();

               delete this.slider;
          }
          ... /* _internal methods; all above are defined */
     }; /* RoyalSlider.prototype end */

     $.fn.royalSlider = function(options) { /* basically return a new RoyalSlider */ };
     $.fn.royalSlider.defaults = { /* whole lot of defaults */ };
     $.fn.royalSlider.settings = {};
})(jQuery);

, app.js, . , http://domain.com/pagename#tabtwo ( ..)

app.js

jQuery(document).ready(function ($) {
     function activateTab($tab) {
          var $activeTab = $tab.closest('dl').find('a.active'),
          contentLocation = $tab.attr("href") + 'Tab';

          prevLocation = $activeTab.attr("href") + 'Tab'; /* I added this */

          // Make Tab Active
      $activeTab.removeClass('active');
      $tab.addClass('active');

      //Delete and Add Slider

      $(prevLocation).royalSlider('destroy');  /* Doesn't Work, but doesn't break - it doesn't seem to have any effect.  */

      $mySlider = $(contentLocation).royalSlider({  /* I also added this, and it seems to work */
           captionShowEffects:"moveleft",
           directionNavAutoHide: true,
           imageScaleMode:"fit",
           imageAlignCenter:true,
           blockLinksOnDrag:true,   
      });

      //Show Tab Content
      $(contentLocation).closest('.tabs-content').children('li').hide();
      $(contentLocation).css('display', 'block');

     }
     /* More functions that aren't relevant for this */
}

, jQuery HTML:

-design.html

<html><head> ...
<script>
var $mySlider;
$(document).ready(function() {
    if ( window.location.hash ) { initialLocation = window.location.hash + 'Tab'; }
    else { initialLocation = '#taboneTab'; }

    $mySlider = $( initialLocation ).royalSlider({
        captionShowEffects:"moveleft",
        directionNavAutoHide: true,
        imageScaleMode:"fit",
        imageAlignCenter:true,
        blockLinksOnDrag:true,  
    });

    $(".royalSlider").css({ display: 'inline-block', overflow: 'hidden' });  
});
</script>
</head><body>
...
<!-- Body goes here -->
...
  <dl class="contained tabs">
    <dd><a href="#tabone" class="active">TabOne</a></dd>
    <dd><a href="#tabtwo" class="inactivetest">TabTwo</a></dd>
    <dd><a href="#tabthree" class="inactivetest">TabThree</a></dd>
  </dl>
  <ul class="tabs-content">
    <li class="active" id="taboneTab">
      ...
      <div id="tabone" class="royalSlider default"> 
        <!-- Container of slides(images) -->
        <ul class="royalSlidesContainer">
          <!-- Slides -->
          <li class="royalSlide">
            <div class="orbitcontent" style="">
              <h3>Content One</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </li>
          <li class="royalSlide"> <img class="royalImage" src="" alt="Beauty Shot" width="765" height="600"/>
            <div class="royalCaption">
              <h4 class="royalCaptionItem" data-show-effect="movetop">Constructed Prototype</h4>
            </div>
          </li>
        </ul>
      </div>

    <!--TAB TWOOOOOOOOOOOO-->
    <li id="tabtwoTab">
    ...
    <!--TAB THREEEEEEEEEEE-->
    <li id="tabthreeTab">
    ...
    <!-- Close all of the tags -->

, - ? $mySlider.destroy(), $mySlider.royalSlider('destroy'), $(pastLocation).destroy(), $(pastLocation).royalSlider('destroy'), $(pastLocation).royalSlider.prototype('destroy'), $('.royalslider).css('display','block') , , ; ( royalSlider, Firebug) -. jQuery, , , .

!

, .

+5
1

jQuery jQuery. , , , - http://dimsemenov.com/plugins/royal-slider/ - , , royalSlider .

, , destroy, royalSlider.

console.log($(prevLocation).data('royalSlider'));

, , destroy. , , - .

$(prevLocation).data('royalSlider').destroy();

- royalSlider,

$('#homeSlider').data('royalSlider').destroy();
+1

More articles:


All Articles