Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Заказ скриптов » [отвечено] Динамичная рамка для аватара


[отвечено] Динамичная рамка для аватара

Сообщений 1 страница 30 из 30

1

Когда все аватары форума в одинаковом обрамлении - это, конечно, симпатично, но просто так не подгонишь.
Я вот подумала о таком варианте:
Если это представляется возможным, прошу написать скрипт, задающий "рамку" из четырех элементов (картинок). На примере я все обозначила.

1 и 2 - картинка no-repeat с размером в пикселях или процентах.
3 и 4 - картинка repeat-у

Теоретически, это дает возможность создавать множество разнообразных рамок в соответствии со стилем и атмосферой форума.

Теги: заказ скрипта, аватар, рамка, обрамление

+1

2

Предлагаю такое.
Не факт, что вариант супер.

<style>
.pa-avatar table, .pa-avatar table td {border: none !important; background:  #CDCDCD; border-spacing:0 !important; padding:0 !important;}
.pa-avatar .avup {height:20px;}
.pa-avatar .avdwn {height:20px;}
.pa-avatar .avlt {width: 10px;}
.pa-avatar .avrt {width: 10px;}
.pa-avatar img {margin: 0; padding:0;}
.pa-avatar {padding-right: 100% !important;}
</style>

По циферкам
https://forumupload.ru/uploads/0002/35/a3/84628-1.jpg
1
2
3
4

Задавайте стиль: бэкграунд, высоту, ширину.
Основной цвет бэкграунда во всех блоках относящихся к аватару* (#CDCDCD)
Сам скрипт

Код:
<script type="text/javascript">
ave = document.getElementsByClassName('pa-avatar')
figa = -1
while (ave[++figa]) {
av = ave[figa].innerHTML
ave[figa].innerHTML = '<table><tr><td class="avup" colspan="3" width="auto"></td></tr><tr><td class="avlt"></td><td class="avml" width="'+ave[figa].firstChild.width+'">' +av+ '</td><td class="avrt"></td></tr><tr><td class="avdwn" colspan="3" width="auto"></td></tr></table>'
}

</script>

Поправил. Больше ошибок пока не вижу...

Отредактировано Kven (2010-12-27 18:49:00)

+1

3

Kven, спасибо, потестим, позже отпишу

0

4

Kven, не знаю, может мой стоп-кран, но до того, как вы внесли изменения, скрипт, хоть и стал криво, но более правдоподобно срабатывал. Правда, я не успела глянуть, что именно вы изменили. Но теперь задаются отступы, а бэкграунд не отображается вообще. Соответственно, на свой заменить его возможным не представляется.
В общем, нужна еще раз ваша помощь.

0

5

Выглядит вот так

0

6

Ksana

Вопрос: почему нельзя все четыре рамки объединить в одну ? -(* Выложите крупный рисунок полной рамки - я её присобачу

(Возможно даже смогу по группам пользователей

Отредактировано Deff (2011-01-14 02:44:46)

0

7

Deff написал(а):

Выложите крупный рисунок полной рамки - я её присобачу

В каком смысле? В фотошопе, чтоль? Либо я вас не поняла, либо вы меня %-)
Если бы меня это устроило, я бы не парилась и не искала скрипт. Суть в том, что мне нужна динамичная рамка, которая может подстраиваться под любой аватар (за счет повтора по "у"), независимо от пропорций картинки.
Если вы имели ввиду что-то другое (не приклеивание рамки к картинке в фотошопе), то, будьте добры, перефразируйте, пожалуйста, фразу "я её присобачу". Хотелось бы знать, о каком процессе "присобачивания" идет речь)

0

8

Ksana Выложите какртинку из фотошопа - рамки - бует динамическая

0

9

Deff, картинки у меня еще нет. Сначала я хотела получить рабочий скрипт, а потом подбирать рамку, с возможностью редактирования ее в процессе. Я вам, конечно, благодарна за желание помочь, но вы могли бы, все-таки, объяснить, что собираетесь сделать?

0

10

Ksana Нарисовал скриптик > Рамки Под Аватарчики (рандомно)

+1

11

Deff, скрипт полезный, бесспорно. Но он работает немного не так, как мне хотелось.
1. Пропорции аватаров очень разные. Пробовала несколько вариантов - рамка искажается до безобразия.
2. Рамка внедряется в аватар, что тоже выглядит нехорошо.

Первую проблему можно исправить только предложенным мною способом - четыре картинки с использованием повторов одного модуля. Это прекрасная возможность создать лаконичную, элегантную и эстетичную рамку. Думаю, вам это по силам прописать.
Вторую - только немного переписав скрипт, в чем я мало смыслю. Если можете сделать так, чтобы рамка была рамкой, то бишь окантовывала аватар, то цены скрипту не будет.
Но за работу, однозначно, +

0

12

Чо нидь типо такого > http://hostjs-mybb2011.narod.ru/KsanaAvatarS.htm

Если пойдёт, то код такой
в HTML верх

Код:
<!--  Табличка Под Авву      -->
<div id="addtable" style="display:none">
<table cols="3" rows="3" valign="top" cellspacing="0" cellpadding="0" class="frameforavatar"><tbody>
<tr class="z1"><td class="W1" colspan="3"></td></tr> 
<tr class="z2"><td class="W2"></td><td class="AvrImd"></td><td class="W3"></td></tr>
<tr class="z3"><td class="W4" colspan="3"></td></tr>
</tbody></table></div>
<style>
table.frameforavatar,
table.frameforavatar tr,
table.frameforavatar td {
 table-layout: auto!important;
 padding:0!important;
 margin:0!important;
 border-collapse:collapse!important;
 border:none 0 transparent!important;
 text-align:center;
}
table.frameforavatar td.AvrImd img {
 display:block;
 padding:0!important;
 margin:0!important;
 border:none 0 transparent!important;
}
table.frameforavatar td.W2,
table.frameforavatar td.W3 {
 width:20px!important;/*Ширина Подрамника cлево-справо*/
}
table.frameforavatar tr.z1,
table.frameforavatar tr.z3 {   
 height:20px!important;/*Высота Подрамника cнизу-сверху*/
}
table.frameforavatar td.AvrImd {
 padding:0!important;
 margin:0!important;
 width:143px;	/*Ширина Аватарки*/
}
table.frameforavatar tr.z1 {/* Cтавим верхнюю часть Рамки */
 background:url(http://savepic.ru/2171040.gif) no-repeat top center;
}
table.frameforavatar td.W2 {/* Cтавим Рамку Слева */
 background:url(http://savepic.ru/2171040.gif) no-repeat left center;
}
table.frameforavatar td.W3 {/* Cтавим Рамку Справо */
 background:url(http://savepic.ru/2171040.gif) no-repeat right center;
}
table.frameforavatar tr.z3 {/* Cтавим Рамку Снизу */   
 background:url(http://savepic.ru/2171040.gif) no-repeat bottom center;
}
</style><!--  Конец//Табличка Под Авву -->

В HTML низ

Код:
<script><!--Ставим рамки для Аватара --> 
  $(document).ready(function(){
    var Wavr=$("table.frameforavatar td.AvrImd").css("width");
    Wavr=parseInt(Wavr.substring(0,Wavr.length-2));
    var WFr=$("table.frameforavatar td.W2").css("width");
    WFr=parseInt(WFr.substring(0,WFr.length-2));
    var tbl=$("#addtable").html()

    $("div.post-author ul li.pa-avatar img[alt]").each(function () {
    $(this).parent().children("img").removeAttr("width")
    $(this).parent().children("img").removeAttr("height")
    $(this).parent().find("[alt]").css("width",Wavr+"px");

    $(this).parent().children("img").removeAttr("height")
    var s=$(this).parent().html()
    $(this).before(tbl)          

    $(this).parent().find("table.frameforavatar td.AvrImd").append(s)
    $(this).parent().find("table.frameforavatar").css("width",(Wavr+2*WFr)+"px");
    $(this).parent().find("table.frameforavatar").css("width"); 
    $(this).parent().find("img[alt]:last").remove();
 });});
</script><!--Конец//Рамки для Аватара-->

Если делать "спрайтом", как у меня (т.е. одним рисунком под бекграунд)
- Боковые полоски рамки должны быть по высоте больше максимальной высоты Аватара в форуме (*в частности это зависит от установок для Аватаров в Админке, (*в данной, применённой картинке под бекграунд,  она не слишком удовлетворяет по высоте, - для узких и длинных Аватаров могут быть траблы

Ширина картинки под спрайт = установленная в сss коде ширина Аватарки(* все аватары нормируюцо по ширине) +  ширина (левой ++правой) рамок

Поправлено 16.07.2012

Отредактировано Deff (2012-07-16 18:51:55)

+2

13

Deff написал(а):

для узких и длинных Аватаров могут быть траблы

Да, так и есть. Но эту проблему можно обойти, не программным, но графическим способом. Можно сделать рамку, которая не сходится в углах. То бишь, в центре каждой стороны какая-нибудь декоративная финтифлюшка, а от нее по обе стороны отходят полосочки (как бы тонкая аккуратная рамочка), которые плавно сходят на нет. Визуально это смотрится как вполне себе симпатичная рамка, если элементы красивые. Пробовала на узкой аве (130х200), рамка подошла как влитая. Так же хорошо смотрится на практически любых пропорциях. Нужно просто учесть, чтобы декоративный элемент в центре был уже минимальной ширины/высоты авы. Конечно, нельзя угадать, какую аву взбредет поставить пользователю. На моей памяти меньше 140 не было. Так что, можно смело делать наш декор пикселей на 100, а остальные 40 пикс. разойдутся полосочками по 20.

В общем, этот скрипт был бы идеален, если бы не один печальный момент. У меня макс. ширина 160 рх. Если ставить аву на 160, то смотрится замечательно, так как нужно. Но если ава меньше, 150 или, что еще ужаснее, 140, то она растягивается до размера 160. Стоит ли говорить, что качество портится чудовищно? Тем более, при загрузке страницы отчетливо видно, как загружается нормальный аватар оригинального размера, а потом начинает скакать (увеличивается и сдвигается на число пикселей толщины рамки - у меня 12, а затем уже спустя пару секунд отображается рамка). И все этой действо я наблюдаю при скорости 20 мб. Понимаю, что дело не только в скорости, но это тоже немаловажно. У многих моих пользователей все еще 256 кб.
Не знаю, как быть с шириной. Можно ли что-то придумать, чтобы ширина отображения авы не была фиксированной, а подстраивалась автоматически? Вариант с auto и процентами тут не срабатывает, Так как быть?
И, конечно, все эти "миграции" аватара при загрузке. Теоретически, если задать в стиле аватару отступ слева на 12 (ну, у кого как) пикселей, то аватарка не будет прыгать, а рамка появится плавно, но у меня не получилось так сделать. Что-то делаю не так, отступ задаю, но разницы не вижу.

0

14

Ksana

Ksana написал(а):

Да, так и есть. Но эту проблему можно обойти, не программным, но графическим способом. М

Да сделайте просто боковушку для бекграундной картинким в 300пиксел, ну в 400 - вот и всё решение

Остальное мну не нает - если вопрос о нефиксированной ширине - ставьте картинкой ( см рандомный вариант

Можн просто просить загружать аввы по ширине  от 150  и проставить настройки в форуме,

Опять же нефиксированная ширина аввы создаст проблемы с графикой самой рамки - у нас она не сможет быть какой то законченной картинкой поскльку при узких - верхняя-нижняя рамка обрезаецо - при широких может выйти за пределы (Карочь дед с рыбкой устал

Ksana написал(а):

У меня макс. ширина 160 рх.

Ksana написал(а):

Ну поставьте /*Ширина Аватарки*/ компромисное значение -типо 130- 145

ужатие - менее ужасно - смортрицо чем расширение

Отредактировано Deff (2011-01-16 21:27:11)

0

15

Эх, жаль. 130 не устроит. Как ни странно, у некоторых людей и того меньше. Такое ощущение, что они впадают в крайности.
В любом случае, отличная работа. Просто еще раз обдумаю, как будет удобнее.

0

16

Ksana написал(а):

Эх, жаль. 130 не устроит

Ksana я имею ввиду выставить компромисное значение в css cкрипта а- не в настройках - меньшие будут увеличивацо - большие ужимацо

в принципе там все отмеченные (в css) коментариями значения можно менять..

Отредактировано Deff (2011-01-16 22:17:36)

0

17

Deff написал(а):

Ksana я имею ввиду выставить компромисное значение в css cкрипта а- не в настройках - меньшие будут увеличивацо - большие ужимацо
в принципе там все отмеченные (в css) коментариями значения можно менять..

Да-да, спасибо. Все предельно ясно. Просто я задумываюсь о более жестком ограничении размера. Не думаю, что кто-то из пользователей эмоционально привязан к крупным аватарам)

0

18

Ksana Ксать - посмотрел на форуме > http://sutrong.ru/viewtopic.php?id=1070&p=5, симпатично (думал родил безделушку

Там у Вас мелькнула идея по горизонтали поставить ближе к положению уже с рамкой(* это будет типо такого кода в HTML верх

<style>
ul li.pa-avatar.item2 img {
margin-left:18px;}
</style>

Отредактировано Deff (2011-01-19 22:44:07)

+1

19

Deff написал(а):

Ksana Ксать - посмотрел на форуме > http://sutrong.ru/viewtopic.php?id=1070&p=5, симпатично (думал родил безделушку

Все шикарно, спасибо. Я поставила ограничение по ширине 140рх. Такой размер вполне неплохо смотрится. Если аккуратно нарисовать такую рамку, которая будет универсальной по размеру (то бишь с эстетичной декоративной частью при любым размерах), то на первый взгляд не сразу даже понятно, как же это она так умно подстраивается?)

Deff написал(а):

Там у Вас мелькнула идея по горизонтали поставить ближе к положению уже с рамкой

То, что доктор прописал! Только изменила 18 на 12, по ширине моей рамки. Теперь аватарка изначально грузится в нужное место и процесс "появления" рамки не привлекает внимания.

Попробовала и сообразила, что ава то не только в сторону отпрыгивает! *вот я пидаля*
Идеальная статика выходит, если сделать отступ еще сверху и снизу

Код:
<style>
ul li.pa-avatar.item2 img {
margin-left:12px; margin-top:12px; margin-bottom:12px;}
</style>

Пример

Отредактировано Ksana (2011-01-19 23:49:54)

0

20

Ksana написал(а):

<style>
ul li.pa-avatar.item2 img {
margin-left:12px; margin-top:12px; margin-bottom:12px;}
</style>

тогда уж проще и правильнее (отступ то сверху тож нужон

<style>
ul li.pa-avatar.item2 img {margin:21px;}
</style>

И всё таки 21 - снял скриншот (у вас  без скрипта и с установкой и вычел разницу в пейнте и со скриптом) - сдвиг по всем осям 21 (очевидно таблица имеет паддинги внешние, акромя толщины рамки
при 21 и визуально никаких подвижек

Отредактировано Deff (2011-01-20 00:10:19)

0

21

Deff написал(а):

тогда уж проще и правильнее (отступ то сверху тож нужон

Тоже верно. Но кто-то может и не захочет со всех сторон. Пусть имеют поле для маневров)

Deff написал(а):

при 21 и визуально никаких подвижек

Странно. У меня с 12 так же корректно работает.
Тоже скринами сверила. Но так даже лучше - не люблю скрытых обстоятельств)

0

22

Ksana написал(а):

Тоже скринами сверила.

у меня пошустрее стало(машинка старенькая - очевидно без подвижек работает побыстрее

И в Опере и в Мазилле (в Хроме скорость не изменилась ( наверно он и сам долго думает

(*Хотя при сегодняшних делах на сервисе - для тестов не лучший день

Отредактировано Deff (2011-01-20 00:31:58)

0

23

Deff написал(а):

И в Опере и в Мазилле

Странно, а у меня опера в мозиле медленнее

Отредактировано Ksana (2011-01-20 00:33:41)

0

24

Ksana (*Вообщем то есть идея, как сократить время пертурбаций изображения ( но наверно не сегодня этим займусь

Отредактировано Deff (2011-01-20 01:00:44)

0

25

Deff написал(а):

Гы - а сейчас и у меня медленнее (я ж грил про траблы с сервисом

Да последние пару дней стреляться хочется :tired:  ^^

0

26

если вы не против, можно я себе тоже поставлю рамочку????  :blush: сделаю свою, там же в первом коде надо ставить 4 линии рамки?

0

27

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

вот скрин, ширина аватара там поставлено 160

0

28

Tusich ну добавь в стиль таблички пару строк - значения красным симметричные - но противоположные по знаку - (*можно регулировать сдвиг

li.pa-avatar.item2{
margin:0 4px 0 -4px!important;}

0

29

Deff
где это найти? я уже не помню, где там в стиле эта табличка.

0

30

Tusich В скрипте стиль

0


Вы здесь » Форум поддержки пользователей ZeroParking » Заказ скриптов » [отвечено] Динамичная рамка для аватара


Рейтинг форумов | Создать форум бесплатно