При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на иную страницу
При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на иную страницу
Установка:
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»><a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/88×31.gif» /></a></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>
<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»><a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/88×31.gif» /></a></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=»468×60.gif»>468 x 60</option>
<option value=»250×250.gif»>250 x 250</option>
и ниже добавьте
<option value=»Здесь имя файла баннера»>Здесь описание (Размеры)</option>
Добавить комментарий