问题是这样的:
我想在页面中使用两个忍者滑块来查看包含“ 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&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&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)。
感谢您的帮助。