Тема для профиля как в социальных сетях для uCoz


Тема для профиля как в социальных сетях для uCoz

700
10 из 10
Проголосовало: 8






Всем привет, вы наверно все видели в популярных социальных сетях есть такая фишка, как выбор фона своего профиля, и при установке данной обложки на профиль в соц сети, её видят все, кто заходит в профиль пользователя... Но как говорится ucoz'овские сайты идут в ногу со временем, и не хотят отставать от популярных социалок, и каждый администратор своего маленького сайта хочет чуть-чуть выпендриться, и сделать данную фишку на свой сайт (т.к. в стандартных настройках uCoz такой функции нету, потому что админы uCoz'а не идут в ногу со временем), но не у всех есть достаточные знания для решения данной проблемы, и тут на помощь приходят фрилансеры, и люди которые за бесплатно делают данные фичи, и вот поэтому я предлагаю вам данную фичу, что бы вы могли выпендрится чуть-чуть, и хоть как-то разнообразить ваш сайт не серыми красками))

Возможности скрипта:
1. Установка обложки по URL
2. При вставке URL она сразу отображается.
3. Вы можете расположить ее как вам нужно.

Требования:
1. Модуль Фотографии. (Или иной можно переделать на любой).

Установка:
1. Добавим в ваш профиль HTML:

Код

<div id="head_f"></div>  
  <div id="uCoverDB" style="display:none;">  
  <div id="cover_url-position">Ok</div>  
  <input id="uPeople_cover" type="number" min="0" value="1" name="cover">  
  <input id="cover_url" name="cUrl" type="text" placeholder="Вставте url изображения">  
  <div id="cover_uri" style="display:none;"></div><div id="cover_tLoad" style="display:none;">Производим загрузку...</div>  
  <div id="cover_url-ok">Ok</div>  
  </div>


2. Добавим Кнопку отображения uCoverDB для добавления обложки видимую только вам

Код

<?if($_IS_OWN_PROFILE$)?><div id="ucodes_center_dannye_edit_cover">Изменить обложку</div><?else?><?endif?>


3. Добавим скрипт после body:

Код

<script type="text/javascript">  
  var timeline = new Object();  
  timeline.feyssmesh = {  
  _userid:'$_USER_ID$', copyright: 'ucodes.ru'  
  }  
  </script>  


4. Также добавим форму отправки и загрузку фото:

Код

$(function () {  
  $.fn.mytoggle = function () {  
  var b = arguments;  
  return this.each(function (i, el) {  
  var a = function () {  
  var c = 0;  
  return function () {  
  b[c++ % b.length].apply(el, arguments)  
  }  
  }();  
  $(el).click(a)  
  })  
  };  
  $('#uPeople_cover').click(function () {  
  var uCover = $('input#uPeople_cover').val();  
  $('div#head_f').css('background-position','0px -'+uCover+'px');  
  });  
  $('#uPeople_cover').focus(function () {  
  var uCover = $('input#uPeople_cover').val();  
  $('div#head_f').css('background-position','0px -'+uCover+'px');  
  });  
  $('#uPeople_cover').blur(function () {  
  var uCover = $('input#uPeople_cover').val();  
  $('div#head_f').css('background-position','0px -'+uCover+'px');  
  });  
  $('#uPeople_cover').keyup(function () {  
  var uCover = $('input#uPeople_cover').val();  
  $('div#head_f').css('background-position','0px -'+uCover+'px');  
  });  
  $('input#cover_url').blur(function () {  
  var StCovers = $('input#cover_url').val();  
  $('div#head_f').css('background','#0084B4 url('+StCovers+') no-repeat center fixed');  
  $('#head_f').error(function(){  

  $('div#head_f').css('background','#0084B4 url(http://webo4ka.ru/Ucoz8/458320612.png) no-repeat center fixed');  
  });  
  });  
  $('div#ucodes_center_dannye_edit_cover').mytoggle(function() {  
  $('div#uCoverDB').show();  
  }, function() {  
  $('div#uCoverDB').hide();  
  }  
  );  
  setTimeout(function(){ $('#cover_uri').load('/photo/0-1-0-17-'+timeline.feyssmesh._userid+' #uPhoto_bd:first'); }, 500);  
  setTimeout(function(){ var uCoveres = $('#uPhoto_url').text(); var uCovName = $('#uPhoto_name').text(); $('div#head_f').css('background','#0084B4 url('+uCoveres+') no-repeat 0px -'+uCovName+'px fixed'); }, 2500);  
  $('#cover_url-ok').click(function () {  
  $('#cover_tLoad').show().html('Производим загрузку...');  
  $.get('/photo/0-0-0-1', function(data){  
  var ssid = $('input[name="ssid"]', data).val();  
  $.post('/photo/', {  
  a: '14',  
  jkd428: '1',  
  jkd498: '1',  
  ocat: '1',  
  uphoto1: $('#cover_url').val(),  
  org: '1',  
  name1: $('#uPeople_cover').val(),  
  ssid: ssid  
  }, function(str){  
  fields = $('cmd[p="content"]', str).text();  
  if(fields.indexOf('сервере')!=-1){ $('#cover_tLoad').show().html('Обложка не найдена!'); $('#cover_tLoad').hide(); return; }  
  if(fields.indexOf('Добавлены')!=-1){ $('#cover_tLoad').show().html('Обложка загружена!. Обновляем!');  
  setTimeout(function(){ $('div#uCoverDB, #cover_tLoad').hide(); }, 1100); }  
  else{ $('#cover_tLoad').show().html('Обложка не загружена. Ошибка при передачи!'); $('#cover_tLoad').hide();}  
  });  
  });  
  });  
  });


5. Добавим В вид материалов фотоальбома код (Можете ограничить вывод только для вашей категории Условным оператором - после в js сменить url на вашу категорию.):

Код

<div id="uPhoto_bd" style="display:none;">  
  <div id="uPhoto_url">$FULL_PHOTO_DIRECT_URL$</div>  
  <div id="uPhoto_name">$PHOTO_NAME$</div>  
  </div>


6. Базовое CSS пишем свое для своего сайта:

Код

div#head_f {  
  background: #0084B4 url(http://webo4ka.ru/Ucoz8/458320612.png) no-repeat center fixed;  
  width: 100%;  
  height: 195px;  
  position: absolute;  
  z-index: -999;  
  top: 61px;  
  background-size: cover !important;  
  }  
  input#uPeople_cover {  
  position: absolute;  
  margin: -72px 0px 0px -10px;  
  padding: 5px;  
  font-weight: bold;  
  width: 80px;  
  text-align: center;  
  border: 2px solid #F2F5F7;  
  }  

  input#cover_url {  
  background: #F2F5F7;  
  color: steelblue;  
  border: none;  
  position: absolute;  
  margin: -43px 0px 0px -10px;  
  width: 340px;  
  padding: 7px;  
  }  
  div#cover_url-ok {  
  background: #F2F5F7;  
  color: steelblue;  
  border: none;  
  position: absolute;  
  margin: -43px 0px 0px 345px;  
  padding: 8px;  
  font-weight: bolder;  
  cursor: pointer;  
  }  
  div#cover_url-position {  
  background: #F2F5F7;  
  color: steelblue;  
  border: none;display:none;  
  position: absolute;  
  margin: -43px 0px 0px 957px;  
  padding: 9px;  
  font-weight: bolder;  
  cursor: pointer;  
  }  
  div#uCoverDB {  
  position: absolute;  
  }  
  div#cover_tLoad {  
  position: absolute;  
  background: #fff;  
  width: 280px;  
  display: inline-block;  
  margin: -83px 0px 0px 345px;  
  padding: 5px;  
  font-weight: bold;  
  border-radius: 1px;  
  }  
  div#cover_tLoad:after {  
  top: 100%;  
  left: 16px;  
  border: solid transparent;  
  content: " ";  
  height: 0;  
  width: 0;  
  position: absolute;  
  pointer-events: none;  
  border-color: rgba(255, 255, 255, 0);  
  border-top-color: #fff;  
  border-width: 8px;  
  margin-left: -8px;  
  }  


7. Модуль не привередлив к настройке и требует 1 категорию. (Вы можете создать свою и указать в js ее ID - ocat: '1', ), Так должна стоять галочка на поиск материалов пользователя.
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://ucodes.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: