Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz

Фильтр галереи изображений на JS + CSS
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
22.12.2023, 13:10
Фильтр галереи изображений на JS + CSS




Здесь представлен адаптивный фильтр для галереи изображений, rjnjhsq также отлично подойдет для портфолио, что выполнен с использованием JavaScript и CSS. Если кратко, то по сути мы создаем адаптивную систему под все мобильные экраны, а также большие мониторы идет данная фильтрации на галереи изображений, или раздела со страницей, где можно разместить изображение. Из функционала здесь присутствуют переключатели, что можно сделать под категории или под ключевые слова. Это создано для того, чтоб пользователь не искал из картинок то направление, что можно его переключить, и весь материал, виде картинок появится в данной галереи.

Это один из самых простых механизмов показа, что выставляем нужные категории, и под низ выставляем изображение, сколько разделов будет, это от вас зависит. Но сама структура сделана удобно для просмотра, здесь не сказать, что полная галерея или фотоальбом, так как его можно задействовать мод многочисленные тематики. Это простая галерея, или сделана под интернет магазин, где просто добавляем немного информации. Ведь основная идея идет, это по началу видим все скрины, что смешаны. И здесь включаем фильтрацию, где одни изображение пропадают, а которые нужны остаются, все потому, что мы изначально их закрепляли по ключевым словам

Как пример, переключили на другую темы категории:




Установка:

HTML

Код

<section class="galereya_kartinok">
  <div class="vesel_conaine">
  <div class="peres">
  <div class="keyne_obeniya">
  <span class="elemen_kadra unctioning" data-filter="shoe">Первая</span>
  <span class="elemen_kadra" data-filter="shoe">Вторая</span>
  <span class="elemen_kadra" data-filter="headphone">Третья</span>
  <span class="elemen_kadra" data-filter="camera">Четвертая</span>
  </div>
  </div>
  <div class="peres">
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus shoe">
  <div class="branvo_eynetus-inner">
  <img src="Здесь ссылка на изображение № 2" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus atuselemen">
  <div class="branvo_eynetus-inner">
  <img src="Здесь ссылка на изображение № 2" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus camera">
  <div class="branvo_eynetus-inner">
  <img src="Здесь ссылка на изображение № 3" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus atuselemen">
  <div class="branvo_eynetus-inner">
  <img src="Здесь ссылка на изображение № 4" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus camera">
  <div class="branvo_eynetus-inner">
  <img src="Здесь ссылка на изображение № 5" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  <!-- галерея картинок с элементом -->
  <div class="branvo_eynetus atuselemen">
  <div class="branvo_eynetus-inner">
<img src="Здесь ссылка на изображение № 6" alt="ключевая фраза">
  </div>
  </div>
  <!-- галерея картинок с элементом -->
  </div>
  </div>
</section>


CSS

Код

Код:
.vesel_conaine{
  max-width: 1168px;
  margin:auto;
}
.peres{
  display: flex;
  flex-wrap: wrap;
}
img{
  max-width: 100%;
  vertical-align: middle;
}
/*.galereya_kartinok*/
.galereya_kartinok{
  width: 100%;
  display: block;
  min-height: 100vh;
  background-color: #3a3844;
  padding: 100px 0;
}
.galereya_kartinok .keyne_obeniya{
  padding: 0 15px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.galereya_kartinok .keyne_obeniya .elemen_kadra{
  color: #f1eeee;
  font-size: 18px;
  text-transform: uppercase;
  display: inline-block;
  margin:0 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  line-height: 1.2;
  transition: all 0.3s ease;
}
.galereya_kartinok .keyne_obeniya .elemen_kadra.unctioning{
  color: #df8706;
  border-color : #df8706;
}
.galereya_kartinok .branvo_eynetus{
  width: calc(100% / 3);
  padding: 15px;
}
.galereya_kartinok .branvo_eynetus-inner img{
  width: 100%;
}
.galereya_kartinok .branvo_eynetus.show{
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}
.galereya_kartinok .branvo_eynetus.hide{
  display: none;
}

@media(max-width: 991px){
  .galereya_kartinok .branvo_eynetus{
  width: 50%;
  }
}
@media(max-width: 767px){
  .galereya_kartinok .branvo_eynetus{
  width: 100%;
  }  
  .galereya_kartinok .keyne_obeniya .elemen_kadra{
  margin-bottom: 10px;
  }
}


JS

Код

const filtervesel_conaine = document.querySelector(".keyne_obeniya"),
  galereya_kartinokItems = document.querySelectorAll(".branvo_eynetus");

  filtervesel_conaine.addEventListener("click", (event) =>{
  if(event.target.classList.contains("elemen_kadra")){
  // deactivate existing unctioning 'elemen_kadra'
  filtervesel_conaine.querySelector(".unctioning").classList.remove("unctioning");
  // activate new 'elemen_kadra'
  event.target.classList.add("unctioning");
  const filterValue = event.target.getAttribute("data-filter");
  galereya_kartinokItems.forEach((item) =>{
  if(item.classList.contains(filterValue) || filterValue === 'all'){
  item.classList.remove("hide");
  item.classList.add("show");
  }
  else{
  item.classList.remove("show");
  item.classList.add("hide");
  }
  });
  }
  });


На demo-страницы видно, как все меняется при клике на ключевое слово, что находится в самом верху. Где нет эффектов, а все идет в стандартном виде по смени категорий, но а с категорией меняются все закрепленные к ней изображение.

Демонстрация

Скачать Фильтр галереи изображений на JS + CSS
Категория: Скачать Скрипты для Ucoz бесплатно | Добавил: Kenik
Просмотров: 22 | Загрузок: 0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Анализ сайта skript-na-ucoz.ucoz.ru Top.Mail.Ru

Яндекс.Метрика
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 1196
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 10242
    Всего новостей: 31
    Всего статей: 0
    Темы форума: 2521
    Коментариев: 16
    Фотоальбом: 3
    Скачали: 10242
    Каталог сайтов: 35
    Онлайн Игр: 213
    Онлайн Видео: 8596
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером
    Популярное
    Скачиваемое
    Интерестное