0

これはトリッキーなものです。これのタイトルをどのように表現するかさえわかりません。

だから私が持っているのはちょっとした混乱です。divを切り替えるslideonlyoneと呼ばれるjQuery関数があり、div内にroyalSlider（コンテンツスライダー）と呼ばれるjQueryプラグインがあります。

最初にページをロードすると、デフォルトで 1 つの div がオフになり、royalSlider プラグインが正常に動作します。RoyalSlider プラグインを使用してページを別の div に切り替えた瞬間、そのプラグインの読み込みに失敗します。

私のページの頭は次のようになります。

  <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>

RoyalSlider は、「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();
  });
 });

HTMLはこのように見えます。これは簡単な要約の一種として持っています.divをクリックすると、製品の詳細を切り替えるslideonlyone関数が読み込まれます

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

商品詳細部です。

<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>

詳細の一部がroyalSliderであることがわかるように、製品のスクリーンショットを示しています. しかし、表示されるだけなので、画像はスライダーに読み込まれず、プラグインが壊れているかのように画像が互いの下に表示されますが、要素を調べてコンソールに移動すると、壊れていないことがわかります。だから私はdivを切り替えるたびにroyalSliderをリロードする必要があるのではないかと思います。

slidonlyone 関数から一部のコンテンツをトグル/スライドしたときに、royalSlider 関数をリロードすることは可能ですか?

注：divを切り替えて、ページをリロードするとスライダーがコンテンツをドロップすると、再びそれらがピックアップされます。したがって、間違いなく、divを切り替えたらroyalSliderをリロードする必要があります-または、ページを切り替えたらページをリロードします。

4

1 に答える 1

2

すべてを関数でラップするだけでなく、「royalSlider」を再度実行したい場合。次に、リロードする必要があると思われる時点で実行します (「documentReady」または「click」など)。

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);
      }
  });
  }
于 2013-01-28T13:47:29.427 に答える