Javascript Flexslider主图像在fancybox中打开
我想在flexslider中单击主图像时在fancybox中打开主图像 如果可能的话，当点击主图像并在fancybox中打开它时，所有的缩略图都像flexslider中显示的一样，带有prev和next按钮 如何做到这一点？flexslider中是否有任何参数或需要进行自定义 请帮帮我。我在这里提到代码 谢谢 =>代码：Javascript Flexslider主图像在fancybox中打开,javascript,jquery,fancybox,flexslider,Javascript,Jquery,Fancybox,Flexslider,我想在flexslider中单击主图像时在fancybox中打开主图像 如果可能的话，当点击主图像并在fancybox中打开它时，所有的缩略图都像flexslider中显示的一样，带有prev和next按钮 如何做到这一点？flexslider中是否有任何参数或需要进行自定义 请帮帮我。我在这里提到代码 谢谢 =>代码： <!DOCTYPE html> <html> <head> <script src="jquery.min.js"&
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css"/>
<script src="modernizr.js"></script>
<script src="jquery.flexslider.js"></script>
<style type="text/css">
@import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
body { font-family: avenir, sans-serif; }
#slider .slides img {
width: 450px;
height: 300px;
margin: 0 auto;
}
.container{
max-width: 50%;
margin : 0 auto;
}
#carousel .flex-active-slide img {
opacity: 1;
}
#carousel img {
opacity: 0.65;
}
.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
.flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
$('#carousel li').click(function() {
$('#carousel li').removeClass('flex-active-slide')
$(this).addClass('flex-active-slide');
});
</script>
</head>
<body>
<!-- Include jQuery library and Flexslider script -->
<!-- Place somewhere in the <body> of your page -->
<div class="container">
<div id="slider" class="flexslider" onclick="func(this)">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</body>
</html>
@进口”https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
正文{字体系列：avenir，无衬线；}
#滑块。滑块img{
宽度：450px；
高度：300px；
保证金：0自动；
}
.集装箱{
最大宽度：50%；
保证金：0自动；
}
#转盘.柔性主动滑动img{
不透明度：1；
}
#旋转木马{
不透明度：0.65；
}
.flex方向导航.flex下一步{右：0！重要；右边距：-40px；}
.flex-direction导航.flex-prev{left:0！重要；左边距：-40px；}
.flex控件拇指li{宽度：25%；浮动：左侧；边距：0；}
.flex控件拇指img{宽度：100%；显示：块；光标：指针；}
$（窗口）。加载（函数（）{
$（'旋转木马'）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
项目宽度：70，
项目保证金：10，
asNavFor:“#滑块”
});
$（“#滑块”）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
同步：“旋转木马”
});
});
$（#carousel li'）。单击（函数（）{
$（“#carousel li”）.removeClass（'flex-active-slide'））
$（this.addClass（'flex-active-slide'）；
});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
fancyBox适用于任何滑块/旋转木马，您只需使用
.selector$().fancybox({
selector : '.slides li:not(.clone) a'
});
- 光滑-
- 猫头鹰旋转木马2-
- 泳衣-
- 柔性滑块-
itemWidth