Как реализовать такой блок с галереей и ajax контентом?

Question

[Danya Wyse]

Помогите , как сделать такую галерею с переходом на другие картинки и кнопкой подгрузки?

Comments

[Михаил]

Ваш вопрос максимально некорректен.
Вряд ли кто-то сядет Вам разжевывать все нюансы создания подобного.
Начните изучать html, css, js и уже задавайте конкретные вопросы в отдельных частях реализации.
Никто не будет реально отвечать на вопрос "Как построить дом?", т.к. есть куча подводных камней и различных решений, но на вопрос "Как укладывать кирпич?" найти ответ куда проще.
Делите один большой вопрос на несколько, в идеале если они максимально не будут связаны между собой, таким образом задав отдельные вопросы Вы получите нужные ответы и по кусочкам соберете свое решение.

[Danya Wyse]

Михаил, я что тут некорректного ??? При клике на "Web Design" должны выходить 9 картинок данной тематики и т.д
при клике на load more подгружаются все галереи ниже

[Danya Wyse]

Михаил, реально,помогите пожалуйста .Хотя бы как правильно поставить вопрос чтобы сообщество поняло меня?
Я пытался сам сделать эту галерею, подгрузка работает, кнопки работают.Но это все сидело на isotope и очень криво , оно никак не хотело сидеть внутри контейнера и растягивалось во всю ширину экрана + адаптив никакой.

[Михаил]

Даниил Вайс, Предлагаю Вам начать с реализации странички без какого-либо функционала.
Просто страничка html. Если будут возникать вопросы с этим - их и задавайте. Например "Как расположить элементы таким образом как на картинке".
После того, как страничка будет готова уже можете задавать вопросы о том, как повесить обработчик на кнопки и т.д.

[Danya Wyse]

Михаил, я сделал давно уже этот макет originalwyse.ru/waxom но не реализовал все фишки на нем

[Михаил]

Даниил Вайс, С этого и надо было начинать. По вопросу выше первое что думаешь, будто парень нашел скриншот в интернете и спрашивает как это сделать, при этом навыков вообще нет.
Данные откуда брать собираетесь?
Чтобы понимать какую кнопку нажали, можно дописать атрибут id для каждой кнопки.
И как вариант можно повесить обработчик на все верхние кнопки. Типа:

$("#portfolio .our-block__ul li").click({
      let id = $(this).attr("id"); // получили id кнопки, на которую нажали
      // далее берем данные, соответствующие нажатой кнопке и обертываем в блоки как в галерее
      $(".gallery").append(blocksWithNewData); // добавляеем в конец галереи новые блоки
});

Как то так.
Чтобы сказать как получать данные, мне нужно узнать где они у Вас хранятся

[Danya Wyse]

Михаил, ну все данные у меня в одном месте , чтобы было понятнее я могу прислать архив , либо сделать на codepen блок с этой галереей .
Вот так выглядит папка с сайтом

[Danya Wyse]

Михаил, чтобы было удобнее, наверное , я сделаю блок на codepen, дайте время

[Danya Wyse]

Михаил, https://codepen.io/iwyse/pen/rbZRaJ
Вот, вроде насадил.Просто мне реально нужна помощь,особенно с ajax, я не из таких "сделайте все за меня" . Ну за то что мало конкретики и не кинул код,виноват.Учту в будущем

[Михаил]

Даниил Вайс, Данные в основном хранят в БД. Полагаю с ней Вы работать не умеете.
Могу предложить на первое время такой вариант:
создать файл и положить туда данные в JSON - о json,
далее получить их из этого файла - как получить данные
Положить данные в глобальный массив - массивы, объекты. На выходе у Вас должен получиться массив объектов. Например такой:

[
	{
		imgPreview: "Ссылка на картинку",
		textTitle: "Заголовок",
		textSmall: "Текст"
	},
	{
		imgPreview: "Ссылка на картинку",
		textTitle: "Заголовок",
		textSmall: "Текст"
	},
	{
		imgPreview: "Ссылка на картинку",
		textTitle: "Заголовок",
		textSmall: "Текст"
	}
]

Далее сделайте функцию, которая бы выбирала нужное количество объектов из массива (Вам же не нужны разом все блоки для вывода в галерею)
После этого каждый из этих блоков оберните в html и добавьте на страницу - добавить элементы на страницу
Обернуть в html можно в лоб примерно так:

function wrapDataToGalleryBlock(obj) {
    return '<div class="gallery-block">' +
	'<a class="grouped_elements" rel="group1" href="'+obj.imgPreview+'"> ' +
	'<img src="'+obj.imgPreview+'" alt=""/><i class="fas fa-search"></i></a> ' +
	'<div class="gallery-block-desc"> ' +
	'<h4 class="gallery-block-desc__title">'+obj.textTitle+'</h4> ' +
	'<p class="gallery-block-desc__small">'+obj.textSmall+'</p> ' +
	'</div> ' +
	'</div> ';
}

Далее повесишь обработчик click на load more и используешь на ней уже написанную функцию получения нужных данных, обернешь и добавишь.
Как повесить на элемент обработчик событий

После данной реализации уже можно смотреть в сторону базы данных, скрипта php который будет возвращать данные из БД. Вам лишь нужно будет обернуть эти данные и вывести.