Выберите несколько изображений из сетки миниатюр

Question

У меня есть сетка миниатюрных изображений в форме, и я хотел бы, чтобы пользователь мог выбрать несколько изображений, и чтобы их выбор был представлен вместе с формой.

Мои требования:

• Один щелчок, чтобы выбрать изображение, и выбор передается обратно пользователю, например, путем изменения границы.
• Изящно снижается до уровня HTML и продолжает работать.
• Поддержка нескольких браузеров / устройств (например, для работы на ipad)

Можно ли удовлетворить все мои требования?

спасибо.

Answer 1

Вы можете сделать это так: миниатюру и сверху или справа от нее вы поставите свой флажок.Затем с помощью jquery вы скрываете флажки и прикрепляете события кликов к миниатюрам, которые ставят и снимают флажки.таким образом, у вас есть поддержка браузеров, поддерживающих jquery и вообще не поддерживающих javascript.если браузер не поддерживает js, флажки не будут скрыты, и флажки можно будет использовать как обычно.если браузер сделает это, они будут скрыты, и вместо них будут использованы необычные действия js.

, например:

<div id="container1" class="container">
    <img>
    <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>
<div id="container2" class="container">
    <img>
    <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>

$(document).lad(function(){
    $(".container .cbox").hide();
    $(".container img").click(function(){
        //do the stuff you need to do like
       var $checkbox = $(this).parent().find(".cbox");
       $checkbox.attr('checked', !$checkbox.attr('checked'));
    });
});

Попробуйте.это может сработать, но я не даю никаких гарантий.

Answer 2

Для подхода javascript скрипка :

Разметка:

<div>
    <img data-id="1" src="" />
    <input type="hidden" name="images[ ]" />
</div>

Сценарий:

$('img').live('click', function(){
    var $this = $(this);
    $this.toggleClass('selected');

    if($this.hasClass('selected'))
        $this.next(':hidden').val($this.data('id'))
    else
        $this.next(':hidden').val('');
});

Answer 3

Если вам нужны такие причудливые вещи, как изменение цвета рамки выбранных миниатюр, вам понадобится JavaScript для этого. Особенно, если вам нужна кросс-браузерная поддержка.

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