CMS DataLife Engine - Система управления сайтами

Авторизация  
radrigo

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

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

Всем привет.

 

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

 

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

Поделиться сообщением


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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 надо прописать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, radrigo сказал:

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

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

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

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

 

  • Нравится 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
14 часа назад, celsoft сказал:

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

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


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

 

 

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

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

 

Поделиться сообщением


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

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

 

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) И третье, не так важно, но хотелось бы тоже поменять. Чтоб перелистывания фотографий было не затухание старой и плавное появление следующий, а перемещение справа налево. То есть старая фотография уходит влево, а новая появляется справа.

 

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

Поделиться сообщением


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

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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация