Динамическая загрузка картинок для анонсов с помощью Ajax, jQuery и PHP

Владимир | | Ajax, CSS, HTML, JavaScript, PHP, Web разработка.

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.

Поэтому я решил привести пример своей реализации этого эффекта.

Картинки будут загружаться только если посетитель наведет мышку на какой-нибудь блок с аннотацией. Естественно, что загрузка будет выполняться только один раз.

Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.

Demo

Сразу же выкладываю архив с исходниками.

Source

А теперь разберем как это все работает.

Допустим у нас есть страница (index.html) со следующей разметкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Пердпросмотр с картинками</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> </head> <body> <div id="content"> <div id="leftCol"> <div id="butterfly" class="annotaionBlock">…</div> <div id="tiger" class="annotaionBlock">…</div> <div id="elephant" class="annotaionBlock">…</div> <div id="wolf" class="annotaionBlock">…</div> <div id="fish" class="annotaionBlock">…</div> </div> <div id="rightCol"> <div id="whale" class="annotaionBlock">…</div> <div id="flamingo" class="annotaionBlock">…</div> <div id="bear" class="annotaionBlock">…</div> <div id="dog" class="annotaionBlock">…</div> <div id="cat" class="annotaionBlock">…</div> </div> </div> </body> </html>

Сразу обратите внимание на блок content. Он состоит из двух колонок (leftCol и rightCol) в которых размещены аннотации.

Всем аннотациям присвоен CSS класс annotaionBlock и уникальный id. Этот id будет использоваться для определения нужной картинки.

Сами аннотации представляют собой обычный текст с HTML разметкой или без неё.

Теперь напишем JS скрипт, который будет подгружать картинки.

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.annotaionBlock').hover(
        function(event) {
            var curAnnotation = $(this);
            var curId = curAnnotation.attr('id');
            var annotImg = curAnnotation.children('.annotImg');
            if (annotImg.length == 0) {
                $.get('getimage.php', {img : curId}, function(data) {
                    annotImg = $('<div class="annotImg"><img src="' + data + '" alt="Картинка" /></div>').hide();
                    curAnnotation.append(annotImg);
                    $('.annotImg').not(this).slideUp('fast');
                    annotImg.slideDown('fast');
                });
            }
            else {
                $('.annotImg').not(annotImg).slideUp('fast');
                annotImg.slideDown('fast');
            }
        },
        function() {
        }
    );
});
</script>

Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25).

В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т.е. для всех наших аннотаций.

В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него.

Вторую функцию (строки 22-23) мы оставляем пустой, т.к. вставлять и прятать картинки будем в первой.

Алгоритм работы.

1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7).

2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15).

3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14).

4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19).

Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т.е. она будет «выезжать» из левого верхнего угла.
Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему.

Серверная часть

PHP скрипт, который обрабатывает запросы на получение картинок (getimage.php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку.

Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.

$image = $_GET['img'];

switch ($image) {
    case 'butterfly': echo 'http://farm1.static.flickr.com/152/408688454_2d868d0104_m.jpg'; break;
    case 'tiger': echo 'http://farm4.static.flickr.com/3284/2507729467_915274dab3_m.jpg'; break;
    case 'elephant': echo 'http://farm3.static.flickr.com/2377/1520324747_e468eab773_m.jpg'; break;
    case 'wolf': echo 'http://farm1.static.flickr.com/177/402657323_ebf5c7ce51_m.jpg'; break;
    case 'fish': echo 'http://farm2.static.flickr.com/1084/892454941_56fd34ac3c_m.jpg'; break;
    case 'whale': echo 'http://farm3.static.flickr.com/2401/2052477420_fe7fb452b0_m.jpg'; break;
    case 'flamingo': echo 'http://farm4.static.flickr.com/3303/3557243577_3c1bab1ec3_m.jpg'; break;
    case 'bear': echo 'http://farm1.static.flickr.com/172/401014816_9d879ceac6_m.jpg'; break;
    case 'dog': echo 'http://farm1.static.flickr.com/68/215233902_0f2d1ac9e5_m.jpg'; break;
    case 'cat': echo 'http://farm3.static.flickr.com/2068/2532467266_d8b5c9ea15_m.jpg'; break;
}

Как видите, у нас есть десять аннотаций и каждой соответствует своя ссылка.

И в заключение несколько слов об оформлении страницы.

Размещение аннотаций и их внешний вид задаётся с помощью CSS стилей (файл styles.css).

Я приведу только его фрагмент, который создаёт две колонки (в архиве вы найдете полный вариант).

#content {
    width: 600px;
    margin: auto;
    text-align: justify;
}

#leftCol {
    float: left;
    width: 299px;
}

#rightCol {
    margin-left: 301px;
}

Как видите, ширину всего блока с аннотациями мы установили равной 600px. Для левой колонки указали правило float: left и ширину 299px, а для правой – отступ слева 301px (внутри этого отступа будет находится левая колонка).

Вот и всё. На мой взгляд, эффект довольно симпатичный, но подходит не для всех сайтов.

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

До встречи!

Интересно почитать

Актуально про seo и поисковые системы от SeoProfy