컬러 박스 및 관심 단추 URL 업데이트

Question

데이터베이스 쿼리를 사용하여 동적으로 채워지는 이미지 갤러리가 있습니다. 여기에서 colorbox를 사용 했으므로 이미지를 클릭하면 이미지가로드되고 다음/이전 이미지를 클릭하여 이미지를 처리 ​​할 수 ​​있습니다.

내가 한 것은 색상 상자에 pinterest 버튼을 추가하여 색상 상자를로드 할 때 사용자가보고있는 이미지를 고정 할 수있는 옵션이 있다는 것입니다.

$(document).ready(function(){ 
    $(".gallery").colorbox({ 
     rel:'group1', 
     height: '415px', 
     onOpen:function(){ 
      $('#colorbox').addClass('cbox-alt'); 

      // variables used to build pinterest URL 
      var baseurl = 'http://www.baseurl.co.uk'; 
      var imgsrc = $(this).children('img').attr('src'); 
      var desc = $(this).children('img').attr('alt'); 

      $('#cboxContent').append(
      "<div id='pinterest'><a data-pin-config='none' href='//pinterest.com/pin/create/button/?url=" + baseurl + "&media=" + imgsrc + "&description=" + desc + "' data-pin-do='buttonPin'><img src='http://www.baseurl.co.uk/images/pin_it_button.png' alt='Pin it' /></a></div>" 
     );   
     }, 
     }); 
    }); 

위 코드에서 색상 상자를 열고 스타일이 적용될 때 클래스를 추가합니다. 그 다음에는 정보가있는 pinterest로 설정된 URL을 작성하는 데 도움이되는 몇 가지 변수를 설정하고 있습니다.

각 이미지를 개별적으로 클릭하면 정상적으로 작동합니다. 그러나 다음/prev 버튼을 클릭하자마자 사용자가보고있는 현재 이미지의 이미지 이름과 설명으로 URL을 업데이트하고 싶습니다.

도움이 될 것입니다.

Answer 1

onComplete 콜백을 사용하여 앵커 요소의 href 속성을 업데이트하십시오.