Галерея Подарков

Приветствую Всех Подскажите пожалуйста , могу ли я с движком ВВ3 сделать что то похожее на Этот Каталог Подарков Я понимаю , что ВВ3 безшаблонный , но хоть что то похожее можно сделать ???

И мне тоже нужно))))

Сейчас сделаем. Движок там не принципиален.

Меня там интересует 2 вопроса!
1. Как сделать галерею с картинками
2. как сделать так чтобы отнимались очки (например и ну короче деньги и т.д.)

Генератор на отдельной странице, с помощью которого можно сформировать "заказ" и отправить его в виде темы в определенный раздел. Вид темы с заказом:
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Сам генератор будет выглядеть так (внешний вид можно изменять по желанию):


1. Зайдите в ПА > Общие настройки > Безопасность и защита и укажите Запретить неофициальным формулярам постить сообщения и личные сообщения на форуме : Нет. Это нужно сделать обязательно!

2. Откройте ПА > Модули > Управление страницами HTML. Создайте новую страницу:
Название — любое
Вы хотите использовать верх и низ вашего форума? —  Да
Использовать эту страницу в качестве Главной? — Нет
Код HTML :

Код:

<script type="text/javascript" src="http://yourjavascript.com/21139232152/bxslider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider1').bxSlider({
auto:false, // true, false - автоматическая смена слайдов
speed: 600, // целое число - в милисекундах, скорость смены слайдов
pause: 400 // целое число - в милисекундах, период между сменами слайдов
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider1 div img").click(function () {
var linky = jQuery(this).attr("src");
jQuery('input[name="link"]').val('').focus().val(linky);
});

jQuery("#del").click(function () {
jQuery('input[name="link"]').val('');
});

});
</script>

<style type="text/css">

/* настройки таблицы заявки */
#ank_container {
margin: 30px auto;
width: 600px;
border: 4px double #874513;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 13px;
color: #801D1D;
}

/* кнопка Отправить */
input[type="button"] {
background-color: #F7DBAA;
padding: 5px;
margin: 15px auto;
border: 1px solid #A76E19;
border-radius: 5px;
font-size: 15px;
}

/* Поля ввода и комментария */
input[type="text"], textarea {
background-color: #F7ECCC;
border: 1px solid #A76E19;
border-radius: 5px;
padding: 2px;
outline-style: none !important;
}

/* кнопка удалить */
#del {
width: 15px !important;
height: 15px !important;
line-height: 15px;
color: #D87C48;
font-weight: bold;
cursor: pointer;
}

/* настройки слайдера подарков */
#slider_cont {
background:url(http://i40.servimg.com/u/f40/14/80/95/87/grain10.png) #fff;
border: 4px double #874513;
margin:5px;
width:220px!important;
padding:1px;
}

.bx-prev {
position:absolute;
top:45%;
left:1px;
width:31px;
height:31px;
text-indent:-999999px;
background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_p10.png) no-repeat 0 -30px;
}

.bx-next {
position:absolute;
top:45%;
right:1px;
width:31px;
height:31px;
text-indent:-999999px;
background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_n10.png) no-repeat 0 -30px;
}

.bx-next:hover,.bx-prev:hover {
background-position:0 0;
border:0;
}
</style>

<form name="newanket">
<table border="0" id="ank_container">
<tr>
<td style="text-align: center;" colspan="2"><img src="http://i70.servimg.com/u/f70/17/37/83/89/wertwe10.jpg" alt="Подарочная" /></td>
</tr>
<tr>
<td>Ваш ник:</td>
  <td><input type="text" name="Nick" size="35" /></td>
</tr>
<tr>
<td>Ник пользователя которому вы хотите подарить подарок:</td>
  <td><input type="text" name="whom" size="35" /></td>
</tr>
<tr>
<td>Комментарий к подарку:</td>
<td><textarea name="comment" cols="30" rows="5" ></textarea></td>
</tr>
<tr>
<td>

<br /><div style="text-align: center; font-size: 12px;">Выберите подарок, кликнув по нему<br /></div>

<center><div id="slider_cont"><div id="slider1">
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqbx10.png" alt="Медальон" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqcn10.png" alt="Этюдник" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqd510.png" alt="Чернила" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdm10.png" alt="Сюрприз" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdv10.png" alt="Ундервуд" /></div>

</div></div></center>

</td>
               <td>Ссылка на подарок:<input type="text" name="link" size="30" /> <span id="del" title="Удалить ссылку"> [х]</span></td>
            </tr>
<tr>
  <td colspan="2"><input type="checkbox" name="rules" onclick="buttonOk(this, this.form);" /> С вашего счёта снимут 50 очков</td>
            </tr>
            <tr>
              <td style="text-align: center;" colspan="2"><input type="button" name="post" value="Отправить" onclick="formSubmit(this.form, document.post);" disabled /></td>
            </tr>
         </table>
      </form>
      <form  action="/post" method="post" name="post" enctype="multipart/form-data">
        <input type="text" name="subject" style="display: none;" />
        <input type="text" name="username" style="display: none;" />
        <input type="hidden" name="lt" value="0" />
        <input type="hidden" name="mode" value="newtopic" />
        <input type="hidden" name="topictype" value="0" checked="checked" />
        <input type="hidden" name="f" id="f" value="3" />
         <textarea name="message" style="display: none;"></textarea>
           <input type="hidden" name="post" value="Отправить" />
      </form>
<script type="text/javascript">
         function buttonOk(el, elf){
            if(elf.post.disabled) elf.post.disabled=false;
            else elf.post.disabled=true;
         }
         function formSubmit(f, fs){
            if(f.Nick.value && f.whom.value && f.comment.value && f.link.value ){
               fs.subject.value = f.whom.value+", тебе подарок от: "+f.Nick.value;
               fs.username.value = f.Nick.value;
 fs.message.value = "Кому: "+f.whom.value+"\n Комментарий: "+f.comment.value+"\n А вот и подарок: [img]"+f.link.value+"[/img]";
//alert(fs.subject.value+"\n"+fs.username.value+"\n"+fs.message.value+"\n"+fs.post.value);
               fs.submit();
            } else alert("Все поля обязательны для заполнения!");
         }
      </script>

Стили элементов в CSS указаны комментариями.

3. Чтобы добавить / изменить список подарков, найдите фрагмент:

Код:

<div id="slider1">
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqbx10.png" alt="Медальон" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqcn10.png" alt="Этюдник" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqd510.png" alt="Чернила" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdm10.png" alt="Сюрприз" /></div>
<div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdv10.png" alt="Ундервуд" /></div>
</div>

Это слайдер с картинками. Замените ссылки и описания их на свои. Чтобы добавить еще изображения, допишите новые строки в нужном количестве. Пример (новый подарок выделен красным!):

<div id="slider1">
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/wqbx10.png" alt="Медальон" /></div>
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/wqcn10.png" alt="Этюдник" /></div>
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/wqd510.png" alt="Чернила" /></div>
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/wqdm10.png" alt="Сюрприз" /></div>
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/wqdv10.png" alt="Ундервуд" /></div>
<div><img src="https://i.servimg.com/u/f70/17/37/83/89/idea10.png" alt="Идея" /></div>
</div>

Доработано:

• по клику на картинку её адрес сразу добавляется в поле "Ссылка на подарок" (если кликнуть по одной картинке, а потом передумать и кликнуть по другой, то ссылка автоматически обновится)
  
• кнопка Х вообще удаляет ссылку на выбранный подарок
  
• в теме подарок отображается в виде картинки, а не ссылки
  

4. Найдите строку скрипта:

<input type="hidden" name="f" id="f" value="2">

Здесь value="2" цифра 2 указывает, в каком из разделов вашего форума будет создаваться новая тема. Её необходимо поменять в соответствии с нумерацией нужного вам раздела.
Откройте этот раздел на Вашем форуме и посмотрите адресную строку:
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Цифра возле f - это и есть номер раздела. Поставьте ее в скрипт.

5. Как сделать автоматическое снятие очков за отправку подарка
Откройте ПА > Модули > Система очков > Управление очками. Найдите в списке тот раздел, в который будут отправляться темы с подарками и в строке "За тему" укажите отрицательное число, например -50
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Именно столько очков будет сниматься с пользователя, отправившего подарок.
В поле "За сообщение" поставьте ноль. Сохраните настройки.

---

Вариант для использования без верха и низа форума, на чистом фоне. Специально для тех, у кого скрипт генератора несовместим с виджетами или кто просто хочет сделать страницу подарков отличающейся от остальных разделов форума.


1. Зайдите в ПА > Общие настройки > Безопасность и защита и укажите
Запретить неофициальным формулярам постить сообщения и личные сообщения на форуме : Нет
Запретить регистрацию с никами, наиболее часто используемыми спамерами : Нет
Это нужно сделать обязательно! Сохраните изменения.

2. Откройте ПА > Модули > Управление страницами HTML. Создайте новую страницу:
Название — любое
Вы хотите использовать верх и низ вашего форума? — Нет
Использовать эту страницу в качестве Главной? — Нет
Код HTML :

Код:

<!— Вариант II для использования без верха и низа форума -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подарки</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://yourjavascript.com/21139232152/bxslider.min.js"></script>

<script type="text/javascript">
         function buttonOk(el, elf){
            if(elf.post.disabled) elf.post.disabled=false;
            else elf.post.disabled=true;
         }
         function formSubmit(f, fs){
            if(f.Nick.value && f.whom.value && f.comment.value && f.link.value ){
               fs.subject.value = f.whom.value+", тебе подарок от: "+f.Nick.value;
               fs.username.value = f.Nick.value;
 fs.message.value = "Кому: "+f.whom.value+"\n Комментарий: "+f.comment.value+"\n А вот и подарок: [img]"+f.link.value+"[/img]";
//alert(fs.subject.value+"\n"+fs.username.value+"\n"+fs.message.value+"\n"+fs.post.value);
               fs.submit();
            } else alert("Все поля обязательны для заполнения!");
         }
      </script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider1').bxSlider({
auto:false, // true, false - автоматическая смена слайдов
speed: 600, // целое число - в милисекундах, скорость смены слайдов
pause: 400 // целое число - в милисекундах, период между сменами слайдов
});
});
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider1 div img").click(function () {
var linky = jQuery(this).attr("src");
jQuery('input[name="link"]').val('').focus().val(linky);
});

jQuery("#del").click(function () {
jQuery('input[name="link"]').val('');
});

});
</script>

<style type="text/css">

/* общий фон */
body {
background-color: #eee;
font-family: Verdana,Arial,Helvetica,sans-serif;
}

/* настройки таблицы заявки */
#ank_container, .backs {
margin: 20px auto;
width: 600px;
border: 4px double #874513;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 13px;
color: #801D1D;
background-color: #F8F7E4;
}

/* кнопка Отправить */
input[type="button"] {
background-color: #F7DBAA;
padding: 5px;
margin: 15px auto;
border: 1px solid #A76E19;
border-radius: 5px;
font-size: 15px;
}

/* Поля ввода и комментария */
input[type="text"], textarea {
background-color: #F7ECCC;
border: 1px solid #A76E19;
border-radius: 5px;
padding: 2px;
outline-style: none !important;
}

/* кнопка удалить */
#del {
width: 15px !important;
height: 15px !important;
line-height: 15px;
color: #D87C48;
font-size: 18px;
font-family: Verdana;
cursor: pointer;
}

/* настройки слайдера подарков */
#slider_cont {
background:url(http://i40.servimg.com/u/f40/14/80/95/87/grain10.png) #fff;
border: 4px double #874513;
margin:5px;
width:220px!important;
padding:1px;
}

.bx-prev {
position:absolute;
top:45%;
left:1px;
width:31px;
height:31px;
text-indent:-999999px;
background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_p10.png) no-repeat 0 -30px;
}

.bx-next {
position:absolute;
top:45%;
right:1px;
width:31px;
height:31px;
text-indent:-999999px;
background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_n10.png) no-repeat 0 -30px;
}

.bx-next:hover,.bx-prev:hover {
background-position:0 0;
border:0;
}

form + a, a.backs {
display: block;
margin: 0 auto;
text-align: center;
text-decoration: none;
padding: 3px;
}

</style>

</head>
<body>

<a href="/forum" class="backs">Вернуться на форум</a>
<form name="newanket">
<table border="0" id="ank_container">
<tr>
<td style="text-align: center;" colspan="2"><img src="http://i70.servimg.com/u/f70/17/37/83/89/wertwe10.jpg" alt="Подарочная" /></td>
</tr>
<tr>
<td>Ваш ник:</td>
<td><input type="text" name="Nick" size="35" /></td>
</tr>
<tr>
<td>Ник пользователя которому вы хотите подарить подарок:</td>
<td><input type="text" name="whom" size="35" /></td>
</tr>
<tr>
<td>Комментарий к подарку:</td>
<td><textarea name="comment" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td>

<br /><div style="text-align: center; font-size: 12px;">Выберите подарок, кликнув по нему<br /></div>

<center><div id="slider_cont"><div id="slider1"><div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqbx10.png" alt="Медальон" /></div><div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqcn10.png" alt="Этюдник" /></div><div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqd510.png" alt="Чернила" /></div><div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdm10.png" alt="Сюрприз" /></div><div><img src="http://i70.servimg.com/u/f70/17/37/83/89/wqdv10.png" alt="Ундервуд" /></div>

</div></div></center>

</td>
               <td>Ссылка на подарок:<input type="text" name="link" size="30" /> <span id="del" title="Удалить ссылку"> [х]</span></td>
            </tr>
<tr>
               <td colspan="2"><input type="checkbox" name="rules" onclick="buttonOk(this, this.form);" /> С вашего счёта снимут 50 очков</td>
            </tr>
            <tr>
               <td style="text-align: center;" colspan="2"><input type="button" name="post" value="Отправить" onclick="formSubmit(this.form, document.post);" disabled /></td>
            </tr>
         </table>
      </form>
      <form action="/post" method="post" name="post" enctype="multipart/form-data">
         <input type="text" name="subject" style="display: none;" />
         <input type="text" name="username" style="display: none;" />
         <input type="hidden" name="lt" value="0" />
         <input type="hidden" name="mode" value="newtopic" />
         <input type="hidden" name="topictype" value="0" checked="checked" />
         <input type="hidden" name="f" id="f" value="3" />
         <textarea name="message" style="display: none;"></textarea>
         <input type="hidden" name="post" value="Отправить" />
</form>

<a href="http://www.forum2x2.ru"><img src="http://www.illiweb.com/fa/banner/ru/banner4.jpg" alt="Создать форум" title="forum2x2.ru" /></a>


</body>
</html>

Сохраните.

3. Настройте оформление, картинки подарков, кол-во снимаемых очков — точно также, как для предыдущего варианта генератора! (см. предыдущий пост)

---

25 фев. 2013
В оба скрипта добавлены обновленные коды для создания заголовков тем.
Во второй вариант добавлен внутренний скрипт отправки темы (доступный для редактирования).

---

Если сразу после установки генератор не работает — еще раз скопируйте код, откройте редактирование html-страницы, удалите код и снова вставьте его в ту же html-страницу, потом сохраните её.

---

Обсуждение проблем при установке отделено в тему: https://help.forum2x2.ru/t31174-topic