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

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


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

Jquery, PHP → Создание Slick слайдера

Создание Slick слайдера


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


Веб-мастерам нужно постоянно искать пути оптимизации контента для своих сайтов. С появлением новых технологий это очень важно обеспечить привлекательный и функциональный пользовательский интерфейс.

В этом уроке мы собираемся сделать слайдер контента для компьютерного магазина, с помощью JQuery и MopSlider плагина. Слайдер будет создан с PHP, и мы используем простой текстовый файл в качестве источника данных для ноутбуков. Мы также используем ноутбук иконки из tonev.deviantart.com.

Шаг 1 - Источник данных
Данные будут хранится в файлах. Преимущества по сравнению с регулярным хранения данных MySQL является то, что вам нужен только текстовый редактор для изменения данных и добавление новых моделей.

db/slider.db.txt
Product Model | Product Description | Price | Path To Image | URL
Second Product | Description | Price | Path To Image | URL
Third Product | Description | Price | Path To Image | URL


db/.htaccess
Файл htaccess служил для преобразования нашей текстовой базы.
# This will prevent opening the db dir in a browser

deny from all

# Will return a 403 error


Создание Slick слайдера


Шаг 2 - XHTML
Разметка страницы очень проста.
<div id="main">    <!-- The main container -->
    <div class="titles">    <!-- Placeholder for the headings -->
    <h1>Notebooks</h1>
    <h2>Fresh on the market</h2>
    </div>

    <div class="container">    <!-- Styled and rounded -->
        <div id="slider">    <!-- Contains the generated products -->
        <?=$products?>    <!-- PHP var that holds the products -->
        </div>
        <div class="clear"></div>
        <!-- Clearing the floats, the old-fashioned way -->
    </div>
</div>


Теперь давайте перейдем к нашей CSS.

Шаг 3 - CSS
CSS дало возможность написать такой чистой и простой XHTML, как и выше.

demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* resetting some of the page elements */
    margin:0px;
    padding:0px;
}

body{
    /* styling the body */
    color:white;
    font-size:13px;
    background: url(img/bg.png);
    font-family:Arial, Helvetica, sans-serif;
}

h1{
    color:white;
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
}

.clear{
    /* Clear the floats */
    clear:both;
}

#main{
    /* The main container */
    width:800px;
    margin:0 auto;
}

.container,.titles{
    /* These classes share some common rules */
    color:white;
    margin-top:30px;
    width:100%;

    /* Hiding everything that overflows off the sides */
    overflow:hidden;

    background:url(img/bg_dark.png) #28313b;
    padding:20px 10px 10px;

    /* CSS rounded corners */
    -moz-border-radius:12px;
    -khtml-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius:12px;
}

.titles{
    width:140px;
    padding:10px 15px;
    height:55px;
}

.product{
    /* The products class */
    width:370px;
    height:150px;
    background:url(img/product_bg.png) repeat-x;
    padding-top:10px;

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

.product .pic{
    /* The product image */
    float:left;
    width:128px;
    height:128px;
    padding:0 10px 5px;
    margin-top:-15px;
}

.product .link,.product .price{
    /* Common rules */
    font-size:10px;
    text-transform:uppercase;
    padding:4px 0;
}

.product .price{
    /* Custom rule */
    color:#CCCCCC;
}

.product .title{
    font-size:16px;
    font-weight:bold;
}

a, a:visited {
    /* Styling the hyperlink */
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    /* The hover state */
    text-decoration:underline;
}


Переходим к следующему шагу.
Создание Slick слайдера


Шаг 4 - JQuery

Давайте посмотрим, что лежит в script.js файле.

$(document).ready(function(){

    /* After the page has finished loading */
    $("#slider").mopSlider({
        'w':800,
        'h':150,
        'sldW':500,
        'btnW':200,
        'itemMgn':20,
        'indi':"Slide To View More",
        'type':'tutorialzine',    /* A custom theme */
        'shuffle':0
    });

});


Здесь задается высота, ширина слайдера, текст который будет написан в ползунке и тд.

Шаг 5 - PHP

У PHP важная задача: чтение slider.db.txt и заполнение слайдера продуктами. Это происходит в demo.php.
demo.php
$slides = file('db/slider.db.txt');
/* Read the file with file() - returns an array where */
/* every file row becomes a new array element */

$products='';
foreach($slides as $v)
{
    $data = preg_split('/\s*\|\s*/',$v);
    /* Split the file row by the vertical lines */
    /* Using preg_split to remove unnecessary spaces and tabulations */

    $products.='
    <div class="product">
    <div class="pic"><img src="'.$data[3].'" width="128" height="128" alt="'.htmlspecialchars($data[0]).'" /></div>
    <div class="title">'.$data[0].'</div>
    <div class="price">$'.$data[2].'</div>
    <div class="description">'.$data[1].'</div>
    <div class="link"><a href="'.$data[4].'" target="blank">Find out more</a></div>
    <div class="clear"></div>
    </div>';

    /* $data becomes an array with the product's properties */
}


Наш урок подошол к концу. Надеемся он был вам полезен!
Опубликовал dimas_ua, 1-05-2011, 00:00 Комментариев: 0
 (голосов: 2)