Плагин jQuery ColorBox в пользовательском интерфейсе - PullRequest
Новая
       22

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

2 голосов
/ 02 февраля 2012

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

Я работал с сочетанием аккордеона jquery UI и 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, но не сам аккордеон.

Приветствие.

1 Ответ

3 голосов
/ 03 февраля 2012

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

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

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

<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, не открывая панель аккордеона.

...