Интеграция jquery Roundabout с Facebox

Question

Я пытаюсь создать раздел «Featured items» на моем портфолио, используя 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 вместо изображений, но я не знаю, как адаптировать код.

Любая помощь будет оценена по достоинству.

---

EDIT:

После прочтения this post я пытался отключить все ссылки на мой кольцевой, так что я мог бы работать в обратном направлении, чтобы активировать этот пункт в фокусе. Однако другой не-гоу; все было доступно для кликов.

Это код, который я пытался добавить в мои теги сценария:

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

До сих пор не уверен, что происходит здесь не так.

---

Edit 2:

Попытка получить творческие здесь. Я удалил rel=facebox из моих ссылок, и добавил следующее к моему <script> тегу:

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

Моя надежда с этим было то, что ссылки не будут иметь facebox отн, пока они не были в фокусе, так facebox Wouldn» когда они были не в фокусе. Еще раз, нет такой удачи. Этот метод закрыл 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); 

В основном это делает так, что, когда элемент перемещается в обратную сторону, всем связям говорят, чтобы просто передавать события щелчка обратно их родителям (так что кольцевая развязка все еще функционирует). Когда элемент перемещается на передний план, происходит событие «focus», и я удаляю специальный верхний щелчок, чтобы браузер рассматривал его как обычную ссылку.

Как я уже сказал, это не подходит для вашей ситуации, так как вам нужно сделать метод inFocus каким-то образом активировать Facebox для этой ссылки. Вы могли быть в состоянии сделать что-то вроде:

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

Чтобы просто повторно Facebox-itize ссылки. Я считаю, что это тщательно, потому что у него есть потенциал для добавления дубликатов обработчиков и атрибутов в ссылку.

Надеюсь, что это по крайней мере несколько полезно.