Проблемы с созданием галереи со списками, jquery и большим количеством переключений - PullRequest
Новая
       23

Проблемы с созданием галереи со списками, jquery и большим количеством переключений

0 голосов
/ 16 февраля 2011

Так что я гуглял, но просто еще не нашел хорошего решения для этого макета.

То, что я пытаюсь сделать, это как галерея. Сначала большие пальцы, затем большие под большим пальцем.

Проблема в том, чтобы разделить разные события.

  1. Клик без видимого div. (Сдвиньте выбранный div)
  2. Клик с видимым div. (Переход к новому разделу. Скрыть старый, затем показать новый или что-то)
  3. Щелчок с уже выбранным div. (Сдвиньте выбранный div)

Мы боролись с различными решениями, но они либо глючные, либо иногда не реагируют на щелчки.

Базовая структура на данный момент: 

<ul>
    <li id="case1">Thumb1</li>
    <li id="case2">Thumb2</li>
    <li id="case3">Thumb3</li>
</ul>

<div id="case1box">Content</div>
<div id="case2box">Content</div>
<div id="case3box">Content</div>

Затем повторяя этот фрагмент. Любое лучшее решение, так как это UL (3xLI), затем DIV, UL (3xLI), а затем DIV?

Есть мысли о переключении и как его решить?

Состояние по умолчанию: Default state

При нажатии: Clicked state

Ответы [ 2 ]

0 голосов
/ 16 февраля 2011

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

Посмотрите живую демонстрацию : http://jsfiddle.net/pNaCH/1/

Вот общий обзор. Ключ в добавлении классов к различным предметам.

JS 

$('.thumb').click(function(){
    var id = $(this).attr('id');
    $('.large:visible').slideUp('fast');
    $('#' + id + 'box').slideDown('fast');
});

HTML 

<table>
<tr><td>

    <ul>
        <li id="case1" class="thumb">Thumb1</li>
        <li id="case2" class="thumb">Thumb2</li>
        <li id="case3" class="thumb">Thumb3</li>
    </ul>

</td></tr><tr><td>    

    <div id="case1box" class="large">Content1</div>
    <div id="case2box" class="large">Content2</div>
    <div id="case3box" class="large">Content3</div>

</td></tr><tr><td>

    <ul>
        <li id="case4" class="thumb">Thumb4</li>
        <li id="case5" class="thumb">Thumb5</li>
        <li id="case6" class="thumb">Thumb6</li>
    </ul>

</td></tr><tr><td>    

    <div id="case4box" class="large">Content4</div>
    <div id="case5box" class="large">Content5</div>
    <div id="case6box" class="large">Content6</div>

</td></tr>
</table>
0 голосов
/ 16 февраля 2011

Я отвечу на ваше поведение один за другим и в псевдокоде.Я предполагаю, что вы знаете достаточно jquery до дальнейшего уведомления:)

Клик без видимого div.(Сдвиньте выбранный div) - легко, поместите класс и идентификатор на свой список.затем свяжите функцию переключения с этим классом: 

 $(".classofli").toggle(function() {
   //get id of current li using attr('id'), parse the number, something like picture_1 or whatever
   //$("#"+idofdivtoslide).slideToggle();
 })

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

какПункт 2: Щелчок с видимым div. (Переход к новому div. Скрыть старый, затем показать новый или что-то еще)

имеет переменную, которая хранит ваш последний выбранный div, и функцию, которая закрывает открытые div (с большим изображением). 

var lastSelected;

//in your toggle function, check if the id of your current thing was the last you clicked, if yes, just call slideToggle. if no, close all open divs, and call slide toggle on current one.
//don't forget to set the lastSelected variable to the id of the item you clicked!

Надеюсь, что вы укажете правильное направление

...