如何在页面中使用更多忍者滑块?

时间:2018-12-03 15:44:40

标签: javascript jquery html

问题是这样的:

我想在页面中使用两个忍者滑块来查看包含“ gallery”类的div中的图像。 页面的链接:http://www.alpastomendrisio.ch/galleria/riparazione-mobile.php

我的代码html:

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Galleria</title>
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link href="http://www.alpastomendrisio.ch/css/normalize.css" rel="stylesheet" type="text/css">
  <link href="http://www.alpastomendrisio.ch/css/style.css" rel="stylesheet" type="text/css">
  <link href="http://www.alpastomendrisio.ch/css/ilvetrauto.css" rel="stylesheet" type="text/css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
  <link href="http://www.alpastomendrisio.ch/plugins/ninja-slider/ninja-slider.css" rel="stylesheet">

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="http://www.alpastomendrisio.ch/js/default.js" type="text/javascript"></script>
  <script src="http://www.alpastomendrisio.ch/js/custom.js" type="text/javascript"></script>
  <script src="http://www.alpastomendrisio.ch/plugins/ninja-slider/ninja-slider.js" type="text/javascript"></script>

  <link href="http://www.alpastomendrisio.ch/images/36x36_2.png" rel="shortcut icon" type="image/x-icon">
  <link href="http://www.alpastomendrisio.ch/images/256x256.png" rel="apple-touch-icon">
  <meta name="google-site-verification" content="8GtxZttQH5BnPysw1nJ83xXCNjO2NnsIdyXMBYCUwho">
</head>

<body class="body">

  <!--HEADER-->
  <?php include_once "../parts/navbar.php"; ?>
  <!--END HEADER-->

  <!--CONTENT-->
  <div class="max-height">
    <br>
    <br>
    <div class="select-title" align="center">
      <h2> Seleziona l'album da visualizzare: </h2>
    </div>
    <div class="select">
      <select name="slct" id="slct">
        <option value="2016" selected>2016</option>
        <option value="2017">2017</option>
      </select>
    </div>

    <!--2016-->
    <div id="container2016" style="display:none;">
      <div id="ninja-slider">
        <div class="slider-inner">
          <ul>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/hd.jpg"></a>
            </li>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/img4.jpg"></a>
            </li>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/img5.jpg"></a>
            </li>
          </ul>
          <div id="fsBtn" class="fs-icon" title="Expand/Close"></div>
        </div>
      </div>
    </div>

    <div class="gallery" id="2016" style="display:none;">
      <img src="http://www.alpastomendrisio.ch/images/mobile/hd.jpg" onclick="lightbox(0)"/>
      <img src="http://www.alpastomendrisio.ch/images/mobile/img4.jpg" onclick="lightbox(1)"/>
      <img src="http://www.alpastomendrisio.ch/images/mobile/img5.jpg" onclick="lightbox(2)"/>
    </div>
    <!--END 2016-->

    <!--2017-->
    <div id="container2017" style="display:none;">
      <div id="ninja-slider2">
        <div class="slider-inner">
          <ul>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/hd.jpg"></a>
            </li>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/img5.jpg"></a>
            </li>
            <li>
              <a class="ns-img" href="http://www.alpastomendrisio.ch/images/mobile/img6.jpg"></a>
            </li>
          </ul>
          <div id="fsBtn" class="fs-icon" title="Expand/Close"></div>
        </div>
      </div>
    </div>

    <div class="gallery" id="2017" style="display:none;">
      <img src="http://www.alpastomendrisio.ch/images/mobile/img4.jpg" onclick="lightbox(0)"/>
      <img src="http://www.alpastomendrisio.ch/images/mobile/img5.jpg" onclick="lightbox(1)"/>
      <img src="http://www.alpastomendrisio.ch/images/mobile/img6.jpg" onclick="lightbox(2)"/>
    </div>
    <!--END 2017-->

    <div class="w-container">
      <div class="linea"></div>
      <br>
      <div class="rich-text-block w-richtext" align="left">
        <!--SHARES BUTTONS-->
        <div class="shares">
          <h4> Condividi:</h4>
          <!-- Facebook -->
          <a href="http://www.facebook.com/sharer.php?u=https://alpastomendrisio.ch/riparazioni-mobile.php" target="_blank">
            <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png" width="40" height="auto" alt="facebook, social, social media icon">
          </a>
          <!-- Email -->
          <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://alpastomendrisio.ch/riparazioni-mobile.php">
            <img src="https://cdn2.iconfinder.com/data/icons/clean-and-simple/153/Mail-512.png" width="40" height="auto" alt="Email" />
          </a>
          <!-- Whatsapp -->
          <a href="whatsapp://send?text=http://alpastomendrisio.ch/riparazioni-mobile.php" data-action="share/whatsapp/share" class="whatsapp">
            <img src="https://cdn3.iconfinder.com/data/icons/social-media-chamfered-corner/154/whatsapp-512.png" width="40" height="auto" alt="Whatsapp" />
          </a>
          <!-- LinkedIn -->
          <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://alpastomendrisio.ch/riparazioni-mobile.php" target="_blank">
            <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-512.png" width="40" height="auto" alt="LinkedIn" />
          </a>
        </div>
      </div>
    </div>
    <br>
  </div>
  <!--END CONTENT-->

  <!--FOOTER-->
  <?php include_once "../parts/footer.php"; ?>
  <!--END FOOTER-->

</body>

</html>

这是我的costum javascript文件:

function lightbox(idx) {

//show the slider's wrapper: this is required when the transitionType has been set to "slide" in the ninja-slider.js
  var ninjaSldr = document.getElementById("ninja-slider");
  ninjaSldr.parentNode.style.display = "block";

  nslider.init(idx);

  var fsBtn = document.getElementById("fsBtn");
  fsBtn.click();
}

function fsIconClick(isFullscreen, ninjaSldr) { //fsIconClick is the default event handler of the fullscreen button
  if (isFullscreen) {
    ninjaSldr.parentNode.style.display = "none";
  }
}

$(document).ready(function() {
  var year = $('#slct').val();
  $('#' + year).show();
  $('#slct').on('change', function() {
    var change = this.value;
    $('#' + year).hide();
    $('#' + change).show();
    year = this.value;
  });
});

对于每个了解插件的人,都知道从哪里获取代码(http://www.menucool.com/slider/show-image-gallery-on-modal-popup)。

感谢您的帮助。

0 个答案:

没有答案