將jquery Roundabout與Facebox集成在一起

我正在嘗試使用Roundabout在我的投資組合中創建一個「精選項」部分。我還附加了Facebox，這樣當用戶點擊其中一個Roundabout項目時，它會隱藏在模式窗口中彈出的div。這一切都很好，很好。將jquery Roundabout與Facebox集成在一起

我的問題是，所有的項目都是可點擊的，不只是焦點項目，並試圖旋轉傳送帶，Facebox被激活（有一個非常小的區域，可點擊，使東西旋轉，但沒有訪問者的網站會有耐心找到它）。我需要找到一種方法來禁用失焦項目上的鏈接，以便只有前面的項目可以點擊，從而可以旋轉轉盤。

這裏是我的腳本：

<script> 
$(document).ready(function() { 
    $('ul#myRoundabout').roundabout(); 
    $('a[rel*=facebox]').facebox(); 
}); 
</script>

這裏的HTML：

<ul id="myRoundabout"> 
     <li><a href="#bp" rel="facebox"><img src="images/ft/bp_ft.jpg" alt="Open house site" /></a></li> 
     <li><a href="#me" rel="facebox"><img src="images/ft/me_ft.jpg" alt="Personal website" /></a></li> 
     <li><a href="#wct" rel="facebox"><img src="images/ft/wct_ft.jpg" alt="Travel agency site" /></a></li> 
     <li><a href="#zen" rel="facebox"><img src="images/ft/zen_ft.jpg" alt="CSS Zen Garden" /></a></li> 
    </ul> 

    <!-- hidden divs to call--> 
    <div id="bp" style="display:none;"> 
     <h3 class="box">Websites &gt; BP Community Open House</h2> 
     <img class="box" src="images/gallery/bp_lg.png" /> 
    </div> 
    <div id="me" style="display:none;"> 
     <h3 class="box">Websites &gt; kitkatkookoo designs</h2> 
     <img class="box" src="images/gallery/me_lg.png" /> 
    </div> 
    <div id="wct" style="display:none;"> 
     <h3 class="box">Websites &gt; World Culture Tours</h2> 
     <img class="box" src="images/gallery/wct_lg.png" /> 
    </div> 
    <div id="zen" style="display:none;"> 
     <h3 class="box">Websites &gt; CSS Zen Garden</h2> 
     <img class="box" src="images/gallery/zen_lg.png" /> 
    </div> 
    <!-- end hidden divs-->

我發現了一個相關的問題here。工作解決方案是添加到腳本的一條線：

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){event.preventDefault();$.fancybox({'href':$(this).attr('href')});})

我意識到它是爲Fancybox，而不是Facebox，但女孩可以希望。我試圖編輯它以適合我的需求：

$('ul#myRoundabout .roundabout-in-focus a').live('click',function(event){event.preventDefault();$.facebox({'href':$(this).attr('href')});})

但是由於我對js的知識有限，我失敗了。將其投入混音只能完全關閉Facebox。我認爲這與我使用div而不是圖像的事實有關，但我不知道如何修改代碼。

任何幫助，將不勝感激。

編輯：

閱讀this post後，我試圖禁用我的迂迴所有的鏈接，這樣我可以逆向操作，以激活對焦項目。然而，另一個不行一切仍然是可點擊的。

這是我嘗試添加在我的腳本標記代碼：

$('ul#myRoundabout roundabout-in-focus a').unbind('click.facebox');

仍不能確定什麼錯在這裏。

編輯2：

試圖讓創意在這裏。我刪除了我的鏈接rel=facebox，並增加了以下我<script>標籤：

$('ul#myRoundabout li').focus(function(){ 
    $('ul#myRoundabout .roundabout-in-focus a').attr('rel','facebox'); 
});

我與這個希望是，該鏈接不會有facebox相對，直到他們在對焦，所以facebox止跌」當他們沒有注意力時，他們就會發布。再一次，沒有這樣的運氣。此方法關閉facebox，以使其根本不會啓動。我覺得我在這裏圍繞着答案跳舞......

來源

2011-12-14 SaraK

我有一個非常類似的問題（但只是聯繫，而不是與Facebox），以及管理使用下面的代碼位來解決這個問題：

function outOfFocus(event){ 
    $(event.target).children("a").on("click",function(event) 
     {event.target.parent.go(event)}); 
     }; 

function intoFocus(event){ 
    $(event.target).children("a").off("click"); 
    }; 

$(".roundabout-moveable-item").live('blur',outOfFocus); 
$(".roundabout-moveable-item").live('focus',intoFocus);

基本上，這使得它如此，當一個項目移動到後面，所有的鏈接被告知只是將點擊事件傳遞迴其父節點（所以環島仍然起作用）。當一個項目移動到前面時，會觸發'焦點'事件，並刪除特殊的覆蓋點擊，以便瀏覽器將其視爲正常鏈接。

正如我所說，它不是一個完全適合您的情況，因爲您需要使intoFocus方法以某種方式重新激活該鏈接的Facebox。您可能可以這樣做：

function intoFocus(event){ 
    $(event.target).children("a").facebox(); 
    };

要只是重新Facebox-itize的鏈接。我認爲，請仔細檢查一下，因爲它有可能爲鏈接添加重複的處理程序和屬性。

希望這至少有點幫助。

來源

2012-04-24 19:33:52 Sammy1Am

將jquery Roundabout與Facebox集成在一起

回答

相關問題