Javascript Colorbox和pinterest按钮URL更新

Javascript Colorbox和pinterest按钮URL更新,javascript,jquery,colorbox,pinterest,Javascript,Jquery,Colorbox,Pinterest,我有一个使用数据库查询动态填充的图像库。 在这里,我有了彩色框,这样当你点击图像时,它会加载图像,并允许你点击下一步/上一步来处理这些图像-非常标准的东西 然后,我所做的是在colorbox中添加一个pinterest按钮,这样当colorbox加载时,用户可以选择锁定他们正在查看的图像 $(document).ready(function(){ $(".gallery").colorbox({ rel:'group1', height: '415px',

我有一个使用数据库查询动态填充的图像库。 在这里,我有了彩色框,这样当你点击图像时,它会加载图像,并允许你点击下一步/上一步来处理这些图像-非常标准的东西

然后,我所做的是在colorbox中添加一个pinterest按钮,这样当colorbox加载时,用户可以选择锁定他们正在查看的图像

$(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>"
          );        
        },
      });
    });
$(文档).ready(函数(){
$(“.gallery”).colorbox({
rel:'group1',
高度:'415px',
onOpen:函数(){
$('#colorbox').addClass('cbox-alt');
//用于构建pinterest URL的变量
var baseurl=http://www.baseurl.co.uk';
var imgsrc=$(this).children('img').attr('src');
var desc=$(this.children('img').attr('alt');
$('#cboxContent')。追加(
""
);        
},
});
});
现在,从上面的代码开始,我打开colorbox,并在它打开时添加一个纯粹用于样式设计的类。在那之后,我将设置一些变量,这些变量将帮助我构建URL,该URL被设置为包含信息的pinterest

如果我单独单击每个图像,这很好。但是,只要我单击next/prev按钮,我希望它用用户正在查看的当前图像的图像名称和描述更新URL

$(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>"
          );        
        },
      });
    });

任何帮助都会很好

使用onComplete回调更新锚元素的href属性