Question

我正在尝试使用Roundabout在我的投资组合中创建“精选项目”部分。我还附加了Facebox，以便当用户点击其中一个Roundabout项目时，它会在模态窗口中弹出隐藏的div。这一切都运作良好。

我的问题是所有项目都是可点击的，而不仅仅是焦点项目，并且在尝试旋转轮播时，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 rel，因此当facebox失焦时，facebox将无法启动。再一次，没有这样的运气。此方法关闭了facebox，使其根本无法启动。我觉得我在这里围绕着答案跳舞......

Answer 1

我遇到了一个非常类似的问题（但只是链接，而不是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链接。请仔细检查一下，因为它有可能在链接中添加重复的处理程序和属性，我认为。

希望这至少有点帮助。

将jquery Roundabout与Facebox集成

1 个答案: