Здравствуйте, уважаемые! Прошел почти год с поры открытия темы. Тогда реализовать задуманное так и не получилось (обошелся без этого), но вот несколько дней назад возникла такая неотложная потребность. И в этот раз мне все таки пришлось разобраться в этом самому. Метод тыка творит чудеса, особенно для людей далеких от программирования)))) Тыкать пришлось почти 3 дня :-)
Для таких "непрошаренных" как я сделал подробную инструкцию, как организовать плавающий модуль рекламы в левой или правой колонке на Joomla 1.5 с помощью jQuery.
Шаг 1. Сначала нужно подключить jQuery.Самый простой способ - это установить плагин plg_jqueryintegrator_j1.5. Вот тут можно скачать сам плагин и посмотреть видео урок по его настройке:
http://vitaliykulikov.ru/jquery-joomla/plagin-podklyucheniya-jquery.html.
Или можно подключить jQuery вручную. Для этого нужно в файле index.php (лежит в папке с шаблоном) между тегами <head></head> прописать такой вот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
В данном случае jQuery будет подключаться с сервера Google, что должно обеспечить высокую скорость загрузки. jQuery можно также подключать и с Яндекса, и с официального сайта jQuery, и с собственного сайта. Об этом очень хорошо написано здесь:
http://www.magentawave.com/2013/03/jquery.html.
Я пробовал подключать jQuery и плагином, и вручную. Разницы никакой, все работает!
Шаг 2. Прописываю класс стиля для модуля в CSS.В моем случае прописывал класс в файле template_css.css, который лежит в папке CSS шаблона. Сам стиль:
#fixed {
background: #E7E7E7;
padding: 10px;
border: 3px solid #597D00;
}
Можно создать стандартный custom_html модуль, но я использую скачанный mod_php_joomla 1.5, он мне больше нравиться.
Шаг 4. Вставляю код РСЯ и плавающий скрипт в сам модуль.В настройках модуля вставляю оба скрипта. Сначала вставляю плавающий скрипт, а потом сразу же за ним скрипт РСЯ внутри тегов <div></div>. Получилось вот так:
<script type="text/javascript">
$(function() {
var offset = $("#fixed").offset();
var topPadding = 7;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {$("#fixed").stop().animate({marginTop: 15});};});
});
</script>
<div id="fixed"><!-- Яндекс.Директ -->
<script type="text/javascript">
//<![CDATA[
yandex_partner_id = xxxxxx;
yandex_site_bg_color = 'FFFFFF';
yandex_site_charset = 'utf-8';
yandex_ad_format = 'direct';
yandex_font_size = 1.4;
yandex_font_family = 'verdana';
yandex_direct_type = 'vertical';
yandex_direct_limit = 1;
yandex_stat_id = 3;
yandex_direct_title_font_size = 2;
yandex_direct_title_color = 'CC0000';
yandex_direct_url_color = '000000';
yandex_direct_text_color = '000000';
yandex_direct_hover_color = '990000';
yandex_direct_favicon = true;
yandex_no_sitelinks = true;
document.write('<sc'+'ript type="text/javascript" src="http://an.yandex.ru/system/context.js"></sc'+'ript>');
//]]>
</script>
</div>
Включаю модуль, назначаю позицию и вуаля - модуль плавно передвигается, как нам и надо. Методом тыка также удалось выяснить, что значение var topPadding = 7 делает отступ модуля (когда он в движении) от верхней границы окна браузера, а marginTop: 15 - это отступ модуля (в статичном положении) от верхнего предшествующего ему модуля.
Вместо рекламы подобным путем можно выводить все что угодно, например, формы подписки, контактов и другую важную информацию!
Возможно эта инструкция кому-то поможет и сэкономит драгоценное время!
01.07.2021, 13:11:51