タイトル属性のソーシャル メディア共有ボタンで Fancybox を使用しています。この例から動作しました。これが私が今持っているものです。
しかし今、私には2つの問題が残っています。今、私は一緒にマージする必要がある2つのスクリプトを使用していますが、すべてを通常どおりに機能させる必要がありますが、行を削除すると
$('.fancybox').fancybox();
Fancybox スクリプトから、共有ボタンは表示されますが、すべてのボタンが消えます。ただし、矢印キーを使用して画像をめくることができます。しかし、その行を保持すると、共有ボタンが表示されません。
ファンシーボックスのスクリプト:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': false
});
/*
* Different effects
*/
// Change title type, overlay opening speed and opacity
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedIn : 500,
opacity : 0.75
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background-color' : '#eee'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
});
</script>
共有ボタンのスクリプトは次のとおりです。
<script>
//<![CDATA[
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
afterShow: function() {
// Render tweet button
twttr.widgets.load();
}
});
//]]>
</script>