Fancybox Pinterest按鈕-如何將鏈接標題傳遞給圖釘描述？

Question

我發現了這個問題，如何在FancyBox2 fancbybox pinterest jQuery中添加pinterest懸停按鈕，效果很好，我只是無法解決如何向圖釘添加描述？

var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href) 
                    + '&media='+ encodeURIComponent(img.attr('src'))
                    + '&description=' (what goes here??);

Answer 1

不熟悉API，但是要適當添加description參數並保持編碼，您可以執行以下操作：

var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href) 
                + '&media='+ encodeURIComponent(img.attr('src'))
                + '&description=' + encodeURI('I am some string of text');

對此進行抽象：

function pinUrl(link, img, description) {
    return link.attr('href') + '?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(img.attr('src')) + '&description=' + encodeURI(description);
}

//用法：

var myPinUrl = pinURL($("#somelink"), $("#someimage"), "Look at this cool text!");

//編輯：如果您有一組包含變量信息的鏈接，則可以使用pinUrl函數，如下所示：

var pin_url_list = [];

$("#mydiv a").each(function() {
    pin_url_list.push( pinUrl( $(this), $(this).find("img.featured"), $(this).attr("title") );
});

Answer 2

另一種方法是：

您可以從鏈接的title屬性（或使用data-caption屬性）獲取描述，例如：

$(".fancybox").fancybox({
    helpers: {
        title: {
            type: 'inside'
        }
    },
    beforeShow: function () {
        this.title = this.title ?
            '<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
            '&media=' + encodeURIComponent(this.href) +
            '&description=' + this.title + '" class="pin-it-button" count-layout="horizontal">' +
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>' +
            '<span> ' + this.title + '</span></div>' 
        :
            '<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
            '&media=' + encodeURIComponent(this.href) +
            '&description='+$(this.element).data("caption")+'" class="pin-it-button" count-layout="horizontal">' +
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>' +
            '<span>&nbsp;</span></div>'
    }
});

JSFIDDLE