Плагин jQuery ColorBox в заголовке аккордеона пользовательского интерфейса

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

У меня это работало с комбинацией аккордеона пользовательского интерфейса jquery и yoxview, но yoxview доставлял мне столько боли в нескольких браузерах, что я решил заменить его на ColorBox.

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

Вот как это настроено:

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
      <a href="someplace_thumb.jpg" title="some title" class="group1">
        <img src="somplace_large.jpg" />
      </a>
    </span>
    <div class="list-basic-details">
      The basic explanation comes here
    </div>
  </div>
  <div class="list-extra-detail">
    All the rest of the information in the panel of the accordion
  </div>
</div>

В готовом документе у меня есть это:

$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

и для ColorBox:

$(".group1").colorbox({rel:'group1'});

(Я использую rel, потому что возможно, что для одного объекта есть несколько изображений, я упростил свой пример html)

Чтобы убедиться, что при нажатии на изображение я обычно использую код в этой строке:

$(".group1").click(function(e){ e.stopPropagation(); });

Тем не менее, я пробовал stopPropagation множеством способов, но каждая попытка саботировала ColorBox. Большие изображения открываются нормально, но в самом окне, а не в лайтбоксе, как надо.

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

Я был бы очень признателен за любую помощь в том, чтобы сделать так, чтобы, хотя изображение (ссылка) находилось внутри заголовка аккордеона, щелчок по нему вызывал ColorBox, но не сам аккордеон.

Ваше здоровье.


jquery colorbox stoppropagation jquery-plugins jquery-ui-accordion
person Peter    schedule 02.02.2012    source источник
comment
Довольно сложно визуализировать ваш пользовательский интерфейс; возможно, предоставьте ссылку или заполните описание варианта использования. Но, судя по звуку, вам нужно уметь более тщательно различать состояние модели пользовательского интерфейса при каждом конкретном щелчке. Я обычно использую Pub/Sub и события для реализации этого.   -  person CSSian    schedule 02.02.2012
comment
Я понимаю, что это сложно, но, к сожалению, мне не разрешено публиковать ссылку на этот проект, а значит, мне нужно где-то создать муляж этой довольно сложной структуры. Я посмотрю на ваш совет по пабу/сабу, и если я не смогу разобраться, мне придется поставить этот манекен.   -  person Peter    schedule 03.02.2012

Ответы (1)


arrow_upward
3
arrow_downward

Хорошо, это заняло у меня некоторое время, но я решил проблему. Я не говорю, что это решение очень чистое, похоже, оно работает, и к тому же кроссбраузерное.

Ключом к моему решению было удаление ссылок ColorBox из заголовка аккордеона. Тем не менее, мне все еще нужен большой палец внутри этого заголовка, чтобы пользователь мог щелкнуть, чтобы открыть увеличенную версию изображения (и просмотреть в ColorBox другие изображения, если они доступны) без открытия панели аккордеона!

Это то, что я сделал, сначала я восстановил аккордеон. Я сохранил большой палец, но удалил ссылку, которая вызывала вокруг него ColorBox. Затем я добавил эту ссылку на панель вместо этого, но в скрытом div.

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
        <img src="somplace_thumb.jpg" class="img-thumb" rel="group1"/>
    </span>
    <div class="list-basic-details">
      The basic explanation comes here
    </div>
  </div>
  <div class="list-extra-detail">
    <div class="hidden-img-links">                       
      ** all my  image links in this format **
     <a class="group1" href="somplace_large.jpg" title="some text">name</a>
    </div>
    All the rest of the information in the panel of the accordion
  </div>
</div>

Теперь я использую следующий код js в своем готовом документе:

$('a.group1').colorbox( {rel: group1});     

$(".img-thumb").click( function( event ){
    $( '.' + $(this).attr('rel') + ':first' ).click();
    return false;
})

// of het nu items of veilingen bevat, de item accordion moet opgestart
$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

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

person Peter    schedule 03.02.2012