ファンシーボックスv2にピン留めボタンを追加するこのスクリプトをオンラインで見つけました。これが実際の例です：
http://scottgale.com/blogsamples/fancybox-pinterest/index.html
Hubspot CMS のサイトで作業しています。ご存知の方のために説明すると、Fancybox 1.3.4 は Hubspot に含まれています。また、それに関連付けられているファイルやスクリプトへの編集アクセス権は実際にはありません。
Fancybox はギャラリー モジュール (またはウィジェット) として機能するため、ユーザーは画像をアップロードするだけです。
ファンシーボックス 1 が私のサイトに実装されている方法で動作するように、この元のスクリプトを変更する方法があるかどうか疑問に思っていました。
ここに私のページがあります：
http://www.signdealz.com/gallery-test/
スクリプトは次のとおりです。
<script type="text/javascript">
//NOTE: this uses fancybox 2
$(document).ready(function() {
$('.fancybox').fancybox({
//set the next and previous effects so that they make sense
//the elastic method is confusing to the user
nextEffect: 'fade',
prevEffect: 'fade',
//set the position of the title
helpers : {
title: {
// title position options:
// 'float', 'inside', 'outside' or 'over'
type: 'inside'
}
},
beforeShow: function () {
//if you already have titles
//on your fancybox you can append
if(this.title) {
//set description to current title
//this will set what posts
var description = this.title;
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
//put the path to the image you want to share here
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
//add title information
+'<span>'+this.title+'</span>';
//if you don't already have titles
//you can just make the title the pinterest button
} else {
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
}
}
});
});
</script>
どんな助けでも大歓迎です！