Изображение
Красивое оформление миниатюр в навигации для вашей галереи.
Сначала мы сделаем миниатюры следующего и предыдущего изображения круглыми. Далее, при наведении мыши на миниатюру, изображение будет немного всплывать и увеличиваться в размерах. Для плавного увеличения будем использовать эффект трансформации CSS3. Поэтому, вся наша задумка будет идеально работать только в современных браузерах. В IE трансформации не будет, изображения будут квадратными.

Все основные изменения у нас будут в части CSS оформления, плюс небольшая правка HTML структуры одного шаблона.

Принцип работы можно посмотреть в нашей галерее - http://cabinetadmina.ru/gallery/index.php.

Итак, для начала нам нужно внести правки в структуру, открываем viewimage_body.html, находим:

Код: Выделить всё

<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
		<div style="text-align: center; padding: 20px;" class="gall-image">{UC_IMAGE}</div>
		<!-- IF UC_PREVIOUS --><p style="float: left; text-align: left;">{UC_PREVIOUS_IMAGE}<br />{UC_PREVIOUS}</p><!-- ENDIF -->
		<!-- IF UC_NEXT --><p style="float: right; text-align: right;">{UC_NEXT_IMAGE}<br />{UC_NEXT}</p><!-- ENDIF -->
	<span class="corners-bottom"><span></span></span></div>
</div>
Заменяем на:

Код: Выделить всё

<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
		<div style="text-align: center; padding: 20px;" class="gall-image">{UC_IMAGE}</div>

		<div class="uc-image-name">
			<!-- IF UC_PREVIOUS --><div class="uc-prev uc-prev-left">{UC_PREVIOUS_IMAGE}</div><!-- ELSEIF not UC_PREVIOUS --><div class="uc-prev-left"></div><!-- ENDIF -->
			<!-- IF UC_NEXT --><div class="uc-prev uc-prev-right">{UC_NEXT_IMAGE}</div><!-- ELSEIF not UC_NEXT --><div class="uc-prev-right"></div><!-- ENDIF -->

			<div class="uc-nav-content">
				<div class="uc-nav-content-prev">
					<!-- IF UC_PREVIOUS --><span>Предыдущее изображение</span><h3>{UC_PREVIOUS}</h3><!-- ELSEIF not UC_PREVIOUS --><span>&#160;</span><!-- ENDIF -->
				</div>
			
				<div class="uc-nav-content-current">
					<span>Сейчас выводится</span><h2><a href="{S_ALBUM_ACTION}">{IMAGE_NAME}</a></h2>
				</div>
			
				<div class="uc-nav-content-next">
					<!-- IF UC_NEXT --><span>Следующее изображение</span><h3>{UC_NEXT}</h3><!-- ELSEIF not UC_NEXT --><span>&#160;</span><!-- ENDIF -->
				</div>
			
			</div>
		</div>
	<span class="corners-bottom"><span></span></span></div>
</div>

Далее открываем тему вашего стиля и в самый конец добавляем:

Код: Выделить всё

/* Gallery */
.uc-image-name {
	position: relative;
	height: 90px;
}
.uc-prev {
	overflow: hidden;
	width: 85px;
	height: 85px;
	border: 2px solid #828282;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.uc-prev-left {
	float: left;
}
.uc-prev-right {
	float: right;
}
.uc-prev:hover {
	border: 3px solid #000;
	width: 100px;
	height: 100px;
	margin: -10px;
}
.uc-prev a {
	margin-left: -5em;
}
.uc-nav-content {
	top: 20px;
	right: 110px;
	left: 110px;
	overflow: hidden;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: absolute;
}
.uc-nav-content div {
	float: left;
	width: 20%;
	color: #aaa;
}
.uc-nav-content span {
	color:#777;
}
.uc-nav-content div.uc-nav-content-current{
	text-align: center;
	width: 55%;
	top: 0px;
}
.uc-nav-content h2,
.uc-nav-content h3 {
	padding: 0;
	margin: 0;
	font-size: 12px;
	line-height: 24px;
	font-family: Georgia, serif;
	font-style: italic;
	border: 0;
}
.uc-nav-content h2 {
	color: #323232;
	font-size: 22px;
	font-style: normal;
}
.uc-nav-content-current span {
	color: #d0ab47;
}
.uc-nav-content div.uc-nav-content-prev {
	margin-left: 5px;
}
.uc-nav-content div.uc-nav-content-next {
	text-align: right;
	margin-right: 5px;
	float: right;
}
.uc-nav-content div span {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}

Небольшие настройки.

Скорость трансформации для увеличения миниатюры:

Код: Выделить всё

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
чем выше число, тем медленнее трансформация.

Размеры миниатюр следующий и предыдущий:

Код: Выделить всё

.uc-prev {
	overflow: hidden;
	width: 85px;
	height: 85px;
	border: 2px solid #828282;
85px - меняйте по своему усмотрению.

Размеры миниатюр следующий и предыдущий при наведении мыши:

Код: Выделить всё

.uc-prev:hover {
	border: 3px solid #323232;
	width: 100px;
	height: 100px;
	margin: -10px;
}
100px - меняйте по своему усмотрению.

Обратите внимание, что если сделать слишком большой размер для миниатюры и если у вас установлен слишком маленький размер миниатюры ("Конфигурация галереи" -> "Настройки миниатюр"), то изображение не будет полностью заполнять поле для изображения. Здесь указан размер в 170 точек.

Можно задать оформление нашей панели, например в цветовой стиль элементов вашей конференции, в элементе:

Код: Выделить всё

.uc-image-name {
	position: relative;
	height: 90px;
}
добавляем нужный цвет, например - background-color: #FFF; или картинку - background: url("ссылка на изображение") repeat 0 0;.

Пример:

Код: Выделить всё

.uc-image-name {
	position: relative;
	height: 90px;
	background: rgba(250, 250, 250, 0.5);

	-webkit-border-radius: 50px;
	moz-border-radius: 50px;
	border-radius: 50px;
}
В примере у нас полупрозрачный белый фон rgba и скругленные края в 50px, чтобы не выходили углы из-за миниатюры.


Источник
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.