如何为flickr提要构建Pin-It按钮

Question

我的网站上有一个flickr提要，我想在每个图片下添加一个Pinterest"Pinit"按钮。

这是提要脚本：

<script>
    $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&lang=en-us&format=json&jsoncallback=?', function(data) {
    $.each(data.items, function(i,item) {
    var large = (item.media.m).replace('_m.jpg', '_b.jpg');
    if(i <= 20){
    $('#list').append('<li class="picture"><a class="slide-img" data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a></li>');
    }
    });
    });
    </script>

我想添加

<a href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media=http%3A%2F%2Ffarm4.staticflickr.com%2F3838%2F15273469932_0c3ceaeb96_b.jpg&description=%40PushPin%20Events" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

将代码转换为.append方法，并将url字符串替换为图像链接。

我的最佳猜测是，我需要从flickr URL中定义一个变量，并将"/"替换为%3F"："替换为%2A等。

所以类似于：

var link = (large).replace('/', '%3F');

问题1-如何在一个.replace方法中替换多个字符

定义好之后，我的下一步代码将是：

<script>
        $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&lang=en-us&format=json&jsoncallback=?', function(data) {
        $.each(data.items, function(i,item) {
        var large = (item.media.m).replace('_m.jpg', '_b.jpg');
        if(i <= 20){
        $('#list').append('<li class="picture"><a class="slide-img" data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a></li><br><a href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media='+link+'" data-pin-do="buttonPin" data-pin-config="beside">Pin It!</a>');
        }
        });
        });
        </script>

问题2-这是最有效的方法吗

Answer 1

我最终使用了var encodedUrl = encodeURIComponent(large);，它做到了这一点。

这让我有了

$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&lang=en-us&format=json&jsoncallback=?', function(data) {
    $.each(data.items, function(i,item) {
    var large = (item.media.m).replace('_m.jpg', '_b.jpg');
    var encodedUrl = encodeURIComponent(large);
    console.log(encodedUrl);

    if(i <= 20){

    }$('#list').append('<li class="picture"><span class="round"><a data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a><br><a class="pinit round" target="_blank" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media='+encodedUrl+'&description=%40PushPin%20Events" data-pin-do="buttonPin" data-pin-config="beside"><i class="fa fa-pinterest"></i> Pin it</a></span></li>');
    });
    });

干杯！