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

1470
7 из 10
Проголосовало: 4




  • Скачать с сервера
  • Скачать
  • Смотреть демо


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

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


Установка

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>


Установка завершена.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://ps-studio.info
  • Всего комментариев: 2

nikita20031081
-1
nikita20031081 написал: Написано 23 Апреля 2012 в 19:37
Комментарий №1
Установил скрипт, жму кнопку профиль и он не открывается sad

DIMON_-_BEST
-2
DIMON_-_BEST написал: Написано 09 Июня 2012 в 18:24
Комментарий №2
Ты никита джигурда значит

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2115
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    442
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: