1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

Помощь Как сделать плавающий блок/модуль рекламы. CMS Joomla 1.5

Тема в разделе "Joomla", создана пользователем Gudym, 5 фев 2014.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
Статус темы:
Закрыта.
Модераторы: arman29, DMS, Genk0
  1. Gudym

    Gudym Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    55
    Симпатии:
    23
    Как сделать плавающий блок/модуль. CMS Joomla 1.5
    [​IMG] Gudym » 04 фев 2014, 22:37

    Здравствуйте, уважаемые! Хотелось бы попробовать вывести блок рекламы РСЯ в плавающем блоке левой или правой колонке сайта. Движок сайта Joomla 1.5. Пример такого плавающего блока вот: http://jemand.ru/examples/plavayushhij- ... query.html. Блок перемещается плавно. Как там написано такое реализуется с помощью jQuery. В интернете есть инструкции, как такое реализовать, но конкретно под Joomla толкового описания не нашел. Т.е. скриптов готовых вроде бы хватает, но как их правильно применить на Joomla 1.5, т.е. какие файлы править, куда вставлять код и т.д.

    Есть небльшие познания в HTML и CSS, но вот в скриптах вообще ничего не понимаю.

    И так, что имеем. РСЯ вывожу с помощью модуля Mod PHP или можно стандартным текстовым модулем (там есть режим вставки скриптов). В самом модуле есть форма, куда можно вставлять любой код (HTML, CSS, PHP, JS). Вот туда я вставляю код, назначаю позицию модуля (в данном случае это левая или правая колонка), активирую его и реклама отображается в нужном месте. Нужно заставить этот модуль двигаться. Прописываю стили в CSS файле шаблона, чтобы подмарафетить обертку блока и заодно пробовал прописывать position: fixed - но такой грубый вариант фиксации мне совсем не понравился.

    Нужно как-то к этому блоку прикрутить эту jQuery. В исходном коде сайта jQuery мелькает несколько раз, наверное она уже установлена, т.к. есть интересный модуль, в котором используются сложные визуальные эффекты.

    Если кто-нибудь из форумчан знает, как такое реализовать, то буду рад выслушать любые советы! Всем спасибо!
     
  2. StanyXXX

    StanyXXX

    Регистр.:
    9 фев 2007
    Сообщения:
    341
    Симпатии:
    381
    Есть готовое решение для J1.5 Modulation

    Для 2.5 и 3 > http://extensions.joomla.org/extensions/style-a-design/personal-layout/9506
    Создавайте свой custom html модуль какой вам надо, и ставьте в позицию шаблона.. ну и настраивайте плагин указанный выше..

    да, модуль не проверял на зловреды, взят на просторах нета..
     
    Последнее редактирование: 5 фев 2014
    Gudym нравится это.
  3. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    Вы же сами дали пример плавающего блока http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/
    Добавьте стили, подключите jQuery, вставьте код JavaScript в модуль а ниже это кода напишите блок из HTML
    в нем вставьте свой код рекламы.
    Ведь все прекрасно описано
     
  4. Gudym

    Gudym Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    55
    Симпатии:
    23
    StanyXXX и Genk0, спасибо! Слава Богу получилось разобраться в этом самому, метод тыка творит чудеса. Для таких "непрошаренных" как я сделал подробную инструкцию, как сделать плавающий модуль рекламы в левой или правой колонке на 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;
    }
    Шаг 3. В менеджере модулей создаю новый модуль.

    Можно создать стандартный 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 - это отступ модуля (в статичном положении) от верхнего предшествующего ему модуля.
    Вместо рекламы подобным путем можно выводить все что угодно, например, формы подписки, контактов и другую важную информацию!
    Возможно эта инструкция кому-то поможет и сэкономит драгоценное время. Мне же пришлось возится с этим почти 3 дня :( Зато теперь есть дополнительные знания и понимание!
     
    тать и Lawer нравится это.
Статус темы:
Закрыта.