将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集成在一起

回答

相关问题