Увеличение аватарки по клику.

Доброго времени суток, данный кусокрасполоден в profile_top.tpl мне нужно, чтобы при клике на неё она увеличивалась.

13 комментариев

avatar
JS
<script language = "JavaScript">
function changeSize(i){
  if(i.height=='100') i.height='200'; else i.height='100';
}
</script>

HTML
<img src="{$oUserProfile->getProfileAvatarPath(100)}"  onclick="changeSize(this)" alt="avatar" itemprop="photo" />

Не проверял, а вы попробуйте
avatar
Отчёт
<script language = "JavaScript">
function changeSize(i){
  if(i.height=='100') i.height='200'; else i.height='100';
}
</script>

Вставил в самое начало profile_top.tpl и заменил
<img src="....>
Но всёравно не получилось, аватар не кликабелен.
avatar
Тоже заинтересован. Есть ли рабочее решение?
avatar
В Synio img обернут в тег а.
JS такой
{literal}
<script type="text/javascript">

$(function(){
	
    $('a.avatar').click(function(){
		var size = $(this).children('img').css("width");
		if (size=="80px")  {
			$(this).children('img').stop(true,true).animate({width:"200px",height:"200px"}, 800);
		}
		else {
			$(this).children('img').stop(true,true).animate({width:"80px",height:"80px"}, 800);
		}
	});
  });
</script>
{/literal}

80px размер из стиля. 200px увеличенный размер, 800 время аминации
href нужно изменить
в шаблоне
<a href="#" class="avatar" ><img src="{$oUserProfile->getProfileAvatarPath(100)}"  alt="avatar" itemprop="photo" /></a>
avatar
Спасибо огромное, всё бы хорошо всё отлично работает, но для полного эффекта, фото должно быть чётким, и нужно сделать так, чтобы при увеличении изображения фото было большим и не расплывчитым, я так понимаю нужно изменить параметры загрузки аватара на сайт.
avatar
Аватар грузится в нескольких размерах.
{$oUserProfile->getProfileAvatarPath(100)} Здесь 100 один из них. Если указать больший из загружаемых, то картинки будет браться с этим размером.
Если изменить размеры загрузки, измерение размеров старых аватаров не будет.
Поэтому размеру лучше добавлять.
avatar
А где это редактировать? Размер загрузки.
avatar
в конфиге.
$config['module']['user']['avatar_size'] = array(100,64,48,24,0); // Список размеров аватаров у пользователя. 0 — исходный размер
Добавляйте свои, оригинал 0.
avatar
Да получилось поменять, извените всёравно не пойму, как мне сделать так: Не увеличеное изображение 100, а увеличинное кликом 400 (с нормальным качеством), пробывал прописывать не получилось.
avatar
В стилях для класса avatar указаны ширина и высота 80px (Synio).
<a href="#" class="avatar" ><img src="{$oUserProfile->getProfileAvatarPath(400)}"  alt="avatar" itemprop="photo" /></a>

$config['module']['user']['avatar_size'] = array(400,100,64,48,24,0);
Но указав 400 это не значит что аватар с таким размером автоматом появиться у всех пользователей, ТОЛЬКО У НОВЫХ.
В шаблоне нужно проверять наличие картинки данного размера.
И не факт что и оригинал большого размера.
avatar
Всё бы оно так, но вот поставил
<img src="{$oUserProfile->getProfileAvatarPath(0)}"
нолик, в яве прописал
if (size=="100px")  {
			$(this).children('img').stop(true,true).animate({width:"300px",height:"300px"}, 200);
		}
		else {
			$(this).children('img').stop(true,true).animate({width:"100px",height:"100px"}, 400);

Качество улучшилось, но всёравно не очень, хотя если в яве сделать увеличение до 200px то качество супер, что же мешает?
avatar
Качество оригинала.
Загрузите аватар 300х300
avatar
Спасибо)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.