Галерея изображений

Это галерея изображений на CSS. Эскизы изначально расположены в контейнере до тех пор, пока пользователь не нажал кнопку мыши, чтобы извлечь и показать изображение с большим размером и эффектом тени. Быстро переключаться между эскизами можно с помощью клавиши «Tab». Галерея работает в современных версиях Chrome, Firefox, Safari, IE и др.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.gallery li{
  display: block;
  width: 280px; /* width of gallery */
  height: 70px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
	filter: url(#grayscale); 
  filter: grayscale(1);
	-webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
	-moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
	outline: none;
	-webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
	-moz-transform: rotate(3deg);
	transform: rotate(3deg); 
	pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
	-webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
	-moz-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
	outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); 
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}
</style>

2. А этот код скопируйте и расположите в разделе body:

<svg version="1.1" xmlns="//www.w3.org/2000/svg">
	<filter id="grayscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0 0 0 1 0">
	</filter>
<ul class="gallery" title="">
<li tabindex="1"><img src="img/Grayscale1.jpg" alt=""></li>
<li tabindex="2"><img src="img/Grayscale2.jpg" alt=""></li>
<li tabindex="3"><img src="img/Grayscale3.jpg" alt=""></li>
<li tabindex="4"><img src="img/Grayscale4.jpg" alt=""></li>
<li tabindex="5"><img src="img/Grayscale5.jpg" alt=""></li>
<li tabindex="6"><img src="img/Grayscale6.jpg" alt=""></li>
<li tabindex="7"><img src="img/Grayscale7.jpg" alt=""></li>
</ul>

Демо-изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом вашей страницы. Проверьте корректность работы галереи и замените изображения на свои.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки