В данной теме вы найдете следующие скрипты:
Визуализация
Страница: 1
Сообщений 1 страница 8 из 8
Поделиться12013-08-20 13:25:03
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Поделиться22013-08-20 13:27:56
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Убираем название дополнительных полей
в HTML-низ
Код:
<!--убираем название дополнительных полей-->
<script type="text/javascript">
var A=[1,2,3,4,5]
$(".post .post-author li").each(function (){
for(var i in A){if($(this).hasClass("pa-fld"+A[i])){
$(this).html($(this).html().replace(/^[^:]*:/,''));}};});
</script>Поделиться32013-08-20 13:31:52
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Скрываем ненужную информацию в профиле пользователя под кнопками
в HTML-верх
<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:14px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="http://forumstatic.ru/files/0010/b4/f8/57844.js"></script>
В HTML низ
<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<script>
var a1 = 0 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 0 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0// Резкость Открытия: 0 - Плавно; 1 - Резко;
var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.
//"pa-author", //Ник-Нейм
//"pa-avatar", //Аватар
//"pa-title", //статус
// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/VymNB.png[Описание 1]",
"pa-reg", //Зарегистрирован
"pa-invites", //Приглашений
"pa-posts", //Кол-во сообщений:
"pa-respect", //Уважение:
"pa-positive", //Позитив
"pa-sex", //Пол
"pa-age", //Возраст
"pa-icq", //Аська
"pa-ip", //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
//"pa-online", //Пользователь online - Не засовываем в спойлеры
// 2 кнопка- ссылка на Картинку
"http://s3.uploads.ru/T7hLI.png",
"pa-from", //Откуда
"pa-fld1", //Доп.Поле.1
// 3 кнопка- ссылка на Картинку
"http://s3.uploads.ru/VtGQ4.png",
"pa-fld2", //Доп.Поле.2
"pa-fld3", //Доп.Поле.3
"pa-fld4", //Доп.Поле.4
"pa-fld5", //Доп.Поле.5
//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)
//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->
В скрипте расположение Пунктов, установлено так же, как и по умолчанию на форумах mybb,
Пункты в списке - можно переставлять и оно независит от их начального положения.
Приведённый вариант, по дефолту, чуть быстрее, если поля не переставлялись в Админке,
в настройках "Поля Профиля", поскольку требует меньше времени на перестановки скриптом.
Пункт активен - //"pa-online"сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним две косых //.(Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, (аналогично можно вытащить из участия в спойлере и любой другой пункт
Пункты:
//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)
- Только для для rusff и ork, - снимаем два наклонных слеша только для реально используемого(ых) пунктов.
*Награды и подарки удобнее ставить под последнюю кнопку, особенно если их много
Совет: При горизонтальном расположении кнопок, симпатичней их делать несколько длиннее
Для дизайнеров
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner
Пример текущего оформления кнопок в DEMO
<!-- HTML верх - Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {
margin:1px;
padding:2px;
border:transparent 1px dashed;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
}
img.post-img-Sp.active {
border:#645850 1px dashed;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
box-shadow: 0px 5px 18px #000;
}
</style>
Пояснения к DEMO:
В демке четыре сообщения, с разными вариантами оформления и начального срабатывания кнопок в профиле, в зависимости от установки параметров а1 и a2 *см. начало скрипта, в части, устанавливаемой в HTML низ
Поделиться42013-08-20 16:28:31
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Поворот авы при наведении
в Цвета style_cs.css
Код:
/*поворот авы при наведении*/
.post-author ul li.pa-avatar img{
-webkit-transition: all 0.5s ease-out; //[b]скорость поворота[/b]//
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.post-author ul li.pa-avatar img:hover {
-webkit-transform: rotate(2.5deg); /* Saf3.1+, Chrome */ //[b]угол наклона[/b]//
-moz-transform: rotate(2.5deg); /* FF3.5+ */
-ms-transform: rotate(2.5deg); /* IE9 */
-o-transform: rotate(2.5deg); /* Opera 10.5 */
transform: rotate(2.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9990482215818578, M12=0.043619387365336, M21=-0.043619387365336, M22=0.9990482215818578, sizingMethod='auto expand');
zoom: 1;
}Поделиться52013-08-22 11:23:52
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Плавная смена картинок при наведении
в HTML-верх
Код:
<!--Плавная смена картинок при наведении-->
<style>
.image.UP,
.image.Down {
border:2px solid transparent;
margin:0;
padding:0;
}
.image.UP{
opacity:1.0;
display:block;
position:absolute;z-index:100;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
opacity:0.00;
}
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>Туда, где должны быть изображения:
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
Красное - изображение до наведения.
Синее - при наведении.
Можно размножать вместе с внешним div-блоком.
правильно
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
...
неправильно
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
Поделиться62013-08-22 11:27:58
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Смена картинок при наведении
Код:
<a href="ссылка"><img src='простая картинка без наведения' onmouseover="this.src='картинка при наведении'" onmouseout="this.src='простая картинка без наведения'" border=0>
Поделиться72013-08-22 11:31:55
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Увеличение при наведении
в HTML-низ
Код:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0);
$('.menuitem').mouseover(function(){
; gridimage = $(this).find('img');
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
});
</script>Размер превью по умолчанию — 100*100 пикселей. Если вы хотите его изменить, вы должны указать свой размер в четвертой строке:
$('.menuitem img').animate({width: 100}, 0);
То же самое относится к оригинальному изображению. Максимальный размер — это 200 пикселей:
gridimage.stop().animate({width: 200}, 150);
в HTML-верх
Код:
<style type="text/css">
img {
border: none;
}
#menuwrapper{
left: 20%;
position: relative;
height: 210px;
}
#menu{
position: absolute;
bottom: 0px;
left: 0px;
}
.menuitem {
position: fixed relative;
bottom: 0px;
display: inline-block;
}
</style>height: 210px; — это высота линии. Если ваши изображения (в оригинальном размере) больше 200 пикселей, измените это значение.
Осталось только поместить сам плагин на страницу. Для этого, между тегами <body>, в место, где должен отображаться плагин вставьте следующий код:
Код:
<div id="menuwrapper"> <div id="menu"> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> </div> </div>
Поделиться82013-08-22 11:34:20
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Эффект растворения
в HTML-низ
Код:
<!--Эффект растворения-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
});
});
});
</script>Код:
<script type="text/javascript">
$(document).ready(function() {
$('.Hoverbuttons').each(function () {
var $span = $(this).css('opacity', 0.3);
$(this).hover(function () {
$span.stop().fadeTo(600, 1);
}, function () {
$span.stop().fadeTo(600, 0.3);
Изображению, которому вы хотите добавить этот эффект, нужно добавить класс Hoverbuttons:
<img src="URL" class="Hoverbuttons">[/spoiler]
Страница: 1
