Как реализовать ajax загрузку блоков кликом по вертикальному слайдеру и как реализовать фильтрацию контента в загруженном блоке?

Question

[Роман Скобцов]

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

Для наглядности скриншот

Answer 1

[Денис Инешин]

Пример как сделать фильтрацию: jsfiddle.net/b33wT

По поводу ajax загрузки.
1. Повесьте на каждую картинку слева класс, например: js-click, а так же атрибут со урлом для загрузки данных, например: data-url="/server/data.php" или что-то в этом роде.
2. Повесьте обработчик на клик на класс js-click: $(".js-click").on("click", on_click);
3. Создайте функцию on_click
4. Внутри функции напишите:

var on_click = function () {
    var url = $(this).data("url");
    $.ajax({
        url: url,
        complete: on_ready
    });
};

5. Создайте функцию on_ready:

var on_ready = function (result) {
    $("#content").html(result);
};

Как то так )

Comments

[Роман Скобцов]

На счет фильтрации
.А как сделать так чтобы фильтрация производилась не по одному пункту а по нескольким?тоесть нужно чтобы отображались например из Молотков,кошек и Гиен,только Молотки и кошки?

По поводу ajax
обязательно php?или может быть html?

[Денис Инешин]

@djromeo91 пример сделан на кнопочках, а вы можете сделать не чекбоксах, тогда хоть все разом.

Да хоть .json, лишь бы отдавал данные в нужном вам виде.

[Роман Скобцов]

Хорошо,с этим вопросом понял,спс большое.Попробую