Open ColorBox with link generated by hashchange event

Question

Our company wants to include a LinkedIn Share Button in the news section of our website. It is relatively simple and consists of a carousel that open up the news items individually in Colorbox windows. We want the LinkedIn button to be within the Colorbox windows so that we can share the details of each news item.

So, I have successfully got the hashchange event to work when Colorbox is activated in order to show the correct url for each news item and the LinkedIn button does return the correct url when the news item is shared, however Colorbox doesn't open, it simply links to the index page of our site. My question is how do I fire up Colorbox from this shared link?

I have researched a lot of similar questions but cannot seem to get it working. Any help would be much appreciated. Thank you.

Below is my js and also a 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();
        }
    }
   );
});

UPDATE

I have done some more research and discovered that I need to load my content in an iframe rather than using Ajax. I then need to add a querystring to my news item links and parse the parameters from the querystring in order to pass them to ColorBox.

However I am now getting a semantic issue with my js (line 8 Expected ')' token) which I don't know how to resolve. Can someone please explain.

Here is my html markup:

<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>

And here is my 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()));

I also have a jsfiddle setup at: http://jsfiddle.net/stegern/NtSvg/7/

Answer 1

Try putting some example code in a fiddle at http://jsfiddle.net/ then share here.

You posted your js, but we don't have the markup you're trying to use it on, so post the minimum necessary html code to make your example work in a fiddle.

It will help others visualize your problem much easier and quite possibly get you a solution a lot faster.

Answer 2

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.