Предпросмотр дизайнов

**Admin** Пн Ноя 01, 2010 10:57 pm

Данный код добавляет в личные настройки кнопку, по нажатию на которую открывается окно с предпросмотром дизайнов чата.

Сделайте резервные копии всех используемых шаблонов.
HTML-шаблоны 1 — Настройки. Найти:
Код HTML:
%DESIGN_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Дизайн чата</th></tr>
<tr><td class=t>
%radio("design", %CHAT("DESIGN")%, %CHAT_DESIGN%, "<br>")%
</td></tr>
</table><br>
END%Добавляем кнопку:
Код HTML:
%DESIGN_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Дизайн чата</th></tr>
<tr><td class=t>
%radio("design", %CHAT("DESIGN")%, %CHAT_DESIGN%, "<br>")%
<input class="btn" type="button" title="Просмотр дизайнов" value="Просмотр дизайнов" name="designpreview" onclick="parent.wwo('Designpreview', '/designpreview/', 'Designpreview', 1000, 700, 131); return false;" style="width: 100%;"/>
</td></tr>
</table><br>
END%Надпись на кнопке, ширину и высоту окна (1000 и 700) можете поставить свои.
Виртуальные каталоги. Добавляете строчку:
/designpreview/ —> /page/X/
где Х — номер свободной страницы чата.
Страницы — Страница X. Код страницы:
Код HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<title>Предпросмотр дизайнов</title>
%CSS(13)%
<style>
.block1 { text-align: center; padding: 15px; float:left; width: 270px; }
.block1 img { cursor: url(http://code4august.ru/magnifyplus.cur), auto; }
#magnify { position: fixed; padding: 0px; border: 1px solid black; cursor: url(http://code4august.ru/magnifyminus.cur), auto; -moz-box-shadow: 10px 10px 50px #000; -webkit-box-shadow: 10px 10px 50px #000; box-shadow: 10px 10px 50px #000; }
small { font-size: xx-small; font-style: italic; font-weight: normal; }
</style>
</head>
<body>
<h1>Предпросмотр дизайнов</h1>
</body>
<script>
var des=[
{id: 0, name: "Супер-пупер <small>by eXandr</small>", img: "http://ссылка_на_малое_превью_1.png", img2: "http://ссылка_на_большое_превью_1.png"},
{id: 1, name: "Домик <small>by Ниф-ниф</small>", img: "http://ссылка_на_малое_превью_2.png", img2: "http://ссылка_на_большое_превью_2.png"},
{id: 2, name: "Дом <small>by Наф-наф</small>", img: "http://ссылка_на_малое_превью_3.png", img2: "http://ссылка_на_большое_превью_3.png"},
{id: 3, name: "Домище <small>by Нуф-нуф</small>", img: "http://ссылка_на_малое_превью_4.png", img2: "http://ссылка_на_большое_превью_4.png"}
];
for(i = 0; i < des.length; i++){
var div = document.createElement('div');
div.className = 'block1';
div.innerHTML = "<h3>"+des[i].name+"</h3>";
div.innerHTML += "<img src='"+des[i].img+"' width=250 height=150 onclick='magnifyDesign("+i+")'>";
div.innerHTML += "<input type='button' class='btn' style='width:80px; margin-top:5px;' onclick='setDesign("+des[i].id+")' value='ОК'/> ";
div.innerHTML += "<input type='button' class='btn' style='width:160px; margin-top:5px;' onclick='viewDesign("+des[i].id+")' value='Примерить'/>";
document.body.appendChild(div);
}
function setDesign(id){
var of = (opener.document.getElementsByName("august_info")[0].contentWindow || opener.document.getElementsByName("august_who")[0].contentWindow);
var inputs = of.document.getElementById('design').getElementsByTagName('INPUT');
for(i = 0; i < inputs.length; i++) if(inputs[i].type=='radio') inputs[i].checked = (id == inputs[i].value);
window.close();
}
function viewDesign(id){
opener.loadDesign(id);
}
function magnifyDesign(i){
var m = document.getElementById('magnify');
if(!m){ m = document.createElement('img'); m.id = 'magnify'; document.body.appendChild(m); }
m.src = 'about:blank';
m.src = des[i].img2;
m.style.top = (document.body.clientHeight-360)/2;
m.style.left = (document.body.clientWidth-600)/2;
m.style.width = "600px";
m.style.height = "360px";
if(window.getComputedStyle) m.style.borderColor = window.getComputedStyle(document.body,null).getPropertyValue("color");
m.style.display = 'block';
m.onclick = function(){
document.body.removeChild(document.getElementById('magnify'));
}
}
</script>
</html>Пояснения к коду:
var des=[ — тут начинается определение дизайнов чата, каждый из которых записывается внутри скобок {…}, между ними идут запятые. Описание дизайна состоит из
id: 1 — номер дизайна (как в ссылке http://адрес.чата?d=1)
name: "Домик <small>by Ниф-ниф</small>" — название и автор дизайна
img: "http://ссылка_на_малое_превью.png" — ссылка на скрин дизайна шириной 250 пикселей, высотой 150 пикселей
img2: "http://ссылка_на_большое_превью.png" — ссылка на скрин дизайна шириной 600 пикселей, высотой 360 пикселей

При других размерах превью картинок требуется незначительное изменение кода шаблона.
Внимание! Код публикуется под лицензией GPL. Если кратко, то вы можете использовать, публиковать, менять его для своих нужд, публиковать измененные варианты кода, но обязательно выполнять при этом условия:

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