Интеграция jquery Карусель с Facebox

Question

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

Я нашел связанный вопрос здесь. Рабочим решением была строка, добавленная в скрипт:

$('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 вместо изображений, но я не знаю, как адаптировать код.

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

---

РЕДАКТИРОВАТЬ:

После прочтения этого поста я попытался отключить все ссылки в моей кольцевой развязке, чтобы я мог вернуться назад, чтобы снова активировать элемент, находящийся в фокусе. Другой не ходят однако; все было по-прежнему кликабельно.

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

$('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, чтобы он вообще не запускался. Я чувствую, что я танцую в кругах вокруг ответа здесь...

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', и я удаляю специальный переопределяющий щелчок, чтобы браузер воспринимал его как обычную ссылку.

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

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

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

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