Интеграция jquery Карусель с Facebox - PullRequest
Новая
       30

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

0 голосов
/ 14 декабря 2011

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

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

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

1 Ответ

0 голосов
/ 24 апреля 2012

У меня была очень похожая проблема (но только со ссылками, а не с 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.Я думаю, что проверяйте это внимательно, потому что у него есть потенциал для добавления дубликатов обработчиков и атрибутов в ссылку.

Надеюсь, это хотя бы несколько полезно.

...