0

我们公司希望在我们网站的新闻部分包含一个 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&amp;iframe=true" class="cb">News Item One</a>

</li>
<li><a href="http://www.sblm.com/news/test/icsc-recon-test.html?open=true&amp;iframe=true" class="cb">News Item Two</a>

</li>
<li><a href="http://www.sblm.com/news/test/warehouse-test.html?open=true&amp;iframe=true" class="cb">News Item Three</a>

</li>

这是我的js:

    function getParameters() {
    var
    settingsObject = {},
    hash,
    hashes = location.search.substring(1).split(/&amp;/),
        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/

4

2 回答 2

0

尝试将一些示例代码放在http://jsfiddle.net/的小提琴中,然后在此处分享。

您发布了您的 js,但我们没有您尝试使用它的标记,因此请发布最少必要的 html 代码以使您的示例在小提琴中运行。

它将帮助其他人更轻松地可视化您的问题,并且很可能更快地为您提供解决方案。

于 2013-06-14T16:31:42.920 回答
0

Ajax isn't loading because browsers typically disallow cross-origin file access for security reasons.Since the main code is hosted on jsfiddle, it forbids you to load pages from your site via ajax.

A quick workaround, if you're using Chrome, you can start it in a less secure mode, like indicated here: https://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time

I just tested now by opening a command prompt in the folder where chrome.exe is located and ran chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Then I opened http://jsfiddle.net/WvfsA/12/ , where I stripped down your js to the minimum. You'll see your content is now loaded via ajax by colorbox, however, you're doing something wrong with those paths, because the images can't be found.

I took a look at http://jsfiddle.net/WvfsA/13/ and I'm not sure exactly why you have 2 nested $(function () {}), I saw that in Framework & Extensions, ondomready is already selected, so you don't really need to wrap your main function(s) in anything.

Here's a quick screenshot as proof that it works: http://i.imgur.com/jAiUW28.png?1

When you were developing, were you running your example through a server? You need to have a local server in order for anything ajax-related to work.

Install XAMPP http://www.apachefriends.org/en/xampp.html if you haven't already?

Edit: or you could develop on Chrome launched with that flag I mentioned, to bypass the need of a local webserver, but it's not a really good idea.

于 2013-06-14T20:53:09.307 回答