Профиль пользователя во всплывающем окне с эффектом вращения (9.2 Kb)

Категория Скрипты Дата18-Янв-2025 ЗагрузокЗагрузок: 40
Ссылка для скачивание будет доступна через: сек.
Уважаемый Гость сайта если вы не хотите ожидать 31 сек. для того что бы скачать "Профиль пользователя во всплывающем окне с эффектом вращения" размером в: (9.2 Kb) то зарегистрируйтесь или войдите под своим профилем!



В принципе, понятно, о чем пойдет речь: очередная реализация
всплывающего окна с профилем пользователя на форуме, при этом реализован
эффект вращения при открытии/закрытии профиля. Закрытие профиля можно
произвести кликом по иконке закрытия окна, либо это произойдет
автоматически через некоторое время.

Вы можете сразу посмотреть видео демонстрацию работы этого решения







Установка

1) Скажу сразу, скрипт работает с системной
библиотекой jQuery версии 1.6.1, поэтому если у вас по умолчанию в
настройках выставлена версия 1.3.2, выберите 1.6.1 (в Панели управления
сайтом в Общих настройках)

2) Войдите в редактирование шаблона "Общий вид страниц форума" и между тегами

Code
<head>...</head>


добавьте файлы стилей CSS

Code
<link

href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css"
media="all" rel="stylesheet" type="text/css" />  
  <link href="/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />  
  <link href="/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />  
  <style type="text/css">  
  /* <![CDATA[ */  
  html, body {font-family: Arial,sans-serif;font-size: 12px;}  
  .ui-widget {font-size: 75% !important;}  
  </style>


После тега

Code
<body>


добавьте файл скрипта

Code
<script type="text/javascript" src="/jquery.pnotify.js"></script>



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

3) Теперь войдите в редатирование шаблона "Форум - Вид материалов" и разместите код, указанный ниже в нужном вам месте:
Code
<input value="Профиль" onclick="$.pnotify({  <br>  pnotify_title: 'Профиль пользователя $USERNAME$',  <br>  pnotify_text: $('#form_notice$ID$').html(),  <br>  pnotify_insert_brs: false,  <br>  pnotify_animation: {effect_in: function(status, callback, pnotify){  <br>  var source_note = 'Always call the callback when the animation completes.';  <br>  var cur_angle = 0;  <br>  var cur_opacity_scale = 0;  <br>  var timer = setInterval(function(){  <br>  cur_angle += 10;  <br>  if (cur_angle == 360) {  <br>  cur_angle = 0;  <br>  cur_opacity_scale = 1;  <br>  clearInterval(timer);  <br>  } else {  <br>  cur_opacity_scale = cur_angle / 360;  <br>  }  <br>  pnotify.css({  <br>  '-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')  <br>  }).fadeTo(0, cur_opacity_scale);  <br>  if (cur_angle == 0)  <br>  callback();  <br>  }, 20);  <br>  }, effect_out: function(status, callback, pnotify){  <br>  var source_note = 'Always call the callback when the animation completes.';  <br>  var cur_angle = 0;  <br>  var cur_opacity_scale = 1;  <br>  var timer = setInterval(function(){  <br>  cur_angle += 10;  <br>  if (cur_angle == 360) {  <br>  cur_angle = 0;  <br>  cur_opacity_scale = 0;  <br>  clearInterval(timer);  <br>  } else {  <br>  cur_opacity_scale = cur_angle / 360;  <br>  cur_opacity_scale = 1 - cur_opacity_scale;  <br>  }  <br>  pnotify.css({  <br>  '-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  '-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),  <br>  'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')  <br>  }).fadeTo(0, cur_opacity_scale);  <br>  if (cur_angle == 0) {  <br>  pnotify.hide();  <br>  callback();  <br>  }  <br>  }, 20);  <br>  }}  <br>  });" type="button" />  <br>  <div id="form_notice$ID$" style="display: none;">  <br>  </div><br>

а в самом низу этого шаблона добавьте скрипт:

Code
<script type="text/javascript">  
  $('#form_notice$ID$').load('/index/8-$UID$ #test');  
  </script>


4) последним шагом нужно открыть редактирование шаблона "Персональная страница пользователя" и сразу после открывающего тега

Code
<body>


добавить


Code
<div id="test">


а в самом низу кода шаблона, перед закрывающим тегом

Code
</body>


вставить закрывающий тег блока

Code
</div>


Установка завершена.



Теги: Профиль пользователя во всплывающем, Профиль пользователя
  • Похожие Файлы:
Добавил: silver Просмотров: (434) Комментариев: (0) silver
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
 
ComForm">
avatar

Радио

Вконтакте

Последнии комментарии


а еще запретить продажу програм фирмы 1с во всех ее проявлениях. будь то игра или программы учета!!!



Answer: Благодарим за информацию.


Не плохая идея но дорого будет стоить будет дорого наверное



Сюся, если еще сравнивать эту  соц. сеть с сетью "Друзи" то это же вообще пипец полный! Не говоря что не кто не переманит пользователей с ВК.

Наш опрос

Полезные для вас наши новости?


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0