Красивое оформление миниатюр в навигации для вашей галереи.
Сначала мы сделаем миниатюры следующего и предыдущего изображения круглыми. Далее, при наведении мыши на миниатюру, изображение будет немного всплывать и увеличиваться в размерах. Для плавного увеличения будем использовать эффект трансформации CSS3. Поэтому, вся наша задумка будет идеально работать только в современных браузерах. В IE трансформации не будет, изображения будут квадратными.
Все основные изменения у нас будут в части CSS оформления, плюс небольшая правка HTML структуры одного шаблона.
Принцип работы можно посмотреть в нашей галерее - http://cabinetadmina.ru/gallery/index.php.
Итак, для начала нам нужно внести правки в структуру, открываем
Заменяем на:
Далее открываем тему вашего стиля и в самый конец добавляем:
Небольшие настройки.
Скорость трансформации для увеличения миниатюры:
чем выше число, тем медленнее трансформация.
Размеры миниатюр следующий и предыдущий:
Размеры миниатюр следующий и предыдущий при наведении мыши:
Обратите внимание, что если сделать слишком большой размер для миниатюры и если у вас установлен слишком маленький размер миниатюры ("Конфигурация галереи" -> "Настройки миниатюр"), то изображение не будет полностью заполнять поле для изображения. Здесь указан размер в 170 точек.
Можно задать оформление нашей панели, например в цветовой стиль элементов вашей конференции, в элементе:
добавляем нужный цвет, например -
Пример:
В примере у нас полупрозрачный белый фон
Источник
Сначала мы сделаем миниатюры следующего и предыдущего изображения круглыми. Далее, при наведении мыши на миниатюру, изображение будет немного всплывать и увеличиваться в размерах. Для плавного увеличения будем использовать эффект трансформации 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> </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> </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
, чтобы не выходили углы из-за миниатюры.Источник
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.