Перейти к публикации

Режим галереи

radrigo

Автор: radrigo,
в Вебдизайн

 Рассказать Подписчики 0

Рекомендованные сообщения

radrigo

radrigo 170

Опубликовано:
Опубликовано:

Всем привет.

 

Хочу попробовать переделать навигацию "вперёд", "назад" и т.п. при просмотре оригинальных фото. Но не всё получается как хочется.

 

1)Меню слайдера появляется только когда мышка на фотографии.

Подскажите, как сделать чтоб оно не исчезало вообще? Хочу все кнопки сам настроить средствами css, когда им исчезать, а каким и вовсе не исчезать.

 

На примере в скринах

4993b0651c4f.png

 

d683328f185d.png

 

 

2) И второй вопрос. Можно ли сделать чтоб фотографии всегда позиционировались по вертикале по центру. Например если при перелистывании фото меняется высота, то и позиционирование по вертикале сбивается.

 

 

Привожу пример стилей что выходит.

Найти в engine.css 

/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline {
	background: #fff
}
.highslide-image {
	border: 2px solid #fff
}
.highslide-active-anchor {
	visibility: hidden
}
.highslide-active-anchor img {
	visibility: hidden
}
.highslide-dimming {
	background-color: black
}
.highslide-html {
	background-color: white
}
.highslide-loading {
	display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: black
}
a.highslide-full-expand {
	background: url(../dleimages/fullexpand.gif) no-repeat;
	display: block;
	margin: 0 10px 10px 0;
	width: 34px;
	height: 34px
}
.highslide-display-block {
	display: block
}
.highslide-display-none {
	display: none
}
.highslide-caption {
	display: none;
	padding: 5px;
	background: white
}
.highslide-controls {
	width: 195px;
	height: 40px;
	background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 0 -90px;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-top: 10px
}
.highslide-controls ul {
	position: relative;
	left: 15px;
	height: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 100% -90px
}
.highslide-controls li {
	float: left;
	padding: 5px 0;
}
.highslide-controls a {
	background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif);
	display: block;
	float: left;
	height: 30px;
	width: 30px;
	outline: none
}
.highslide-controls a.disabled {
	cursor: default
}
.highslide-controls a span {
	display: none
}
/*---The CSS sprites for the controlbar---*/
.highslide-controls .highslide-previous a {
	background-position: 0 0
}
.highslide-controls .highslide-previous a:hover {
	background-position: 0 -30px
}
.highslide-controls .highslide-previous a.disabled {
	background-position: 0 -60px !important
}
.highslide-controls .highslide-play a {
	background-position: -30px 0
}
.highslide-controls .highslide-play a:hover {
	background-position: -30px -30px
}
.highslide-controls .highslide-play a.disabled {
	background-position: -30px -60px !important
}
.highslide-controls .highslide-pause a {
	background-position: -60px 0
}
.highslide-controls .highslide-pause a:hover {
	background-position: -60px -30px
}
.highslide-controls .highslide-next a {
	background-position: -90px 0
}
.highslide-controls .highslide-next a:hover {
	background-position: -90px -30px
}
.highslide-controls .highslide-next a.disabled {
	background-position: -90px -60px !important
}
.highslide-controls .highslide-move a {
	background-position: -120px 0
}
.highslide-controls .highslide-move a:hover {
	background-position: -120px -30px
}
.highslide-controls .highslide-full-expand a {
	background-position: -150px 0
}
.highslide-controls .highslide-full-expand a:hover {
	background-position: -150px -30px
}
.highslide-controls .highslide-full-expand a.disabled {
	background-position: -150px -60px !important
}
.highslide-controls .highslide-close a {
	background-position: -180px 0
}
.highslide-controls .highslide-close a:hover {
	background-position: -180px -30px
}

 

Заменить на 


/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline {
	background: #fff
}
.highslide-image {
	border: 0;
}
.highslide-active-anchor {
	visibility: hidden
}
.highslide-active-anchor img {
	visibility: hidden;
}
.highslide-dimming {
	background-color: black
}
.highslide-html {
	background-color: white
}
.highslide-loading {
	display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: black
}
a.highslide-full-expand {
	background: url(../dleimages/fullexpand.gif) no-repeat;
	display: block;
	margin: 0 10px 10px 0;
	width: 34px;
	height: 34px
}
.highslide-display-block {
	display: block
}
.highslide-display-none {
	display: none;
}
.highslide-caption {
	display: none;
	padding: 5px;
	background: white
}
.highslide-controls {
	width: 0;
	height: 0
}
.highslide-controls a {
	display: block;
	outline: none;
}
.highslide-controls a.disabled {
	cursor: default
}
.highslide-controls a span {
	display: none
}
/*---The CSS sprites for the controlbar---*/
.highslide-controls .highslide-previous a {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 400px;
	opacity: .6;
	z-index: 99000
}
.highslide-controls .highslide-previous a:before {
	display: block;
	content: "";
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.80);
	position: absolute;
	left: 15px;
	top: 50%;
	margin-top: -25px;
}
.highslide-controls .highslide-previous a:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-right: 8px solid rgba(255,255,255,1.00);
	border-bottom: 9px solid transparent;
	position: absolute;
	left: 35px;
	top: 50%;
	margin-top: -9px
}
.highslide-controls .highslide-previous a:hover {
	opacity: 1
}
.highslide-controls .highslide-previous a.disabled {
	display: none
}
.highslide-controls .highslide-next a {
	position: fixed;
	top: 50px;
	right: 0;
	bottom: 0;
	width: 400px;
	opacity: .6;
	z-index: 99001
}
.highslide-controls .highslide-next a:before {
	display: block;
	content: "";
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.80);
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -50px;
}
.highslide-controls .highslide-next a:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-left: 8px solid rgba(255,255,255,1.00);
	border-bottom: 9px solid transparent;
	position: absolute;
	right: 35px;
	top: 50%;
	margin-top: -34px
}
.highslide-controls .highslide-next a:hover {
	opacity: 1
}
.highslide-controls .highslide-next a.disabled {
	display: none
}
.highslide-controls .highslide-close a {
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.60);
	position: fixed;
	top: 0;
	right: 15px;
	border-radius: 0 0 7px 7px
}
.highslide-controls .highslide-close a:hover {
	background-color: rgba(0,0,0,0.80);
}
.highslide-controls .highslide-close a:before, .highslide-controls .highslide-close a:after {
	display: block;
	content: "";
	position: absolute;
	left: 23px;
	top: 13px;
	height: 24px;
	width: 4px;
	background-color: #fff;
	border-radius: 2px
}
.highslide-controls .highslide-close a:before {
	transform: rotate(45deg);
}
.highslide-controls .highslide-close a:after {
	transform: rotate(-45deg);
}

@media (max-width: 1200px) {
.highslide-controls .highslide-previous a, .highslide-controls .highslide-next a {
	width: 300px;
}
}

@media (max-width: 930px) {
.highslide-controls .highslide-previous a:before, .highslide-controls .highslide-previous a:after, .highslide-controls .highslide-next a:before, .highslide-controls .highslide-next a:after {
	display: none;
}
.highslide-controls .highslide-previous a, .highslide-controls .highslide-next a {
	width: 200px;
}
}

 

 

Если удастся победить вышеупомянутые проблемы, то можно будет добавить и остальные кнопки.

Многие думаю хотели бы изменить внешний вид навигации в галереи. Как по мне, так она морально устарела.

  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 5 985

Опубликовано:
Опубликовано:

Используйте !important когда хотите принудительно заставить работать именно ваше правило, а не какое либо другое.

Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 170

Опубликовано:
Опубликовано: Автор
29 минут назад, celsoft сказал:

Используйте !important когда хотите принудительно заставить работать именно ваше правило, а не какое либо другое.

Я никак не могу понять к какому блоку применить правила чтоб кнопки не пропадали.  Все кнопки расположены в блоке с таким классом ".highslide-controls", при попытке применить к нему, и ко всем  лежащим в нём элементм, нижеприведённые правила результатов не дают. 

	display: block !important;
	opacity: 1 !important;
	visibility: visible !important

 

Однако если в файле engine/classes/highslide/highslide.js в этом куске кода 

		wrapperMouseHandler: function (a) {
			try {
				a || (a = window.event);
				var b = /mouseover/i.test(a.type);
				a.target || (a.target = a.srcElement);
				a.relatedTarget || (a.relatedTarget = b ? a.fromElement : a.toElement);
				var c = hs.getExpander(a.target);
				if (c.isExpanded && c && a.relatedTarget && hs.getExpander(a.relatedTarget, !0) != c && !hs.dragArgs)
					for (a = 0; a < c.overlays.length; a++) {
						var d = hs.$("hsId" + c.overlays[a]);
						d && d.hideOnMouseOut && (b && hs.setStyles(d, {
							visibility: "visible",
							display: ""
						}), hs.animate(d, {
								opacity: b ? d.opacity : 0
							},
							d.dur))
					}
			} catch (e) {}
		},

и в этом 

			if (b && "string" != typeof b && (b.style.display = "block", a.hsId = a.hsId || a.overlayId, "crossfade" != this.transitions[1] || !this.reuseOverlay(a, b))) {
				this.genOverlayBox();
				var d = a.width && /^[0-9]+(px|%)$/.test(a.width) ? a.width : "auto";
				/^(left|right)panel$/.test(a.position) && !/^[0-9]+px$/.test(a.width) && (d = "200px");
				d = hs.createElement("div", {
					id: "hsId" + hs.idCounter++,
					hsId: a.hsId
				}, {
					position: "absolute",
					visibility: "hidden",
					width: d,
					direction: hs.lang.cssDirection || "",
					opacity: 1
				}, c ? hs.viewport : this.overlayBox, !0);
				c && (d.hsKey = this.key);
				d.appendChild(b);
				hs.extend(d, {
					opacity: 0,
					offsetX: 0,
					offsetY: 0,
					dur: 0 === a.fade || !1 === a.fade || 2 == a.fade && hs.ie ? 0 : 250
				});

"opacity : 0" заменить на "opacity : 1". проблема исчезает

 

Хотелось бы это реализовать не вмешиваясь в файлы движка.

 

Не подскажете что в CSS надо прописать?

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 5 985

Опубликовано:
Опубликовано:
4 минуты назад, radrigo сказал:

Я никак не могу понять к какому блоку применить правила чтоб кнопки не пропадали. 

Откройте консоль браузера и инспектор элементов. Этот код применять нужно не классу ".highslide-controls" а к слоям выше. Они привязаны не к классам а к id

Или можно например указать 

.highslide-wrapper * {
    opacity: 1 !important;
}

 

  • Нравится 1
Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 170

Опубликовано:
Опубликовано: Автор
14 часа назад, celsoft сказал:

Откройте консоль браузера и инспектор элементов. Этот код применять нужно не классу ".highslide-controls" а к слоям выше. Они привязаны не к классам а к id

Или можно например указать 


.highslide-wrapper * {
    opacity: 1 !important;
}

 

 

Сделал так. Чтобы стили применялись только к одному конкретному блоку. 

.highslide-container div[id^="hsId"] {
	opacity: .75 !important;
	visibility: visible !important
}

 

Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 170

Опубликовано:
Опубликовано: Автор

На мой взгляд получается довольно неплохо. По крайней мере лучше, чем было.

 

375d2d6de1e0.png

 

 

Изменить галерею очень просто.

 

1) Сначало убираем эффект появление оригинальные фотографии из миниатюры. Это делать необязательно, но на мой взгляд так будет лучше.

 

в файле engine/classes/highslide/highslide.js

 

найти 

expandDuration:250,restoreDuration:250

заменить на 

expandDuration:10,restoreDuration:10

 

Найти 

dimmingDuration:50

заменить 

dimmingDuration:0

 

2) И второе, в файле в engine.css

 

Найти 

/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline { background: #fff }
	.highslide-image { border: 2px solid #fff }
	.highslide-active-anchor { visibility: hidden } 
	.highslide-active-anchor img { visibility: hidden }
	.highslide-dimming { background-color: black }
	.highslide-html { background-color: white }
	.highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-decoration: none; padding: 3px; border: 1px solid white; background-color: black }
	a.highslide-full-expand { background: url(../dleimages/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px }
	.highslide-display-block { display: block }
	.highslide-display-none { display: none }
	.highslide-caption { display: none; padding: 5px; background: white }
	.highslide-controls { width: 195px; height: 40px; background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 0 -90px; margin-right: 15px; margin-bottom: 10px; margin-top: 10px }
	.highslide-controls ul { position: relative; left: 15px; height: 40px; list-style: none; margin: 0; padding: 0; background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 100% -90px }
	.highslide-controls li { float: left; padding: 5px 0; }
	.highslide-controls a { background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif); display: block; float: left; height: 30px; width: 30px; outline: none }
	.highslide-controls a.disabled { cursor: default }
	.highslide-controls a span { display: none }
 
/*---The CSS sprites for the controlbar---*/
.highslide-controls .highslide-previous a { background-position: 0 0 }
	.highslide-controls .highslide-previous a:hover { background-position: 0 -30px }
	.highslide-controls .highslide-previous a.disabled { background-position: 0 -60px !important }
	.highslide-controls .highslide-play a { background-position: -30px 0 }
	.highslide-controls .highslide-play a:hover { background-position: -30px -30px }
	.highslide-controls .highslide-play a.disabled { background-position: -30px -60px !important }
	.highslide-controls .highslide-pause a { background-position: -60px 0 }
	.highslide-controls .highslide-pause a:hover { background-position: -60px -30px }
	.highslide-controls .highslide-next a { background-position: -90px 0 }
	.highslide-controls .highslide-next a:hover { background-position: -90px -30px }
	.highslide-controls .highslide-next a.disabled { background-position: -90px -60px !important }
	.highslide-controls .highslide-move a { background-position: -120px 0 }
	.highslide-controls .highslide-move a:hover { background-position: -120px -30px }
	.highslide-controls .highslide-full-expand a { background-position: -150px 0 }
	.highslide-controls .highslide-full-expand a:hover { background-position: -150px -30px }
	.highslide-controls .highslide-full-expand a.disabled { background-position: -150px -60px !important }
	.highslide-controls .highslide-close a { background-position: -180px 0 }
	.highslide-controls .highslide-close a:hover { background-position: -180px -30px }

Заменить на 

/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline {
	background: #fff;
}
.highslide-image {
	border: 0;
}
.highslide-active-anchor {
	visibility: hidden;
}
.highslide-active-anchor img {
	visibility: hidden;
}
.highslide-dimming {
	background-color: black
}
.highslide-html {
	background-color: white
}
.highslide-loading {
	display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: black
}
a.highslide-full-expand {
	background: url(../dleimages/fullexpand.gif) no-repeat;
	display: block;
	margin: 0 10px 10px 0;
	width: 34px;
	height: 34px
}
.highslide-display-block {
	display: block
}
.highslide-display-none {
	display: none;
}
.highslide-caption {
	display: none;
	padding: 5px;
	background: white
}
.highslide-controls {
	width: 0;
	height: 0;
}
.highslide-controls a {
	display: block;
	outline: none;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}
.highslide-controls a.disabled {
	cursor: default
}
.highslide-controls a span {
	display: none
}
.highslide-container div[id^="hsId"] {
	opacity: .75 !important;
	visibility: visible !important
}
/*---The CSS sprites for the controlbar---*/
.highslide-controls .highslide-previous a {
	position: fixed;
	top: 50px;
	left: 0;
	right: 85%;
	bottom: 0;
	opacity: .3;
}
.highslide-controls .highslide-previous a:before {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-right: 14px solid #000;
	border-bottom: 14px solid transparent;
	position: absolute;
	left: 39px;
	top: 50%;
	margin-top: -36px
}
.highslide-controls .highslide-previous a:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-right: 12px solid #fff;
	border-bottom: 12px solid transparent;
	position: absolute;
	left: 40px;
	top: 50%;
	margin-top: -34px;
}
.highslide-controls .highslide-previous a:hover {
	opacity: 1
}
.highslide-controls .highslide-previous a.disabled {
	display: none
}
.highslide-controls .highslide-next a {
	position: fixed;
	top: 50px;
	right: 0;
	left: 65%;
	bottom: 0;
	opacity: .3;
}
.highslide-controls .highslide-next a:before {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-left: 14px solid #000;
	border-bottom: 14px solid transparent;
	position: absolute;
	right: 39px;
	top: 50%;
	margin-top: -36px
}
.highslide-controls .highslide-next a:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-left: 12px solid #fff;
	border-bottom: 12px solid transparent;
	position: absolute;
	right: 40px;
	top: 50%;
	margin-top: -34px
}
.highslide-controls .highslide-next a:hover {
	opacity: 1
}
.highslide-controls .highslide-next a.disabled {
	display: none
}
.highslide-controls .highslide-close a {
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.80);
	position: fixed;
	top: 0;
	right: 0;
	opacity: .6;
	border-radius: 0 0 0 7px
}
.highslide-controls .highslide-close a:hover {
	opacity: 1
}
.highslide-controls .highslide-close a:before, .highslide-controls .highslide-close a:after {
	display: block;
	content: "";
	position: absolute;
	left: 23px;
	top: 13px;
	height: 24px;
	width: 4px;
	background-color: #fff;
	border-radius: 2px
}
.highslide-controls .highslide-close a:before {
	transform: rotate(45deg);
}
.highslide-controls .highslide-close a:after {
	transform: rotate(-45deg);
}
.highslide-controls .highslide-play a, .highslide-controls .highslide-pause a  {
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: -45px;
	opacity: .6;
	background-color: rgba(0,0,0,0.80);
	border-radius: 50%
}
.highslide-controls .highslide-play a:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-left: 9px solid #fff;
	border-bottom: 8px solid transparent;
	position: absolute;
	left: 18px;
	top: 12px;
}
.highslide-controls .highslide-pause a:after, .highslide-controls .highslide-pause a:before {
	display: block;
	content: "";
	width: 4px;
	height: 14px;
	position: absolute;
	left: 14px;
	top: 13px;
	background-color: #FFFFFF;
}
.highslide-controls .highslide-pause a:before {
	left: 22px;
}
.highslide-controls .highslide-play a:hover, .highslide-controls .highslide-pause a:hover {
	opacity: 1;
}
.highslide-controls .highslide-full-expand a {
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: 5px;
	opacity: .6;
	background-color: rgba(0,0,0,0.80);
	border-radius: 50%
}
.highslide-controls .highslide-full-expand a:after {
	display: block;
	content: "";
	position: absolute;
	left: 11px;
	top: 13px;
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.highslide-controls .highslide-full-expand a:before {
	display: block;
	content: "";
	position: absolute;
	left: 23px;
	top: 8px;
	height: 14px;
	width: 4px;
	background-color: #fff;
	transform: rotate(45deg);
	border-radius: 2px 2px 0 0
}
.highslide-controls .highslide-full-expand a:hover {
	opacity: 1;
}
.highslide-controls .highslide-full-expand a.disabled {
	opacity: .6;
}
@media (max-width: 930px) {
.highslide-controls .highslide-previous a:before, .highslide-controls .highslide-previous a:after, .highslide-controls .highslide-next a:before, .highslide-controls .highslide-next a:after {
	display: none;
}
}

 

Есть еще то, что хотелось бы изменить, но я не знаю как. Прошу подсказки.

 

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

 

2) Когда смотришь фотографии, то стрелки вперёд и назад мигают по два раза когда на них нажимаешь. Хотелось бы от этого избавиться.

 

3) И третье, не так важно, но хотелось бы тоже поменять. Чтоб перелистывания фотографий было не затухание старой и плавное появление следующий, а перемещение справа налево. То есть старая фотография уходит влево, а новая появляется справа.

 

Заранее признателен всем за подсказку.

Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 170

Опубликовано:
Опубликовано: Автор

Решил настроить у себя на сайте галерею таким методом, однако обнаружил, что в браузер Microsoft Edge кнопки не видны.  Все перелистывается когда нажимаю на месте кнопок, однако сами кнопки не отображается. Мучился, но так и не смог это победить.
Помогите разобраться.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...