のコールバックを書くのに問題がありますFancybox。Slimbox私は自分のquicksand.jsファイルでコールバックを使用していましたが、これは正常に機能しましたがFancybox、最近変更されましたslimbox. わかりましたので、問題のページは基本的に正常に動作します。つまり、FancyboxQuicksand を実行するまではすべての呼び出しが機能し、その後Fancybox水で死んでしまいます。私のquicksand.jsプラグインにコールバックを統合する必要があることはわかっていますが、それを行うのに問題があります。さらに複雑なことに、ページ上の各画像は、ページのセクションで異なるスクリプトを呼び出します。画像にカーソルを合わせると、 2 つの異なるギャラリーFancyboxへの 2 つのリンクを含むマスクが表示されます。Fancybox
これがヘッドセクションのコードです
<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>
ここで、画像の 1 つが呼び出す 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クリックしたリンク (ズームまたはシングル) に応じて、画像の上にカーソルを置いたときにマスクが表示される 2 つの個別のトリガーを使用できます。これを機能させるには、fancyboxLauncher1 と fancyboxLauncher2 を呼び出して区別する必要がありました。
とにかく、問題はこのコードではありません。quicksand.js を実行して画像を並べ替えるとFancybox、ページを更新しない限り、前述のように機能しません。もちろん、画像をデフォルトの pre-quicksand 位置に戻します!
私が言ったように、私はこれですべて正常に動作していたので、実行後に呼び出すquicksand.jsファイルのベースにあるSlimboxコールバックコードを次に示しますjavascriptfancybox
// 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ある種の単純な関数呼び出しで再開する方法が必要ですか?
これは、quicksand プラグインの最後の呼び出しと結び付けなければならないことはわかっています。また、ここに問題があることもわかっています。つまり、コールバック関数を流砂プラグインに正しく挿入することです。どんな助けでも大歓迎です。