$(document).ready(function(){
$('.slider').bxSlider(
{
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: false,
pause: 2000
});
$(".slide1").click(function () {
$.colorbox({
width:"900px",
height:"600px",
iframe:true,
href:"http://via.placeholder.com/300x300"
});
});
$('.slide2').click(function() {
$.colorbox({
onOpen:function(){
alert('onOpen: colorbox is about to open'); },
onLoad:function(){
alert('onLoad: colorbox has start content'); },
onComplete:function(){
alert('onComplete: loaded content'); },
onCleanup:function(){
alert('onCleanup: begun the close process'); },
onClosed:function(){
alert('onClosed: completely closed'); }
});
});
});<!DOCTYPE html>
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html lang="it-IT" class="no-js">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="theme-color" content="#1ebbf0"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"> </script>
</head>
<body>
<div class="slider">
<div class="slide1">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide2">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</body>
</html>我想使用两个库，即bxslider和颜色框，我希望当我单击幻灯片时，颜色框打开一个带有图像的模态选项卡。那可能吗？在此示例中，当我单击幻灯片时，我会看到一个黑色模式窗口，我认为我的JS代码中存在问题。有人可以帮助我修改此代码吗？
我的最终代码是此
$(document).ready(function(){
$('.slider').bxSlider(
{
auto: true,
autoHover: true,
slideWidth: 900,
slideHeight:450,
adaptiveHeight: false,
mode: 'horizontal',
autoControls: true,
stopAutoOnClick: true,
pager: false,
pause: 2000
});
$(".slide1").click(function () {
$.colorbox({
html:"<div class='image'><img src='http://via.placeholder.com/350x150'></div>",
maxWidth:'95%',
maxHeight:'95%'});
});
$(".slide2").click(function () {
$.colorbox({
html:"<div class='image'><img src='http://via.placeholder.com/350x150'></div>",
maxWidth:'95%',
maxHeight:'95%'});
});
});<!DOCTYPE html>
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html lang="it-IT" class="no-js">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="theme-color" content="#1ebbf0"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"> </script>
</head>
<body>
<div class="slider">
<div class="slide1">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide2">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</body>
</html>