私たちの会社は、Web サイトのニュース セクションに LinkedIn 共有ボタンを含めたいと考えています。これは比較的単純で、ニュース項目を Colorbox ウィンドウで個別に開くカルーセルで構成されています。各ニュース項目の詳細を共有できるように、LinkedIn ボタンを Colorbox ウィンドウ内に配置します。
したがって、各ニュース項目の正しい URL を表示するために Colorbox がアクティブ化され、ニュース項目が共有されたときに LinkedIn ボタンが正しい URL を返すときに、hashchange イベントが正常に機能するようになりましたが、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();
}
}
);
});
アップデート
さらに調査を行ったところ、Ajax を使用するのではなく、コンテンツを iframe にロードする必要があることがわかりました。次に、クエリ文字列をニュース アイテムのリンクに追加し、クエリ文字列からパラメーターを解析して 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()));
http://jsfiddle.net/stegern/NtSvg/7/にも jsfiddle セットアップがあります。