код баннера в модальном окне
При нажатии на кнопку "Код баннера" открывается модальное окно с выбором баннера без перехода на иную страницу
Установка:
1. В файл style.css Вашего темы ввернуть:
2. В то место где Вы хотите видеть кнопку "Код баннера" вставить:
<center>
<a href="/" target="_blank" title="Все для вебмастера!">
<img src="/88x31.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="88x31.gif">88 x 31</option>
<option value="468x60.gif">468 x 60</option>
<option value="250x250.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/88x31.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="/88x31.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="/88x31.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="88x31.gif">88 x 31</option>
<option value="468x60.gif">468 x 60</option>
<option value="250x250.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/88x31.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="/88x31.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="88x31.gif">88 x 31</option>
<option value="468x60.gif">468 x 60</option>
<option value="250x250.gif">250 x 250</option>
<option value="468x60.gif">468 x 60</option>
<option value="250x250.gif">250 x 250</option>
и ниже добавьте
<option value="Здесь имя файла баннера">Здесь описание (Размеры)</option>