код баннера в модальном окне

код баннера в модальном окне

При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на иную страницу

код баннера в модальном окне

При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на иную страницу

код баннера в модальном окне

Установка:
1. В файл style.css Вашего темы ввернуть:


2. В то место где Вы хотите видеть кнопку «Код баннера» вставить:

<center>
   <a href=»/» target=»_blank» title=»Все для вебмастера!»>
      <img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» />
   </a><br /><br />
   <input value=»Код баннера» onclick=»showCode();» type=»button» />
</center>
<div id=»code» title=»Выберите код баннера для вставки на сайт» style=»display: none;»>
   <div id=»code-p-wrap»>
      <fieldset>
         <form action=»#» class=»code-selector»>
            <div>
               <label>Размер: </label>
               <select name=»type-size» id=»type-size»>
                  <option selected=»selected» value=»88×31.gif»>88 x 31</option>
                  <option value=»468×60.gif»>468 x 60</option>
                  <option value=»250×250.gif»>250 x 250</option>
               </select>
            </div>
            <div>
               <label>Код: </label>
               <textarea rows=»10″ cols=»25″ id=»code-box»>&lt;a href=»http://vipflex.ru/» title=»Все для вебмастера!»&gt;&lt;img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/88×31.gif» /&gt;&lt;/a&gt;</textarea>
                <p class=»note»>Просто скопируйте код выше и вставьте в свою страничку</p>
             </div>
          </form>
          <label>Пример: </label>
          <div class=»example-area» id=»graphic-example-area»>
             <a href=»/» target=»_blank» title=»Все для вебмастера!»><img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» /></a>
          </div>
          <p class=»note»>Пример баннера</p>
       </fieldset>
    </div>
</div>
<script type=»text/javascript»>
//<![CDATA[
   $(function() {
   $(«#type-size»).change(function() {
   var graphicFileName = $(«#type-size option:selected»).attr(«value»);
   var newCode = ‘<a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/’ + graphicFileName + ‘» /></a>’;
   $(«#code-box»).text(newCode);
   $(«#graphic-example-area»).html(newCode);
        });
   });
   function showCode() {
      $(function(){
      $(‘#code’).dialog({
         autoOpen: true,
         show: ‘fade’,
         hide: ‘fade’,
         width: 622,
         });
      });
   }
//]]>
</script>

3. Замените все пути к баннерам на свои.
4. Чтобы добавить баннеры найдите:

<option selected=»selected» value=»88×31.gif»>88 x 31</option>
<option value=»468×60.gif»>468 x 60</option>
<option value=»250×250.gif»>250 x 250</option>


и ниже добавьте

<option value=»Здесь имя файла баннера»>Здесь описание (Размеры)</option>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *