Скрипт смены фона сайта uCoz
05.06.2013 в 15:44
Автор: Macros | Комментариев (0) | Просмотров: 376

После нажатия на кнопку весь дизайна будет меняться на ваше устмотрение.
Итак начнём с конструктора и создания нового блока.
После создания в конструкторе блока, помещаем в него такой HTML код:
Код
<center>[<small><a href="javascript://" onclick="deletebg()">Удалить свой фон</a></small>] [<small>Растянуть фон? <input id="str" type="checkbox"></input></small>]</center>  
  <input id='bg' placeholder='Ваша прямая ссылка на фон, без кавычек' size='35' onclick='select()'></input><center><button value='Сменить фон' onclick='bgchange()'>Сменить фон</button></center>  
  Или используйте уже имеющееся:<br>  
  <select id="bgs">  
  <option selected disabled>Варианты фона</option>  
  <option disabled>Вернуть свою ссылку на фон</option>  
  <option value="http://dedicated.3dn.ru/uCoz/images/1/d49ae7da26.png">Якобы windows 8</option>  
  </select>  
  <script type="text/javascript">  
  var dmn="scripttests.ucoz.ru";  
  $(document).ready(function() {  
  $('#bgs').change(function(){  
  $('#bg').val($("select#bgs").val());  
  });  
  $('#str').change(function(){  
  if($("#str").is(':checked')){  
  $('body').removeClass('bg').addClass('bg_temp');  
  setCookie("stretched", "yes", { expires: 999999999, path:"/", domain:dmn} );  
  }else if($("#str").is(':not(:checked)')){  
  $('body').removeClass('bg_temp').addClass('bg');  
  setCookie("stretched", "no", { expires: 999999999, path:"/", domain:dmn} );  
  }  
  });  
  var backgr=getCookie("background")  
  if(backgr){$('#bg').val(backgr);  
  $('#bgs :nth-child(2)').attr("value",backgr);  
  $('#bgs :nth-child(2)').removeAttr("disabled");}  
  });  
  function deletebg(){  
  if(!getCookie("background")){alert("У вас нет установленного фона, удалять нечего")}else{  
  setCookie("background", null, { expires: -1, path:"/", domain:dmn} )  
  alert("Фон выставлен по умолчанию");  
  location.reload(true)}  
  }  
  function bgchange(){  
  if(bg.value!=''){var bg_link=bg.value  
  if(!bg_link.match(/http[^\s\"]+[^\" >]*?/ig)){alert("Вы ввели неверную ссылку на фон")}  
  else{  
  setCookie("background", bg_link, { expires: 999999999, path:"/", domain:dmn} )  
  alert("Новый фон установлен, главная страница будет перезагружена")  
  location.reload(true)  
  }  
  }else{alert("Вы не ввели ссылку на фон")}  
  }  
  </script>

Далее заходим в Общие шаблоны ->Таблица стилей (CSS) и помещаем в любое место, лучше в самый конец чтобы не запутаться :
Код
.bg_temp{  
  background-Position: center;  
  background-Attachment: fixed;  
  background-Repeat: no-repeat;  
  background-size: 100% 100%;  
  -moz-background-size: 100% 100%;  
  -o-background-size: 100% 100%;  
  -webkit-background-size: 100% 100%;  
  }  
  .bg{  
  background-Position: center;  
  background-Attachment: fixed;  
  background-Repeat: no-repeat;  
  }

Далее надо в Глобальные блоки->Верхняя часть сайта в самое начало запихнуть следующий код:
Код
<script type="text/javascript">  
  function getCookie(name) {  
  var matches = document.cookie.match(new RegExp(  
  "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"  
  ))  
  return matches ? decodeURIComponent(matches[1]) : undefined  
  }  
  function setCookie(name, value, props) {  
  props = props || {}  
  var exp = props.expires  
  if (typeof exp == "number" && exp) {  
  var d = new Date()  
  d.setTime(d.getTime() + exp*1000)  
  exp = props.expires = d  
  }  
  if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }  
   
  value = encodeURIComponent(value)  
  var updatedCookie = name + "=" + value  
  for(var propName in props){  
  updatedCookie += "; " + propName  
  var propValue = props[propName]  
  if(propValue !== true){ updatedCookie += "=" + propValue }  
  }  
  document.cookie = updatedCookie  
   
  }  
  var bg_li=getCookie("background")  
  if(bg_li){document.body.style.backgroundImage = 'url('+bg_li+')';}else{document.body.style.backgroundImage = 'url(/wallpaper.jpg)'}  
  document.body.style.padding = '0';  
  document.body.style.margin = '0';  
  $('document').ready(function(){  
  if(getCookie("stretched")=="yes"){$('#str').attr('checked','true');$('body').removeClass('bg').addClass('bg_temp');} else if(getCookie("stretched")=="no" || !getCookie("stretched")){$('#str').removeAttr('checked');$('body').removeClass('bg_temp').addClass('bg');}  
  });  
  </script>

Сохраняем и переходим к следующему пункту настройка всего выше написанного.Итак, скрипт вы установили, далее проверяем код из первого пункта, меняем, если хотим, в списке
Код
<select> в пунктах <option>

на прямые ссылки на фон, к примеру
Код
<option value="http://dedicated.3dn.ru/wallpaper.png">Фон 1</option>


Ниже смотрим строчку var dmn="ваш домен"; тут надо вставить ваш домен, к примеру var dmn="uweb.su"; переменная вроде относится к блоку и должна работать, если не будет, то просто вместо букв dmn вставте туда в кавычках ваш домен.

Далее смотрим код из третьего пункта, строчка
Код
document.body.style.backgroundImage = 'url(/wallpaper.jpg)'


выставляем вместо /wallpaper.jpg путь до вашего фона который будет стандартным и постоянным для всех.

Ну и вроде бы всё, ах да про css и функцию растяжки, как мы все знаем есть фон который либо меньше, либо больше отображаемой части сайта, так вот эта функция (если включена) растягивает (втискивает) ваш фон в границы сайта, css спокойно настраивается и имеет довольно привычный вид.
Фон применяется к тегу body в качестве background-image, так что по идее должно работать на любом сайте.
скрипты юкоз, Скрипты для Ucoz, скрипты ucoz, скрипт смены фона сайта, смена фона сайта
Место свободно
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]