0

我在为Fancybox. 我在我的 quicksand.js 文件中使用了回调，Slimbox它工作正常，但最近更改为Fancybox，因为它是移动友好的，slimbox而不是。好的，所以基本上有问题的页面工作正常，即所有调用Fancybox工作，直到你执行流沙，然后Fancybox死在水中。我知道我需要将回调集成到我的 quicksand.js 插件中，但在这样做时遇到了麻烦。更复杂的是，页面上的每个图像都会调用页面Fancybox部分中的不同脚本，因为当您将鼠标悬停在图像上时，它会显示一个带有两个指向两个不同Fancybox画廊的链接的蒙版。

这是head部分的代码

<script type="text/javascript">
$(document).ready(function() {
$(".fancyboxLauncher1").on("click", function () {
$(".fancybox-buttons1").eq(0).trigger("click");
return false;
});

$('.fancybox-buttons1').fancybox({
openEffect  : 'elastic',
closeEffect : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
closeBtn  : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
});

});
</script>

<script type="text/javascript">
$(document).ready(function() {
$(".fancyboxLauncher2").on("click", function () {
$(".fancybox-buttons2").eq(0).trigger("click");
return false;
});

$('.fancybox-buttons2').fancybox({
openEffect  : 'elastic',
closeEffect : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
closeBtn  : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
});

});
</script>

现在这是其中一张图片调用的 HTML 代码fancybox

<div class="portfolio-hover">

<div class="mask"></div>
<ul>

<li class="portfolio-zoom">
<a class="fancyboxLauncher1" href="img/project/gallery/anodising/thumbnail.jpg"
title="Click Here To View The Gallery">zoom</a>
<div style="display: none;">
<a class="fancybox-buttons1" href="img/project/gallery/alert.png" title="Image Gallery
Will Be Available From April 2014">zoom</a>
</div>
</li>                                   

<li class="portfolio-single">
<a class="fancyboxLauncher2" href="img/project/gallery/anodising/thumbnail.jpg"
title="Click Here For Stage Information">single</a>
<div style="display: none;">
<a class="fancybox-buttons2" href="img/project/gallery/alert.png" title="Information
Page Will Be Available From April 2014">single</a>
</div>
</li>

</ul>
</div>

</div>

正如我所说，该页面运行良好，使您可以fancybox根据您单击的链接（缩放或单个）在您将鼠标悬停在图像上时显示蒙版有两个单独的触发器。我必须通过调用 fancyboxLauncher1 和 fancyboxLauncher2 来区分它才能工作。

无论如何，问题不在于这段代码，一旦您运行 quicksand.js 重新排序图像，然后Fancybox就无法按上述方式工作，除非您刷新页面，这当然会将图像设置回其默认的 pre-quicksand 位置！

正如我所说，这一切都可以正常工作Slimbox，所以这里是javascript现在位于 quicksand.js 文件基础的回调代码，fancybox一旦运行就会调用

// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'swing'
},function() {
// reload other plugins
runfancybox();
});
return false;

这里唯一重要的一行是“runfancybox();” 一，因为我没有修改任何相邻的行，因为从Slimbox. 这行大概是指同一个 .js 文件的最顶部，我在其中插入了以下内容

$(document).ready(function(){

/* ================ FANCYBOX ================ */

if(jQuery().fancybox) {

$(".fancyboxLauncher1").on("click", function () {
$(".fancybox-buttons1").eq(0).trigger("click");
return false;
});

$('.fancybox-buttons1').fancybox({
openEffect  : 'elastic',
closeEffect : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
closeBtn  : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
});

$(".fancyboxLauncher2").on("click", function () {
$(".fancybox-buttons2").eq(0).trigger("click");
return false;
});

$('.fancybox-buttons2').fancybox({
openEffect  : 'elastic',
closeEffect : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
closeBtn  : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
});

}

unmodified js script continues from this point onwards

/* ================ PORTFOLIO QUICKSAND FILTER ================ */

基本上我不知道我是否需要为每个可能的触发器（即 fancboxLauncher1 和 fancboxLauncher2）进行回调，还是我只需要一种通过fancybox某种简单函数调用重新启动的方法？

我知道这必须与流沙插件末尾的调用相关联。我也知道这是我的问题所在，即将回调函数正确插入流沙插件。任何帮助将不胜感激。

4

0 回答 0