我有一个图库,使用数据库查询动态填充。 从这里开始,我有彩盒工作,这样当你点击图像时,它会加载图像并允许你点击下一个/上一个按照你的方式通过图像 - 非常标准的东西。
我接下来要做的是在彩色盒中添加一个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>"
);
},
});
});
现在从上面的代码中我打开了colorbox并在打开时添加了一个纯粹用于样式目的的类。之后,我设置了一些变量,这些变量将帮助我构建设置为对信息充满信心的URL。
如果我单独点击每张图片,这样可以正常工作。但是,只要我单击下一个/上一个按钮,我就希望它用图像名称和用户正在查看的当前图像的描述来更新URL。
任何帮助都会很棒!
答案 0 :(得分:1)
使用onComplete回调来更新锚元素的href属性。