1. Уважаемый Гость, в связи с нехваткой свободного времени наш форум продается. Форум богат своими плагинами и различными шаблонами как платными, которые трудно где достать бесплатно так и бесплатными. Если Вас заинтересовал форум, то, обращаемся по почте: administrator_ps@rambler.ru.
Скрыть объявление
Мы рады Вас видеть на нашем форуме! Надеюсь тебе у нас понравится и ты станешь вместе с нами активным и постоянным пользователем)

Ротатор баннеров (№2)

Тема в разделе "Помощь по различным скриптам", создана пользователем MaxiRubo, 9 ноя 2016.

  1. TopicStarter Overlay
    MaxiRubo

    MaxiRubo Команда форума Основатель

    1.503
    2
    1
    532_.jpg

    Для начала к сайту необходимо подключить библиотеку скриптов JQuery:
    Код:
    <script type="text/javascript" src="googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    Делается это в файле header.php, выше приведенный код размещают до закрывающего тега , но если у вас библиотека скриптов уже подключена повторно ее подключать нет необходимости: пропустите этот шаг.

    Скрипт ротатора баннеров

    Теперь, установим код самого JQuery скрипта, но здесь сразу определитесь с местом показа ротатора баннеров, если вы делаете также как и я ротатор в сайдбаре (то есть он будет показываться на всех страницах сайта), то код скрипта, можно разместить сразу после подключения библиотеки скриптов JQuery. Если вы собираетесь показывать ротатор баннеров только на каких-то вложенных страницах, то нет необходимости перегружать все страницы загрузкой скрипта для этого скрипт можно вынести в отдельную папку к примеру вот так:



    А вот и сам скрипт ротатора баннеров:


    Для тех кто будет выносить скрипт за пределы файла header.php, ниже предоставляю код и демо ротатора:


    Ну и сам результат демо ниже)




    ------------------------------

    Стили оформления для ротатора баннеров.

    Теперь откроем файл стилей style.css и добавим в него в самый конец файла, немного оформления к ротатору баннеров:
    Код:
    /*Ротатор баннеров на JQuery ---------------------*/
    #rotator {
    border: 1px solid #CCC;
    overflow: hidden;
    height: 200px;
    width: 200px;
    }
    Здесь, обязательно необходимо прописать точные значения высоты: height и ширины width изображений ротатора в пикселях для корректного отображения.

    Тут настройте кусок скрипта под ваши ссылки и баннеры:
    Код:
    <div id="rotator">
    <div>
    <img src="http://ваш сайт/img/1.gif" title="Первый баннер" />
    </div>
    <div>
    <img src="http://ваш сайт/img/2.gif" title="Второй баннер" />
    </div>
    <div>
    <img src="http://ваш сайт/img/3.gif" title="Третий баннер" />
    </div>
    <div>
    <img src="http://ваш сайт/img/4.gif" title="Четвертый баннер" />
    </div>
    <div>
    <img src="http://ваш сайт/img/5.gif" title="Пятый баннер" />
    </div>
    </div>
    Вот и все, остается только загрузить изображения баннеров с нужными размерами (200px х 200px) в папку Img.

    Да кстати, все баннеры при желании, можно сделать кликабельными добавив к каждому блоку вывода баннеров:
    Код:
    <div>
    <a href="http://ссылка на сайт рекламодателя" rel="nofollow" target="_blank">
    <img src="http://ваш сайт/img/1.gif" title="Первый баннер" />
    </a>
    </div>
    При клике мышкой по баннеру, в новом окне откроется сайт рекламодателя.


    На этом все!
     
Загрузка...
Похожие темы - Ротатор баннеров (№2)
  1. MaxiRubo
    Ответов:
    0
    Просмотров:
    5.042
  2. MaxiRubo
    Ответов:
    0
    Просмотров:
    3.745
  3. MaxiRubo
    Ответов:
    0
    Просмотров:
    3.701
  4. MaxiRubo
    Ответов:
    0
    Просмотров:
    3.785
  5. MaxiRubo
    Ответов:
    1
    Просмотров:
    4.807