Слайдер для сайта | CSS


<style>
input[name="raz"] {display: none;}

.gallery {position: relative; padding-top: 45%; margin: 3em 2.3em 4.5em; background: no-repeat 50% 50%; background-size: 100% 100%;} /* стиль блока */

.gallery label {display: inline-block; width: 20%; height: 4em; margin-bottom: -4.5em; background: no-repeat 50% 50%; background-size: 99% 97%; opacity: .5; cursor: pointer;} /* стиль миниатюры */
.gallery label:hover {opacity: .85;} /* стиль при наведении на миниатюру */
#raz1:checked ~ .gallery [for="raz1"], /* стиль активного пункта */
#raz2:checked ~ .gallery [for="raz2"],
#raz3:checked ~ .gallery [for="raz3"],
#raz4:checked ~ .gallery [for="raz4"],
#raz5:checked ~ .gallery [for="raz5"],
#raz6:checked ~ .gallery [for="raz6"],
#raz7:checked ~ .gallery [for="raz7"] {opacity: 1; cursor: default; background-size: 70% 70%;}

#raz1:checked ~ .gallery, .gallery [for="raz1"] {background-image: url(адрес_изо);}
#raz2:checked ~ .gallery, .gallery [for="raz2"] {background-image: url(адрес_изо);}
#raz3:checked ~ .gallery, .gallery [for="raz3"] {background-image: url(адрес_изо);}
#raz4:checked ~ .gallery, .gallery [for="raz4"] {background-image: url(адрес_изо);}
#raz5:checked ~ .gallery, .gallery [for="raz5"] {background-image: url(адрес_изо);}
#raz6:checked ~ .gallery, .gallery [for="raz6"] {background-image: url(адрес_изо);}
#raz7:checked ~ .gallery, .gallery [for="raz7"] {background-image: url(адрес_изо);}

.gallery label:before { /* абзац создаёт кнопки-стрелки, которые можно и не использовать */
 position: absolute; bottom: -4em; border-width: 2em 1em; border-style: solid;}
#raz1:checked ~ .gallery [for="raz2"]:before, 
#raz2:checked ~ .gallery [for="raz3"]:before,
#raz3:checked ~ .gallery [for="raz4"]:before,
#raz4:checked ~ .gallery [for="raz5"]:before,
#raz5:checked ~ .gallery [for="raz6"]:before,
#raz6:checked ~ .gallery [for="raz7"]:before,
#raz7:checked ~ .gallery [for="raz1"]:before {content: ""; right: -2.3em; border-color: transparent transparent transparent #686868; box-shadow: -2px 0 0 -1px #000;}
#raz1:checked ~ .gallery [for="raz7"]:before,
#raz2:checked ~ .gallery [for="raz1"]:before,
#raz3:checked ~ .gallery [for="raz2"]:before,
#raz4:checked ~ .gallery [for="raz3"]:before,
#raz5:checked ~ .gallery [for="raz4"]:before,
#raz6:checked ~ .gallery [for="raz5"]:before,
#raz7:checked ~ .gallery [for="raz6"]:before {content: ""; left: -2.3em; border-color: transparent #686868 transparent transparent; box-shadow: 2px 0 0 -1px #000;}

#raz1:checked ~ .gallery [for="raz1"]:after, /* абзац создаёт названия к изображениям, которые можно и не использовать */
#raz2:checked ~ .gallery [for="raz2"]:after,
#raz3:checked ~ .gallery [for="raz3"]:after,
#raz4:checked ~ .gallery [for="raz4"]:after,
#raz5:checked ~ .gallery [for="raz5"]:after,
#raz6:checked ~ .gallery [for="raz6"]:after,
#raz7:checked ~ .gallery [for="raz7"]:after {content: attr(title); position: absolute; top: -2em; left: 0; width: 100%; text-align: center; font-weight: 900;}

#raz1:checked ~ .gallery label:nth-of-type(n+6), /* абзац определяет наличие миниатюры */
#raz2:checked ~ .gallery label:nth-of-type(n+7),
#raz2:checked ~ .gallery label:nth-of-type(-n+1),
#raz3:checked ~ .gallery label:nth-of-type(n+8),
#raz3:checked ~ .gallery label:nth-of-type(-n+2),
#raz4:checked ~ .gallery label:nth-of-type(n+9),
#raz4:checked ~ .gallery label:nth-of-type(-n+3),
#raz5:checked ~ .gallery label:nth-of-type(n+10),
#raz5:checked ~ .gallery label:nth-of-type(-n+4),
#raz6:checked ~ .gallery label:nth-of-type(n+11),
#raz6:checked ~ .gallery label:nth-of-type(-n+5),
#raz7:checked ~ .gallery label:nth-of-type(-n+6) {width: 0%;}
</style>

<input type="radio" checked="checked" name="raz" id="raz1"/><input type="radio" name="raz" id="raz2"/><input type="radio" name="raz" id="raz3"/><input type="radio" name="raz" id="raz4"/><input type="radio" name="raz" id="raz5"/><input type="radio" name="raz" id="raz6"/><input type="radio" name="raz" id="raz7"/>

<div class="gallery"><label for="raz6" title="название6"></label><label for="raz7" title="название7"></label><label for="raz1" title="название1"></label><label for="raz2" title="название2"></label><label for="raz3" title="название3"></label><label for="raz4" title="название4"></label><label for="raz5" title="название5"></label><label for="raz6" title="название6"></label><label for="raz7" title="название7"></label><label for="raz1" title="название1"></label><label for="raz2" title="название2"></label></div>

Модификация этого слайдера на CSS (см. комментарии). То есть в наличии 7 миниатюр. Может быть больше, но нужно будет добавлять CSS по аналогии (см. пример ниже для сравнения). 5 видны глазу, остальные при прокрутки. Прокрутка бесконечна, а не от начала до конца. В центре большое изображение, наверху его название. Выбор главной картинки возможен как по стрелкам, так и по нажатию на конкретную фотографию. Вёрстка как всегда резиновая.

Анимированный вариант может выглядеть, например, так


<style>
input[name="dva"] {display: none;}

.gallery2 {position: relative; padding-top: 45%; margin: 3em 2.3em 4.5em; background-position: 50% 0, 50% 100%, 0% 50%, 100% 50%, 50% 50%; background-repeat: no-repeat; background-size: 0 0, 0 0, 0 0, 0 0, 100% 100%;} /* стиль блока */

/* анимация большой картинки */
input[name="dva"]:nth-child(even):checked ~ .gallery2 {-webkit-animation: animaciya 1s;} 
input[name="dva"]:nth-child(odd):checked ~ .gallery2 {-webkit-animation: animaciya1 1s;}
@-webkit-keyframes animaciya {
  0% {background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%, 100% 100%;}
  100% {background-size: 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%;}
}
@-webkit-keyframes animaciya1 {
  0% {background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%, 100% 100%;}
  100% {background-size: 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%;}
}
input[name="dva"]:nth-child(even):checked ~ .gallery2 {animation: animaciya forwards 1s;}
input[name="dva"]:nth-child(odd):checked ~ .gallery2 {animation: animaciya1 forwards 1s;}
@keyframes animaciya {
  0% {background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%, 100% 100%;}
  100% {background-size: 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%;}
}
@keyframes animaciya1 {
  0% {background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%, 100% 100%;}
  100% {background-size: 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%;}
}

.gallery2 label {display: inline-block; width: 20%; height: 4em; margin-bottom: -4.5em; background-repeat: no-repeat; background-position: 0 0, 0 100%, 100% 0, 100% 100%, 50% 50%; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 99% 97%; cursor: pointer; transition: .5s linear;} /* transition: .5s linear; делает смену миниатюр плавным, но возвращает к первому пункту обратной прокруткой */
.gallery2 label:hover {background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 100%;} /* стиль при наведении на миниатюру */
#dva1:checked ~ .gallery2 [for="dva1"], /* стиль активного пункта */
#dva2:checked ~ .gallery2 [for="dva2"],
#dva3:checked ~ .gallery2 [for="dva3"],
#dva4:checked ~ .gallery2 [for="dva4"],
#dva5:checked ~ .gallery2 [for="dva5"],
#dva6:checked ~ .gallery2 [for="dva6"],
#dva7:checked ~ .gallery2 [for="dva7"],
#dva8:checked ~ .gallery2 [for="dva8"],
#dva9:checked ~ .gallery2 [for="dva9"],
#dva10:checked ~ .gallery2 [for="dva10"],
#dva11:checked ~ .gallery2 [for="dva11"],
#dva12:checked ~ .gallery2 [for="dva12"] {cursor: default; background-size: 0 0, 0 0, 0 0, 0 0, 70% 70%;}

/* сделать фоновую дымку, полупрозрачный слой, который исчезает
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)), */
.gallery2 [for="dva1"], #dva1:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva2"], #dva2:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva3"], #dva3:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva4"], #dva4:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva5"], #dva5:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva6"], #dva6:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva7"], #dva7:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva8"], #dva8:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva9"], #dva9:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva10"], #dva10:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva11"], #dva11:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}
.gallery2 [for="dva12"], #dva12:checked ~ .gallery2 {
  background-image:
 radial-gradient(circle at right bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at right top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left bottom, rgba(255,255,255,.7), rgba(255,255,255,0)),
 radial-gradient(circle at left top, rgba(255,255,255,.7), rgba(255,255,255,0)),
 url(адрес_изо);
}

.gallery2 label:before { /* абзац создаёт кнопки-стрелки, которые можно и не использовать */
 position: absolute; bottom: -4em; border-width: 2em 1em; border-style: solid;}
#dva1:checked ~ .gallery2 [for="dva2"]:before, 
#dva2:checked ~ .gallery2 [for="dva3"]:before,
#dva3:checked ~ .gallery2 [for="dva4"]:before,
#dva4:checked ~ .gallery2 [for="dva5"]:before,
#dva5:checked ~ .gallery2 [for="dva6"]:before,
#dva6:checked ~ .gallery2 [for="dva7"]:before,
#dva7:checked ~ .gallery2 [for="dva8"]:before,
#dva8:checked ~ .gallery2 [for="dva9"]:before,
#dva9:checked ~ .gallery2 [for="dva10"]:before,
#dva10:checked ~ .gallery2 [for="dva11"]:before,
#dva11:checked ~ .gallery2 [for="dva12"]:before,
#dva12:checked ~ .gallery2 [for="dva1"]:before {content: ""; right: -2.3em; border-color: transparent transparent transparent #686868; box-shadow: -2px 0 0 -1px #000;}
#dva1:checked ~ .gallery2 [for="dva12"]:before,
#dva2:checked ~ .gallery2 [for="dva1"]:before,
#dva3:checked ~ .gallery2 [for="dva2"]:before,
#dva4:checked ~ .gallery2 [for="dva3"]:before,
#dva5:checked ~ .gallery2 [for="dva4"]:before,
#dva6:checked ~ .gallery2 [for="dva5"]:before,
#dva7:checked ~ .gallery2 [for="dva6"]:before,
#dva8:checked ~ .gallery2 [for="dva7"]:before,
#dva9:checked ~ .gallery2 [for="dva8"]:before,
#dva10:checked ~ .gallery2 [for="dva9"]:before,
#dva11:checked ~ .gallery2 [for="dva10"]:before,
#dva12:checked ~ .gallery2 [for="dva11"]:before {content: ""; left: -2.3em; border-color: transparent #686868 transparent transparent; box-shadow: 2px 0 0 -1px #000;}

#dva1:checked ~ .gallery2 [for="dva1"]:after, /* абзац создаёт названия к изображениям, которые можно и не использовать */
#dva2:checked ~ .gallery2 [for="dva2"]:after,
#dva3:checked ~ .gallery2 [for="dva3"]:after,
#dva4:checked ~ .gallery2 [for="dva4"]:after,
#dva5:checked ~ .gallery2 [for="dva5"]:after,
#dva6:checked ~ .gallery2 [for="dva6"]:after,
#dva7:checked ~ .gallery2 [for="dva7"]:after,
#dva8:checked ~ .gallery2 [for="dva8"]:after,
#dva9:checked ~ .gallery2 [for="dva9"]:after,
#dva10:checked ~ .gallery2 [for="dva10"]:after,
#dva11:checked ~ .gallery2 [for="dva11"]:after,
#dva12:checked ~ .gallery2 [for="dva12"]:after {content: attr(title); position: absolute; top: -2em; left: 0; width: 100%; text-align: center; font-weight: 900;}

#dva1:checked ~ .gallery2 label:nth-of-type(n+6), /* абзац определяет наличие миниатюры */
#dva2:checked ~ .gallery2 label:nth-of-type(n+7),
#dva2:checked ~ .gallery2 label:nth-of-type(-n+1),
#dva3:checked ~ .gallery2 label:nth-of-type(n+8),
#dva3:checked ~ .gallery2 label:nth-of-type(-n+2),
#dva4:checked ~ .gallery2 label:nth-of-type(n+9),
#dva4:checked ~ .gallery2 label:nth-of-type(-n+3),
#dva5:checked ~ .gallery2 label:nth-of-type(n+10),
#dva5:checked ~ .gallery2 label:nth-of-type(-n+4),
#dva6:checked ~ .gallery2 label:nth-of-type(n+11),
#dva6:checked ~ .gallery2 label:nth-of-type(-n+5),
#dva7:checked ~ .gallery2 label:nth-of-type(n+12),
#dva7:checked ~ .gallery2 label:nth-of-type(-n+6),
#dva8:checked ~ .gallery2 label:nth-of-type(n+13),
#dva8:checked ~ .gallery2 label:nth-of-type(-n+7),
#dva9:checked ~ .gallery2 label:nth-of-type(n+14),
#dva9:checked ~ .gallery2 label:nth-of-type(-n+8),
#dva10:checked ~ .gallery2 label:nth-of-type(n+15),
#dva10:checked ~ .gallery2 label:nth-of-type(-n+9),
#dva11:checked ~ .gallery2 label:nth-of-type(n+16),
#dva11:checked ~ .gallery2 label:nth-of-type(-n+10),
#dva12:checked ~ .gallery2 label:nth-of-type(-n+11) {width: 0%;}
</style>

<input checked="checked" name="dva" id="dva1" type="radio"><input name="dva" id="dva2" type="radio"><input name="dva" id="dva3" type="radio"><input name="dva" id="dva4" type="radio"><input name="dva" id="dva5" type="radio"><input name="dva" id="dva6" type="radio"><input name="dva" id="dva7" type="radio"><input name="dva" id="dva8" type="radio"><input name="dva" id="dva9" type="radio"><input name="dva" id="dva10" type="radio"><input name="dva" id="dva11" type="radio"><input name="dva" id="dva12" type="radio">

<div class="gallery2"><label for="dva11" title="название11"></label><label for="dva12" title="название12"></label><label for="dva1" title="название1"></label><label for="dva2" title="название2"></label><label for="dva3" title="название3"></label><label for="dva4" title="название4"></label><label for="dva5" title="название5"></label><label for="dva6" title="название6"></label><label for="dva7" title="название7"></label><label for="dva8" title="название8"></label><label for="dva9" title="название9"></label><label for="dva10" title="название10"></label><label for="dva11" title="название11"></label><label for="dva12" title="название12"></label><label for="dva1" title="название1"></label><label for="dva2" title="название2"></label></div>


в f t
наверх ↑

31 комментарий:

Анонимный
Для необязательного ради, но перфекционизма для... можно добавить плавность движения прокрутки (как у №3 вот тут http://shpargalkablog.ru/2012/12/scrolling-css.html )
И если возможно эффект плавной смены для большой картинки (например "вспышка", или "проявление", или "сдвиг"), не медленный, но так чтоб была просто заметна плавная смена (0,5 секунды будет достаточно, не больше). :)))
NMitra
"плавность движения прокрутки" - добавить transition: 1s linear; в .gallery label
NMitra
Для основной картинки можно сделать так:

input[name="raz"]:checked:nth-child(even) ~ .gallery {animation: animaciya 1s;}

@keyframes animaciya {
from {background-size: auto 50%;}
to {background-size: auto 100%;}
}

input[name="raz"]:checked:nth-child(odd) ~ .gallery {animation: animaciya1 1s;}

@keyframes animaciya1 {
from {background-size: auto 50%;}
to {background-size: auto 100%;}
}

Не забудьте вариант с -webkit- для Хрома
NMitra
Ээээ.. Вот так, по-моему, логичнее

input[name="raz"]:nth-child(even):checked

Работают оба варианта
Aldous Snow
А что все примеры потеряли пропорции? :)
NMitra
Я решила показать всевозможные виды. Да, мне с правильными пропорциями тоже больше нравится, но есть и те, которые хотят такой вариант. В коде слайдера достаточно
background-size: 100% 100%;
заменить на
background-size: auto 100%;
NMitra
Причём обрати внимание, что у большой картинки и миниатюр фоновое затемнение меняется по разному.
NMitra
Можно просто сверху вниз или справа налево пустить, но четыре стороны мне нравятся больше
ITprime
Или вот так http://youtu.be/8WwOXn3w2Ww
Только что периходил по ссылкам на ютубе и нашол. Правда там говорят что управлять нельзя но тоже без скриптов
NMitra
Там ещё проще код. Сложнее, если 3D эффекты используются, но там поддержка браузерами пока слаба, поэтому не выкладываю.
вадим костюк
Извините, а как добавить количество фотографий?
NMitra
Нужно немного менять CSS, посмотрите пример ниже, там картинок больше
Артем Вядемко
Можно ли вместо картинок вставлять видео с ютюба?
NMitra
А такой не подойдёт http://shpargalkablog.ru/2011/01/youtube.html ?
Артем Вядемко
Честно говоря я не особо силен в html куда там необходимо прописать ссылку на видео?))
NMitra
Посмотрите, пожалуйста, внимательней http://shpargalkablog.ru/2011/01/youtube.html Там не нужны ссылка на видео, там нужен только идентификатор видео. В статье на скриншотах всё показано.
NMitra
нужна*
Артем Вядемко
Вроде получилось))) спасибо огромное, сейчас буду пытаться подстроить под себя, вощем буду экспериментировать)))
NMitra
Отлично! ))
Артем Вядемко
Подскажите пожалуйста, можно ли под каждым видео сделать надпись?
NMitra
Можно. Нужно окружить каждую отдельную картинку div, в div вписать соответствующий текст, картинкам дать стиль display: block;
Руслан
Как заместо картинки вставить текст кто знает подскажите плиз?
Руслан
У меня не появляются картинки с чем это связанно?
NMitra
Руслан, с чем связано то, что картинки у вас не появляются я не знаю. Мало информации, попробуйте подробно описать тут https://groups.google.com/forum/#!forum/blogoask

Я знаю, но возможно вас устроит этот вариант http://shpargalkablog.ru/2012/03/css-tabs.html ?
dumptyhumpty
Разобрался с увеличением одиночной фотографии, так чтобы сначала маленькая загружалась, а потом большая подцепялалась. Т.е. все варианты для себя сделал :)
Теперь пытаю галереи.
Вот в этой статье http://aboutnizhnynovgorod.ru/muzeum-parovozov.html сделал сразу два варианта, которые повешены у меня на шорткоды. Вторая основана на вашем коде из этой статьи. Все ОК. Если мне не нужна индексация картинок, то я делаю на бэкграундах, как здесь описано, НО... так как у меня ширина ограничена 640 пикселями, некоторые картинки просматриваются все таки не очень хорошо :( Попытался применить увеличение картинки отдельной к div галереии :) Не выходит. Есть варианты, как можно реализовать дополнительное (!!!) увеличение картинки в отдельное модальное окно, наверное. Т.е. та картинка из окна выезжает или как вариант!? вся галерея выходит в модальное окно в 80% от экрана,к примеру!? Наверное, самый лучший вариант был бы, чтобы по отдельной кнопке (ну картинку сделать с увеличительным стеклом), чтобы вся галерея вылезала в отдельное модальное окно для большего эффекта увеличения, но тогда точно бэкграунд должен не растягиваться, а быть по центру?!
Ну или хотя бы, где что поменять, чтобы картинка не растягивалась по всему окошку?
NMitra
Не помню давала ли я эту ссылку http://shpargalkablog.ru/2014/02/gallery.html
Мне кажется вам бы подошёл этот вариант http://shpargalkablog.ru/2014/08/full-screen.html , когда ничего нажимать не нужно. Только соц. кнопки (зачем их столько?) нужно прижать по краю экрана.
dumptyhumpty
Искал-искал чужое близкое решение, так и не нашел ничего подходящего :(
Пришлось повозиться, с учетом того, что в JS у меня базовые знания...
Написал сам небольшой скриптик (под него конечно же шорткод, чтоб каждый раз не прописывать вручную) простейшей галереи. Моим условиям удовлетворяет :) Грузится малбенькая превьюшка, которую можно проиндексировать. А потом подгружаются картинки во весь экран (надо будет проверить еще в разных браузерах). Все масштабируется... все хорошо.
Пример галереи http://aboutnizhnynovgorod.ru/druzhkova-kruzhka.html
Соц кнопки может и уменьшу, пусть пока болтаются. Если их прижать к краю то они странно себя ведут на маленьких экранах :( Хотя, можно попробовать другие варианты, я когда установил попытался простейшим образом сделать...
Если прижать их к левому краю, то они, вроде, налезали на текст, когда экран маленький, а так всегда между текстом и границей экрана, но я поэкспериментирую и может вообще в статью вынесу...
Евгений Шапарев
Подскажите пожалуйста, а можно это
#raz1:checked ~ .gallery, .gallery [for="raz1"] {background-image: url(адрес_изо);}
как то в хтмл страницы указать, а не в css файле? Чтоб на разных страницах были разные слайдеры
NMitra
Интересно сделать через :before { content: url(); } но на ширину и высоту пока толком повлиять нельзя. Ждёмс, когда браузеры доработают или хотя бы начнут поддерживать object-fit.
Олег
Все понравилось, кроме картинок :(
использовал фото разные по соотношениям сторон(3:4, 16:9,...)
экран у меня 16:9 - фото выглядят уродски :( - растягиваются фотки.
как выводить в исходном соотношении?
NMitra
К .gallery {padding-top: 45%;} добавляется .gallery label {height: 4em;}

Можно при расчёте пропорций ( http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#proportion )

1) использовать calc ( не очень с поддержкой браузерами http://caniuse.com/#feat=calc )

16:9
.gallery {padding-top: calc(56.25% - 4em);}
3:4
.gallery {padding-top: calc(400%/3 - 4em);}

2) опустить label с помощью position: absolute; тогда их высота не будет участвовать в расчёте пропорций картинки. Можно вёрстку отсюда взять http://shpargalkablog.ru/2014/12/slider.html