Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery, PHP → Ротатор баннеров с помощью PHP, JQuery & MySQL

Ротатор баннеров с помощью PHP, JQuery & MySQL


Демо: смотреть
Скачать: demo.zip [92,58 Kb] (cкачиваний: 167)


В этом уроке мы делаем простой ротатор баннеров с PHP, JQuery & MySQL , с помощью которого можно создавать и случайным образом отображать баннеры на вашем сайте. Каждый из баннеров имеет красивый эффект анимации на JQuery, которые позволяют настроить его под собственные нужды.

Схемы базы данных

Перед тем как начать кодирование, взглянем как выглядит база данных. Все баннеры вставляются в таблицу MySQL баннеров. Она имеет следующую структуру:
Ротатор баннеров с помощью PHP, JQuery & MySQL

Если вы хотите запустить исходные файлы на вашем собственном хостинге, вам нужно экспортировать эту таблицу из файла table.sql который находится в архиве.

Шаг 1 - XHTML
Код XHTML из баннеров генерируется на лету PHP после запроса к базе данных, и выдается на страницу. Вот разметка для образца, код баннеров выглядит следующим образом:

demo.php
<div class="banner">
    <a href="http://www.rapidxhtml.com/">
        <img src="img/banners/rapidHTML.png" alt="Rapid HTML"
        width="125" height="125" />
    </a>
    <p class="companyInfo">Visit Rapid HTML</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
</div>


Внутри каждого DIV баннера , у нас есть гиперссылка на сайт компании, стандартные 125 на 125 изображения баннера, а так же пункт с названием компании.

Ротатор баннеров с помощью PHP, JQuery & MySQL


Шаг 2 - CSS
Для обеспечения кросс-совместимость браузера, мы должны сначала сбросить стили по умолчанию.

styles.css - Часть 1
*{
    /* A universal page reset */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.bannerHolder{
    /* The main banner unordered list */

    height:270px;
    width:270px;

    float:left;
    margin:20px 15px;
    padding:10px;
    background:#f7f7f7;
    border:1px solid #eee;

    /* CSS3 rounded corners */

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

.bannerHolder li{
    /* Hiding the bullets of the li elements: */
    list-style:none;
    display:inline;
}

.banner{
    /* The banner divs */
    position:relative;
    width:125px;
    height:125px;
    overflow:hidden;
    float:left;
    margin:5px;
}

.banner img{
    /* The banner divs */
    display:block;
    border:none;
}


Теперь собственно код самого расположения баннера, задний фон и тд.

styles.css - Часть 2
.banner div{
    /* The dark animated divs */

    position:absolute;
    z-index:100;
    background-color:#222;
    width:60px;
    height:60px;
    cursor:pointer;

    /*    Setting a really big value for border-radius
        will make the divs perfect circles */

    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
}

/*    Positioning the animated divs outside the
    corners of the visible banner area: */

.banner .cornerTL{ left:-63px;top:-63px; }
.banner .cornerTR{ right:-63px;top:-63px; }
.banner .cornerBL{ left:-63px;bottom:-63px; }
.banner .cornerBR{ right:-63px;bottom:-63px; }

.banner p{
    /* The "Visit Company" text */

    display:none;    /* hidden by default */

    left:0;
    top:57px;
    width:100%;
    z-index:200;
    position:absolute;

    font-family:Tahoma, Arial, Helvetica, sans-serif;
    color:white;
    font-size:11px;
    text-align:center;

    cursor:pointer;
}


Наши баннеры будут располагаться следующим образом:
Ротатор баннеров с помощью PHP, JQuery & MySQL


Шаг 3 - PHP

Переходим в часть нашего урока под названием PHP, сначала мы вглянем на файл класс баннеров.

banner.class.php
class Banner{

    private $data = array();

    public function __construct($row){
        $this->data = $row;
    }

    public function html(){

        /* This method returns the banner's HTML code */

        $d = &$this->data;
        $d['company'] = htmlspecialchars($d['company']);

        return '
            <div class="banner">
                <a href="'.$d['url'].'">
                    <img src="img/banners/'.$d['image'].'" alt="'.$d['company'].'"
                    width="125" height="125" />
                </a>
                <p class="companyInfo">Visit '.$d['company'].'</p>
                <div class="cornerTL"></div>
                <div class="cornerTR"></div>
                <div class="cornerBL"></div>
                <div class="cornerBR"></div>
            </div>';
    }

}


Этот файл отвечает за конструкцию наших банеров.

Вы можете увидеть ниже, этот класс и его методы:

demo.php
$bannerResult = mysql_query("SELECT * FROM banners");

$banners = array();
while($row=mysql_fetch_assoc($bannerResult))
{
    $banners[] = new Banner($row);
}

// Randomizing the $banners array:
shuffle($banners);

// Splitting the banners array into smaller arrays with 4 banners each:
$bannerGroups = array_chunk($banners,4);


После выбора всех баннеров из базы данных, PHP извлекает из каждой строки результат в виде ассоциативного массива.

Мы будем выводить 8 баннеров на странице с двумя $bannerGroups.

demo.php
<ul class="bannerHolder">
    <?php

        // Looping through the first group:
        foreach($bannerGroups[0] as $ban)
        {
            echo '<li>'.$ban->html().'</li>';
        }

    ?>
</ul>


Создав все функции и разметку мы можем перейти к jquery эффекты.
Ротатор баннеров с помощью PHP, JQuery & MySQL


Шаг 4 - JQuery
После включения JQuery библиотеки на страницу, мы можем начать писать свой собственный код в script.js.
$(document).ready(function(){

    // Lowering the opacity of all slide in divs
    $('.banner div').css('opacity',0.4);

    // Using the hover method
    $('.banner').hover(function(){

        // Executed on mouseenter

        var el = $(this);

        // Find all the divs inside the banner div,
        // and animate them with the new size

        el.find('div').stop().animate({width:200,height:200},'slow',function(){
            // Show the "Visit Company" text:
            el.find('p').fadeIn('fast');
        });

    },function(){

        // Executed on moseleave

        var el = $(this);

        // Hiding the text
        el.find('p').stop(true,true).hide();

        // Animating the divs
        el.find('div').stop().animate({width:60,height:60},'fast');

    }).click(function(){

        // When clicked, open a tab with the address of the hyperlink

        window.open($(this).find('a').attr('href'));

    });
});


Заключение

В этом уроке мы продемонстрировали некоторые возможности в PHP, JQuery анимацию и некоторые интересные эффекты CSS. Вы можете изменять этот код и использовать его как угодно.

Демо: смотреть
Скачать: demo.zip [92,58 Kb] (cкачиваний: 167)
Опубликовал dimas_ua, 14-04-2011, 00:00 Комментариев: 0
 (голосов: 4)