Colorbox 和 pinterest 按钮 URL 更新
Posted
技术标签:
【中文标题】Colorbox 和 pinterest 按钮 URL 更新【英文标题】:Colorbox and pinterest button URL updating 【发布时间】:2013-03-04 10:03:52 【问题描述】:我有一个使用数据库查询动态填充的图片库。 从这里开始,我已经让颜色框工作了,因此当您单击图像时,它会加载图像并允许您单击下一个/上一个以按照自己的方式浏览图像 - 非常标准的东西。
然后我所做的是向颜色框添加一个 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。
任何帮助都会很棒!
【问题讨论】:
【参考方案1】:使用 onComplete 回调更新锚元素的 href 属性。
【讨论】:
以上是关于Colorbox 和 pinterest 按钮 URL 更新的主要内容,如果未能解决你的问题,请参考以下文章
Jquery ColorBox:使用下一个和上一个按钮显示内联内容
Colorbox Prev/Back 按钮不起作用。退出呢?