我们公司希望在我们网站的新闻部分包含一个 LinkedIn 共享按钮。它相对简单,由一个轮播组成,可在 Colorbox 窗口中单独打开新闻项目。我们希望 LinkedIn 按钮位于 Colorbox 窗口中,以便我们可以共享每个新闻项目的详细信息。
所以,当 Colorbox 被激活时,我已经成功地让 hashchange 事件工作,以便为每个新闻项目显示正确的 url,并且 LinkedIn 按钮在共享新闻项目时返回正确的 url,但是 Colorbox 没有打开,它只需链接到我们网站的索引页面。我的问题是如何从这个共享链接启动 Colorbox?
我研究了很多类似的问题,但似乎无法让它发挥作用。任何帮助将非常感激。谢谢你。
下面是我的 js 也是一个 jsfiddle:http: //jsfiddle.net/stegern/WvfsA/11/
$(document).ready(function()
{
//Carousel for news items
$('#news-carousel').show();
$('#news-carousel').jcarousel({
vertical:true,
scroll:true,
wrap:'circular'
}
);
$('.popup').colorbox({
title: function()
{
var url = $(this).attr('href');
return '#' + url;
},
onOpen:function()
{
window.location.hash = $(this).attr('href');
},
onClosed:function()
{
window.location.hash = "";
},
opacity: 0.7,
transition: 'fade'
}
);
//Attempt to open ColorBox when url is shared
$(function(){
var hash = window.location.hash;
if ('onhashchange' in window)
{
window.onhashchange = hashChanged;
}
else
{
setInterval(function(){
if (window.location.hash != hash)
{
hash = window.location.hash;
hashChanged();
}
}, 500);
}
var hashChanged = function(){
$.colorbox();
}
}
);
});
更新
我做了更多的研究,发现我需要在 iframe 中加载我的内容,而不是使用 Ajax。然后,我需要将查询字符串添加到我的新闻项目链接并解析查询字符串中的参数,以便将它们传递给 ColorBox。
但是,我现在遇到了一个与我的 js (第 8 行预期的 ')' 标记)有关的语义问题,我不知道如何解决。有人可以解释一下。
这是我的 html 标记:
<ul>
<li><a href="http://www.sblm.com/news/test/arew-news-test.html?open=true&iframe=true" class="cb">News Item One</a>
</li>
<li><a href="http://www.sblm.com/news/test/icsc-recon-test.html?open=true&iframe=true" class="cb">News Item Two</a>
</li>
<li><a href="http://www.sblm.com/news/test/warehouse-test.html?open=true&iframe=true" class="cb">News Item Three</a>
</li>
这是我的js:
function getParameters() {
var
settingsObject = {},
hash,
hashes = location.search.substring(1).split(/&/),
i;
for (i = 0; i & lt; hashes.length; i++) {
hash = hashes[i].split('=');
settingsObject[hash[0]] = hash[1];
}
return settingsObject;
}
$('a.cb').colorbox($.extend({
iframe: true,
width: '800',
height: '600'
}, getParameters()));
我也有一个 jsfiddle 设置:http: //jsfiddle.net/stegern/NtSvg/7/