[英]Colorbox and pinterest button URL updating
我有一个使用数据库查询动态填充的图片库。 从这里开始,colorbox起作用了,因此当您单击图像时,它会加载图像,并允许您单击next / prev来浏览图像-这是非常标准的东西。
然后,我要做的是在色盒中添加一个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。
如果我单独单击每个图像,则效果很好。 但是,一旦我单击“下一步” /“上一步”按钮,我希望它使用用户正在查看的图像名称和当前图像的描述来更新URL。
任何帮助将是巨大的!
使用onComplete回调更新锚元素的href属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.