Добавка jQuery ColorBox в заглавка на акордеон на потребителския интерфейс

Първо, това е, което се опитвам да постигна: имам списък с обекти с палец на изображение и малко основна информация. Можете да щракнете върху изображението, за да видите голямата версия на изображението, или където и да е другаде в информацията за обекта, за да разгънете DIV с много допълнителна информация за обекта.

Имах това да работи с комбинация от jquery UI accordion и yoxview, но yoxview ми причиняваше толкова много болка в няколко браузъра, че реших да го заменя с ColorBox.

Сега е проблемът, при мен това работи, но когато човек щракне върху изображението, ColorBox се отваря както трябва, но също така задейства акордеона, което, разбира се, не трябва. Защото, например, ако щракнете върху отваряне на допълнителната информация и след това щракнете върху палеца, за да видите изображението увеличено, акордеонът се затваря, което наистина прави болка вместо бриз да навигирате и проверявате тези обекти.

Ето как се настройва:

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
      <a href="/bgsomeplace_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="/bgsomplace_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