Colorbox和pinterest按钮URL更新

Colorbox and pinterest button URL updating

本文关键字：URL 更新 按钮 pinterest Colorbox      更新时间：2023-09-26

我有一个使用数据库查询动态填充的图片库。从这里开始，我让colorbox工作，所以当你点击图像时，它会加载图像，并允许你点击next/prev来浏览图像-非常标准的东西。

我所做的就是在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>"
          );        
        },
      });
    });
现在，从上面的代码中，我打开了colorbox，并在它打开时添加了一个纯粹用于样式目的的类。之后，我设置了一些变量，这将有助于我建立的URL设置为pinterest的信息。

如果我单独单击每个图像，则可以正常工作。然而，只要我点击下一个/上一个按钮，我希望它更新的URL与图像名称和用户正在查看的当前图像的描述。

任何帮助将是伟大的!

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

相关文章：