플리커 피드 용 Pin-It 버튼은 어떻게 구성합니까?

Question

내 사이트에 flickr 피드가 있으며 각 이미지 아래에 Pinterest "Pin-it"버튼을 추가하고 싶습니다.

<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> 

나는 .append 방법에

<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> 

코드를 추가하고 이미지 링크 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>'); 
    }); 
    }); 

건배 나를 왼쪽

!