'Стена спонсоров' с помощью jQuery и CSS

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

Мы будем использовать PHP, CSS и jQuery с плагином jQuery Flip. Результат нашей работы может быть использован для показа спонсоров, клиентов или для портфолио Ваших работ. В любом случае, с помощью данного решения можно дать разгуляться фантазии.

Демо

Исходники

Шаг 1 - XHTML

Большая часть разметки будет генерироваться с помощью PHP. Скрипт будет проходить по массиву $sponsor и выводить спонсоров. Ниже Вы можете увидеть код, который будет сгенерирован на примере компании Гугл.

<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="img/sponsors/google.png">
</div>

<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="http://www.google.com/">http://www.google.com/
</div>
</div>
</div>

Внешний div .sponsor содержит два дополнительных div. Первый - sponsorFlip - содержит логотип компании. Каждый клик по данному элементу запускает эффект переворота (далее в части про jQuery).

Более интересным для нас является div sponsorData. Он спрятан от просмотра в таблице стилей, но доступен для jQuery. После завершения анимации переворота - все содержимое данного div будет доступно для пользователя.

Шаг 2 - CSS

Далее приступаем к оформлению. Код разбит на 2 части для ясности + некоторые части удалены и доступны в исходниках.

body{
/* Задаем Текст цвета по умолчанию, фон и набор шрифтов */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
margin-bottom:30px;
}

.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;

/* назначаем sponsor div относительное позиционирование: */
position:relative;
cursor:pointer;
}

.sponsorFlip{
/* sponsor div будет позиционирован абсолютно по отношению
к родителю .sponsor div и полностью его заполнит */

position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
border:1px solid #999;

/* CSS3 тень: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}

После стилизации divов sponsor и sponsorFlip, мы добавляем состояние :hover для последнего. Также мы используем CSS3 тени для создания внутренней тени в ячейке.

.sponsorFlip img{
/* Центрируем изображения логотипа в середине .sponsorFlip div */

position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}

.sponsorData{
/* Прячем .sponsorData div */
display:none;
}

.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}

.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}

.clear{
clear:both;
}

Как упоминалось выше, div sponsorData скрыт от глаз. Его цель хранить информацию, которая вскоре будет показана благодаря jQuery анимации.

Шаг 3 - PHP

У Вас есть множество вариантов хранения данных о спонсорах - БД MySQL, XML документ или даже обычный текстовый файл. У каждого есть свои преимущества и недостатки.

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

// Каждый спонсор - элемент массива $sponsors:

$sponsors = array(
array('facebook','The biggest social..','http://www.facebook.com/'),
array('adobe','The leading software de..','http://www.adobe.com/'),
array('microsoft','One of the top software c..','http://www.microsoft.com/'),
array('sony','A global multibillion electronics..','http://www.sony.com/'),
array('dell','One of the biggest computer develo..','http://www.dell.com/'),
array('ebay','The biggest online auction and..','http://www.ebay.com/'),
array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
array('google','The company that redefined w..','http://www.google.com/'),
array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
array('mysql','The most popular open source dat..','http://www.mysql.com/'),
array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
array('cisco','The biggest networking and co..','http://www.cisco.com/'),
array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Перемешиваем каждый раз спонсоров:

shuffle($sponsors);

Спонсоры сгруппированы в главном массиве $sponsors. Каждый спонсор в свою очередь содержит информацию о компании в отдельном массиве. Первый элемент данного массива - уникальный ключ данного спонсора, который совпадает с названием файла логотипа. Второй элемент - описание спонсор, третий - сайт.

После определения массива мы используем функцию PHP shuffle() для перемешивания отображения спонсоров при каждом обращении.

// Проходим по массиву: foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>

<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>

';
}

Код выше проходит по массиву и выводит разметку (из шага 1). Обратите внимание на то, как разные элементы вставляются в шаблон.

Шаг 4 - jQuery

Плагин jQuery Flip нуждается в обоих библиотеках - jQuery и jQuery UI. Так что после их подключения, можем начинать код, который оживит нашу стену спосноров.

$(document).ready(function(){
/* Следующий код выполняется после загрузки страницы */

$('.sponsorFlip').bind("click",function(){

// $(this) указывает на нажатого спонсора .sponsorFlip (и при этом кешируя все в elem для производительности):

var elem = $(this);

// data('flipped') флаг, который указывает на то, что на элемент нажали:

if(elem.data('flipped'))
{
// Если элемент уже перевернут, используем метод revertFlip
// который заложен в функционал плагина и возвращает все на свои места:

elem.revertFlip();

// Убираем флаг:
elem.data('flipped',false)
}
else
{
// используем метод flip, который определен в плагине:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Вставить содержание .sponsorData div в нажатый
// .sponsorFlip div перед началом анимации:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Устанавливаем флаг:
elem.data('flipped',true);
}
});

});

В самом начале мы привязываем функцию, которая будет следить за кликами по плиткам спонсоров. После клика мы проверяем выставлен ли флаг flipped с помощью jQuery метода data(). Этот Флаг выставляется индивидуально для каждого sponsorFlip div и помогает нам определить перевернута ли информация о спонсоре или нет. Если да, мы используем метод revertFlip(), который определяется плагином. Он возвращает div предыдущее состояние.

Если же флага нет, мы инициируем переворот элемента. Как упоминалось ранее, div .sponsorData, который находится в каждом div с логотипами, содержит описание и УРЛ спонсора (спрятано через CSS). Перед началом переворота плагин исполняет функцию onBefore. В ней мы меняем содержание sponsorFlip на sponsorData.