0

私たちの会社は、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&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()));

http://jsfiddle.net/stegern/NtSvg/7/にも jsfiddle セットアップがあります。

4

2 に答える 2

0

http://jsfiddle.net/でいくつかのサンプル コードをフィドルに入れて、ここで共有してみてください。

js を投稿しましたが、それを使用しようとしているマークアップがないため、必要最小限の html コードを投稿して、例をフィドルで動作させてください。

他の人があなたの問題をより簡単に視覚化するのに役立ち、解決策をより迅速に得ることができます。

于 2013-06-14T16:31:42.920 に答える
0

ブラウザーは通常、セキュリティ上の理由からクロスオリジン ファイル アクセスを禁止しているため、Ajax が読み込まれていません。メイン コードは jsfiddle でホストされているため、ajax を介してサイトからページを読み込むことは禁止されています。

簡単な回避策として、Chrome を使用している場合は、次のように安全性の低いモードで起動できます: https://superuser.com/questions/593726/is-it-possible-to-run-chrome-with -同時に Web セキュリティなし

chrome.exeが配置されているフォルダーでコマンドプロンプトを開いて実行することで、今テストしましたchrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

次にhttp://jsfiddle.net/WvfsA/12/を開き、js を最小限に抑えました。コンテンツがカラーボックスごとに ajax を介してロードされていることがわかりますが、画像が見つからないため、これらのパスに何か問題があります。

http://jsfiddle.net/WvfsA/13/を見てみましたが、$(function () {}) が 2 つネストされている理由が正確にはわかりません。フレームワークと拡張機能で、ondomready が既に選択されていることがわかりました。であるため、メイン関数を何かでラップする必要はありません。

これが機能することを示す簡単なスクリーンショットです: http://i.imgur.com/jAiUW28.png?1

開発していたとき、サーバーを介してサンプルを実行していましたか? ajax 関連が機能するには、ローカル サーバーが必要です。

まだインストールしていない場合は、XAMPP http://www.apachefriends.org/en/xampp.htmlをインストールしますか?

編集:または、ローカルWebサーバーの必要性を回避するために、私が言及したそのフラグで起動されたChromeで開発することもできますが、それは本当に良い考えではありません.

于 2013-06-14T20:53:09.307 に答える