最后和最后的编辑
- 又一个满意的客户！大声笑！
对于未来的 SO 读者：
最终解决方案是in this CodePen。
简而言之，这个解决方案允许使用cycle.js 和FancyBox.js 插件“交互”或“混合在一起”......以及使用FancyBox 的“画廊”功能......并且......和。 .. 和... 插入 PDF 链接的可能性（或任何内容！）
(插件混合调试有术语吗？)
所以您可以从第一个答案开始阅读，下面是后续编辑：
（要充分了解解决方案的工作原理）
第一个答案：
为了让 FancyBox 可以与 Cycle 一起使用，我为您修改了几处 CodePen...而不是尝试使用 jQuery 重新创建循环效果。
见this CodePen。
解释：
- 我不得不使用 2 张小猫图片，因为您的图片不可用。
- 我添加了 FancyBox CSS CDN 链接（您的 CodePen 中缺少该链接）。
- 我将要与FancyBox 一起使用的图像放在与Cycle.js 一起使用的
#right1 div 之外。
- 我添加了一些 CSS 以便能够查看其余文本（希腊语）并隐藏图像。
- 我删除了您的 FancyBox 参数，因为无法正常工作（即使删除了额外的昏迷）
自动尺寸：真，
fitToView: 真，
- 我在“Ek”链接上添加了一个
click 处理程序。
它做了这些事情：
显示隐藏的图像，
在环绕图像的链接上模拟click 事件以触发 FancyBox。
HTML：
<section id="solutions" data-direction="from-left">
<div class="container">
<a href="#" class="close"></a>
<div class="row solutionsRow">
<div class="col-md-3 no-pad1">
<div id="right1" class="pics">
<img class="img-center" src="https://upload.wikimedia.org/wikipedia/commons/1/11/Mihail_Manolov_-_Little_Kitten_(by-sa).jpg" width="168" height="168" alt="Akıllı Çevre" /><!--Original url for unavailable image: http://i.imgur.com/CtLbKCN.jpg?1-->
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Hava Kirliliği<!--Air pollution-->
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Orman Yangın Algılama<!--Forest Fire Detection-->
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Deprem Erken Teş<!-- Earthquake Early Diagnosis-->
</li>
<li lang="tr">
<i class="fa fa-file-image-o"></i> <a class="fancyBoxLink" rel="gallery0">EK</a>
</li>
</ul>
</div>
</div>
</div>
<a class="fancybox1" ><img class="imageToLink" src="https://c1.staticflickr.com/1/47/106442109_751ad0e91c.jpg"></a><!--Original url for unavailable image: https://i.imgsafe.org/7887214286.jpg-->
</div>
</section>
CSS：
.imageToLink{
display:none;
}
.fancyBoxLink{
color:dodgerblue;
text-decoration:underline;
cursor:pointer;
}
li{
color:white;
}
脚本：
$(document).ready(function() {
console.log("page resetted");
$("#right1").cycle({
fx: 'scrollRight',
next: '#right1',
timeout: -3000,
easing: 'easeInOutBack'
});
$(".fancyBoxLink").click(function(){ // click handler on EK link
console.log("Click");
$(".imageToLink").show();
$(".fancybox1").click();
});
$(".fancybox1").fancybox();
});
编辑
（在接受答案并获得赏金后）
您提出了一个很好的问题（在下面的 cmets 中）...
它值得编辑。
将我的解决方案与许多 cycle.js 实例、许多链接一起使用并使用 FancyBox.js“图库”功能
几乎一样...
但是从点击的链接，我们要确定：
- 哪个循环实例是点击的父级
- 与之关联的 FancyBox 类是什么
- 提供什么 `eq()` 参数来触发右侧图像上的 FancyBox
关于“关联”类：
我在与cycle 一起使用的 div 上使用了 自定义属性：
<div id="right" class="pics" data-fancyBox_class="fancybox0">
这受 HTML5 支持，reference here。
我必须创建一个“延迟”函数来向动态创建的 FancyBox 上一个/下一个图标添加点击处理程序，以便显示上一个/下一个图像。
最后，我快速修复了“点击冲突”。
（点击链接时，cycle 也会触发...）
大部分更改都在此脚本中，see this updated CodePen。
$(".fancyBoxLink").click(function(){ // click handler on link
console.log("Click")
// Retreive the fancyBox picture gallery link class
var thisFBclass = $(this).closest(".pics").attr("data-fancyBox_class");
console.log("thisFBclass: "+thisFBclass);
// determine which link has been clicked
var thisLink = $(this).html();
var linkEq;
$(this).closest("ul").find("a").each(function(i,val){
if( $(this).html() == thisLink ){
linkEq = i;
console.log("linkEq: "+linkEq); // `eq()` argument to provide
}
});
$("." + thisFBclass + " .imageToShow").eq(linkEq).show();
$("." + thisFBclass).eq(linkEq).click();
// Quick fix about Cycle click triggered on the link click (click conflict)
$(this).closest(".pics").click();
// Call the prev/next show image function - 260ms delay is due to FancyBox time to execute.
setTimeout(function(){
dynamicPrevNextHandler();
},260);
});
// Gallery prev/next handler
function dynamicPrevNextHandler(){
console.log("dynamic prev/next handlers");
$("body").find(".fancybox-prev").on("click", function(e){
console.log("fancy-box-prev");
// Show the FancyBox displayed image
$("body").find(".fancybox-inner img").show();
});
$("body").find(".fancybox-next").on("click", function(){
console.log("fancy-box-next");
// Show the FancyBox displayed image
$("body").find(".fancybox-inner img").show();
});
}
编辑
（添加 PDF 链接功能）
添加脚本：
$(".PDFtrigger").click(function(){
console.log("PDF!");
var thisPDF = $(this).attr("href");
console.log(thisPDF);
window.open(thisPDF,"_blank");
});
如何定义链接：
<a href="http://www.orimi.com/pdf-test.pdf" class="PDFtrigger">Akıllı Otopark - PDF</a>
查看更新的CodePen
错误提示：奇怪的是，window.open() 函数错误在 CodePen / Chrome 51... 新标签页打开，但文档没有显示。 FireFox 运行正常。
我尝试将其作为本地 html 文件，Chrome 没有错误。在 FF47、IE11、Opera ==> 下也试过了。
Safari 5.1.7（适用于 Windows）==> 打开另一个窗口而不是另一个选项卡。当你关闭这个新窗口时，Safari 会崩溃。我就是不知道为什么。
我刚刚更新到 Chrome 52...CodePen 中仍然存在问题...