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


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

1432
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: