10.11.2011 16:10:48
Предпросмотр Дизайнов
Настройка шаблона состоит из нескольких шагов.
Шаг 1 - устанавливаем страницу. Здесь есть два варианта сделать это, для удобства выделил их разными цветами.
Вариант 1: Если вы НЕ используете сервис редактор кнопок.
1.1. Находим пустую страницу.
Допустим, страница под номером 5.
Добавляем туда следующий код:
<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: "НазваниеДиза1 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину1.jpg", img2: "http://путь/к/крупному/скрину1.jpg"},
{id: 1, name: "НазваниеДиза2 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину2.jpg", img2: "http://путь/к/крупному/скрину2.jpg"},
{id: 3, name: "НазваниеДиза3 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину3.jpg", img2: "http://путь/к/крупному/скрину3.jpg"}
];
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=175 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] || 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-350)/2;
m.style.left = (document.body.clientWidth-500)/2;
m.style.width = "500px";
m.style.height = "350px";
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=[ .... ] прописываем все дизайны, используемые в чате.<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: "НазваниеДиза1 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину1.jpg", img2: "http://путь/к/крупному/скрину1.jpg"},
{id: 1, name: "НазваниеДиза2 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину2.jpg", img2: "http://путь/к/крупному/скрину2.jpg"},
{id: 3, name: "НазваниеДиза3 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину3.jpg", img2: "http://путь/к/крупному/скрину3.jpg"}
];
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=175 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] || 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-350)/2;
m.style.left = (document.body.clientWidth-500)/2;
m.style.width = "500px";
m.style.height = "350px";
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>
id: можно взять в анминке, если направить на название диза мышкой, ссылка будет вида http://вашча/?d=id.
name: название дизайна. Если диз назывался "Мой дизайн (с) Вася", то прописать его лучше всего так: name: "Мой дизайн <small>by Вася</small>", или name: "Мой дизайн <small>© Вася</small>", как вам больше нравится.
img: путь к картинке с превьюшкой скрина дизайна. Размер 250х175. В принципе, можно и свои размеры юзать, но в этом случае не забудьте пробежаться по коду и поменять их на свои. Загружать картинку на любой хостинг кроме savepic (savepic добавил august4u.ru в черный список).
img2: пусть к картинке с более крупной превьюшкой дизайна. Размер 500х350. Загружать также, как и img.
Внимание!!! Не забудьте, что после } последнего элемента запятая строго НЕ СТАВИТСЯ. На этом запарывается большинство криворуких админов.
1.2. Прописываем виртуальный каталог.
Если мы юзали пятую страницу, выглядеть он будет так:
Путь: /designpreview/
Запрос: /page/5/
Вариант 2: Если вы используете сервис редактор кнопок (или используете другой, применяющий подобную структуру страницы).
1.1. Находим страницу с сервисами code4august (или другую, строго сходную по формате блоков).
Добавляем туда следующий блок (желательно в начало, чтобы долго по коду не искать):
%DESIGNER<<<EOF
<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: "НазваниеДиза1 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину1.jpg", img2: "http://путь/к/крупному/скрину1.jpg"},
{id: 1, name: "НазваниеДиза2 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину2.jpg", img2: "http://путь/к/крупному/скрину2.jpg"},
{id: 3, name: "НазваниеДиза3 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину3.jpg", img2: "http://путь/к/крупному/скрину3.jpg"}
];
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=175 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] || 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-350)/2;
m.style.left = (document.body.clientWidth-500)/2;
m.style.width = "500px";
m.style.height = "350px";
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>
EOF%
В конец той же страницы добавляем условие отображения этого блока:<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: "НазваниеДиза1 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину1.jpg", img2: "http://путь/к/крупному/скрину1.jpg"},
{id: 1, name: "НазваниеДиза2 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину2.jpg", img2: "http://путь/к/крупному/скрину2.jpg"},
{id: 3, name: "НазваниеДиза3 <small>by Автор</small>", img: "http://путь/к/мелкому/скрину3.jpg", img2: "http://путь/к/крупному/скрину3.jpg"}
];
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=175 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] || 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-350)/2;
m.style.left = (document.body.clientWidth-500)/2;
m.style.width = "500px";
m.style.height = "350px";
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>
EOF%
%IF(%EQ(%GET("p")%, "designer")%, %(%DESIGNER%)%, "")%
В секцию var des=[ .... ] прописываем все дизайны, используемые в чате.id: можно взять в анминке, если направить на название диза мышкой, ссылка будет вида http://вашча/?d=id.
name: название дизайна. Если диз назывался "Мой дизайн (с) Вася", то прописать его лучше всего так: name: "Мой дизайн <small>by Вася</small>", или name: "Мой дизайн <small>© Вася</small>", как вам больше нравится.
img: путь к картинке с превьюшкой скрина дизайна. Размер 250х175. В принципе, можно и свои размеры юзать, но в этом случае не забудьте пробежаться по коду и поменять их на свои. Загружать картинку на любой хостинг кроме savepic (savepic добавил august4u.ru в черный список).
img2: пусть к картинке с более крупной превьюшкой дизайна. Размер 500х350. Загружать также, как и img.
Внимание!!! Не забудьте, что после } последнего элемента запятая строго НЕ СТАВИТСЯ. На этом запарывается большинство криворуких админов.
1.2. Прописываем виртуальный каталог.
Если мы юзали пятую страницу, выглядеть он будет так:
Путь: /designpreview/
Запрос: /page/5/?p=designer
Шаг 2 - Настраиваем шаблон Шаблоны1->Настройки
Ищем следующий блок:
%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%
И меняем его на:<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%
%DESIGN_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Дизайн чата</th></tr>
<tr><td class=t id=design>
%radio("design", %CHAT("DESIGN")%, %CHAT_DESIGN%, "<br>")%
%button("designer", "Предпросмотр дизайнов >>>", "Предпросмотр дизайнов", "class=btn style='width:100%' onclick=\"root.wwo('Designer', '/designpreview/', 'Designer', 1000, 700, 131);return false;\"")%</br>
</td></tr>
</table><br>
END%
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Дизайн чата</th></tr>
<tr><td class=t id=design>
%radio("design", %CHAT("DESIGN")%, %CHAT_DESIGN%, "<br>")%
%button("designer", "Предпросмотр дизайнов >>>", "Предпросмотр дизайнов", "class=btn style='width:100%' onclick=\"root.wwo('Designer', '/designpreview/', 'Designer', 1000, 700, 131);return false;\"")%</br>
</td></tr>
</table><br>
END%
Шаг 3 - Обязательно тестируем все дизайны, и если какой-то из них или все не работают, исправляем.