122

Рейтинг: 0.0/0

Метки

профиль пользователя

Опрос: Чего добавлять больше?

Главная » 2012 » Февраль » 12 » Профиль пользователя во всплывающем окне с эффектом вращения

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

Установка

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({
  pnotify_title: 'Профиль пользователя $USERNAME$',
  pnotify_text: $('#form_notice$ID$').html(),
  pnotify_insert_brs: false,
  pnotify_animation: {effect_in: function(status, callback, pnotify){
  var source_note = 'Always call the callback when the animation completes.';
  var cur_angle = 0;
  var cur_opacity_scale = 0;
  var timer = setInterval(function(){
  cur_angle += 10;
  if (cur_angle == 360) {
  cur_angle = 0;
  cur_opacity_scale = 1;
  clearInterval(timer);
  } else {
  cur_opacity_scale = cur_angle / 360;
  }
  pnotify.css({
  '-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
  }).fadeTo(0, cur_opacity_scale);
  if (cur_angle == 0)
  callback();
  }, 20);
  }, effect_out: function(status, callback, pnotify){
  var source_note = 'Always call the callback when the animation completes.';
  var cur_angle = 0;
  var cur_opacity_scale = 1;
  var timer = setInterval(function(){
  cur_angle += 10;
  if (cur_angle == 360) {
  cur_angle = 0;
  cur_opacity_scale = 0;
  clearInterval(timer);
  } else {
  cur_opacity_scale = cur_angle / 360;
  cur_opacity_scale = 1 - cur_opacity_scale;
  }
  pnotify.css({
  '-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  '-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
  'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
  }).fadeTo(0, cur_opacity_scale);
  if (cur_angle == 0) {
  pnotify.hide();
  callback();
  }
  }, 20);
  }}
  });" type="button" />
  <div id="form_notice$ID$" style="display: none;">
</div>

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

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>

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

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 0

Оставь комментарий первым!