Установка Adaptive Images

Решение Adaptive Images требует наличия Apache 2, PHP 5.x и GD Lib. Таким образом, чтобы увидеть его преимущества, вам потребуется разрабатывать сайт на соответствующем сервере. Скачайте ZIP-файл (рисунок 3.12).

Страница, с которой можно загрузить Adaptive Images

Разархивируйте ZIP-файл и скопируйте файлы adaptive-images. php и. htaccess в корневой каталог своего сайта. Если у вас в корневом каталоге уже есть файл. htaccess, не перезаписывайте его. Вместо этого прочтите дополнительную информацию в файле instructions. htm, который включен в архив.

Теперь создайте папку с именем ai-cache в корневом каталоге своего сайта (рисунок 3.13).

Создание папки ai-cache

Используя свой любимый FTP-клиент, задайте разрешения на запись 777 (рисунок 3.14).

Теперь скопируйте приведенный далее JavaScript-код в тег <head> каждой страницы, которая нуждается в использовании Adaptive Images:

<script>document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’;

Path=/’;</script>

Если вы не используете HTML5 (мы перейдем к нему в следующей главе), но хотите, чтобы ваша страница прошла валидацию, потребуется добавить атрибут type. В результате сценарий должен будет выглядеть так:

<script type="text/javascript">document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’; path=/’;</script>

Важно, чтобы JavaScript-код располагался внутри тега <head> (желательно — первая часть сценария), поскольку он должен запускаться раньше, чем закончится

Загрузка страницы, и до того, как будут запрошены какие-либо изображения. Вот JavaScript-код, добавленный в раздел <head> сайта, над которым мы работаем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>And the winner isn’t…</title>

<script type="text/javascript">document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’; path=/’;</script>

<link href="css/main. css" rel="stylesheet" type="text/css" />

</head>

Установка разрешения на запись

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *