Форум ChatPlanet.ru

Форум ChatPlanet.ru (http://www.chatplanet.ru/forum/index.php)
-   Шаблоны (http://www.chatplanet.ru/forum/forumdisplay.php?f=15)
-   -   Предпросмотр дизайнов (http://www.chatplanet.ru/forum/showthread.php?t=896)

Shogal 05.03.2010 00:40

Предпросмотр дизайнов
 
Данный код добавляет в личные настройки кнопку, по нажатию на которую открывается окно с предпросмотром дизайнов чата.
  1. Сделайте резервные копии всех используемых шаблонов.
  2. 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) можете поставить свои.
  3. Виртуальные каталоги. Добавляете строчку:
    /designpreview/ —> /page/X/
    где Х — номер свободной страницы чата.
  4. Страницы — Страница 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='ОК'/>&nbsp;";
      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).
  • Не использовать его в коммерческих целях.
  • Любые измененные варианты кода, а также программные продукты, имеющие в своём составе этот код, тоже публиковать под этой лицензией.

Shogal 05.03.2010 15:38

Если вы испытываете дефицит свободных страниц, код страницы дизайна можно объединить с другой страницей если эта страница объединяет в себе несколько страниц, как например используется в Code4august и описано тут: http://www.chatplanet.ru/forum/showthread.php?t=569
В таком случае поместите страницу в блок, получится примерно так:
Код HTML:

%DESIGNS<<<END
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<title>Препдпросмотр дизайнов</title>
%CSS(13)%
........ бла бла бла ......
</script>
</html>
END%

и в самом низу страницы дописываем
Код HTML:

%IF(%EQ(%GET("p")%, "designs")%, %(%DESIGNS%)%,"")%
В этом случае страница уже будет доступна по этому адресу:
/page/X/?p=designs (его и прописать в вирт.шаблоны)

Чуня 06.03.2010 19:43

Всё это прекрасно. Но не могу понять, как сделать, чтобы страница предпросмотра показывала более 4 превью дизайнов. Только 4 и больше не хочет. Не пойму, что надо изменить, чтобы получить все 10 превью.

Lonely_man 06.03.2010 20:51

Чуня,
Вот так вот:
Код HTML:

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"}
  {id: 4, name: "Домище1 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_5.png", img2:  "http://ссылка_на_большое_превью_5.png"}
  {id: 5, name: "Домище2 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_6.png", img2:  "http://ссылка_на_большое_превью_6.png"}
  {id: 6, name: "Домище3 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_7.png", img2:  "http://ссылка_на_большое_превью_7.png"}
  {id: 7, name: "Домище4 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_8.png", img2:  "http://ссылка_на_большое_превью_8.png"}
  {id: 8, name: "Домище5 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_9.png", img2:  "http://ссылка_на_большое_превью_9.png"}
  {id: 9, name: "Домище6 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_10.png", img2:  "http://ссылка_на_большое_превью_10.png"}
];


Чуня 06.03.2010 21:29

Цитата:

Сообщение от Lonely_man (Сообщение 18433)
Чуня,
Вот так вот:
Код HTML:

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"}
  {id: 4, name: "Домище1 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_5.png", img2:  "http://ссылка_на_большое_превью_5.png"}
  {id: 5, name: "Домище2 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_6.png", img2:  "http://ссылка_на_большое_превью_6.png"}
  {id: 6, name: "Домище3 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_7.png", img2:  "http://ссылка_на_большое_превью_7.png"}
  {id: 7, name: "Домище4 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_8.png", img2:  "http://ссылка_на_большое_превью_8.png"}
  {id: 8, name: "Домище5 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_9.png", img2:  "http://ссылка_на_большое_превью_9.png"}
  {id: 9, name: "Домище6 <small>by Нуф-нуф</small>", img:  "http://ссылка_на_малое_превью_10.png", img2:  "http://ссылка_на_большое_превью_10.png"}
];


Вот я вот так вот именно сделал и предпросмотр- чистая страница. Там ещё что-то надо, просто прописать ещё 6 дизов- недостаточно.

Lonely_man 06.03.2010 22:01

Чуня, ни чего больше не надо. у меня 8 дизов показывает без проблем

Чуня 06.03.2010 22:48

Цитата:

Сообщение от Lonely_man (Сообщение 18437)
Чуня, ни чего больше не надо. у меня 8 дизов показывает без проблем

А у меня нет. Как только добавляю пятую строчку, всё пропадает, кроме заголовка.

Чуня 06.03.2010 23:16

Lonely_man, Дайте ссылку на Ваш чат, пожалуйста, в личные сообщения.

Lonely_man 06.03.2010 23:44

Чуня, ещё раз повторяю проверьте код. я тоже по началу с таким же столкнулся. делайте всё на торопясь.

Чуня 06.03.2010 23:48

Lonely_man, Да ладно... Я беру всего-лишь "чистый" код отсюда, добавляю пятую строчку {id: 4, name: "Домище1 <small>by Нуф-нуф</small>", img:..... и всё мёртвое.


Текущее время: 18:43. Часовой пояс GMT +4.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.