Практическое занятие №12

Ход работы

Студент проводит подготовительную работу согласно этапам описанным в теоретической части.

Задание

Темой выставки становится программное обеспечение являющееся темой работ №6 и №7.

Требования к отчету: Отчет, в котором содержатся этапы подготовки студента к созданию выставки.

Тема: Разработка проекта электронной выставки программного обеспечения отраслевой направленности.

Цель: формирование навыков продвижения программного обеспечения.

Оборудование: персональный компьютер.

Краткое теоретическое обоснование:

Первым делом создаем костяк нашей галереи - выставки:

<div id="container">

<div id="heading"> <!-- Заголовок -->

<h1>A cool jQuery gallery</h1>

</div>

<div id="gallery"> <!-- это блок для изображений -->

<?php

//здесь идет PHP код

?>

<div class="clear"></div> <!-- using clearfix -->

</div>

<div id="footer"> <!-- футер -->

</div>

</div> <!-- закрывающий div -->

PHP

Идея очень проста - PHP скрипт будет сканировать папку на наличие изображений. После этого эти изображения с помощью CSS & jQuery будут превращаться в красивую галерею. Пользоваться подобной галерей очень просто - достаточно только загрузить картинки в папку и результат сразу будет виден на странице.

$directory = 'gallery'; //название папки с изображениями

$allowed_types=array('jpg','jpeg','gif','png'); //разрешеные типы изображений

$file_parts=array();

$ext='';

$title='';

$i=0;

//пробуем открыть папку

$dir_handle = @opendir($directory) or die("There is an error with your image directory!");

while ($file = readdir($dir_handle)) //поиск по файлам

{

if($file=='.' || $file == '..') continue; //пропустить ссылки на другие папки

$file_parts = explode('.',$file); //разделить имя файла и поместить его в массив

$ext = strtolower(array_pop($file_parts)); //последний элеменет - это расширение

$title = implode('.',$file_parts);

$title = htmlspecialchars($title);

$nomargin='';

if(in_array($ext,$allowed_types))

{

if(($i+1)%4==0) $nomargin='nomargin'; //последнему изображению в ряде присваевается CSS класс "nomargin"

echo '

<div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">

<a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>

</div>';

$i++;

}

}

closedir($dir_handle); //закрыть папку

Сканируя файлы папки и пропуская файлы не изображения, у нас накапливается XHTML код для каждого изображения. Код (линии 28-39) состоит из контейнера с классом pic (и в некоторых случаях nomargin). С помощью атрибута style мы устанавливаем фоновое изображение в виде нашего изображения. Мы позиционируем картинку в центре, используя 50% 50%. Таким образом изображение выравнивается как по горизонтали, так и по вертикали. Если изображение больше блока, мы видим только центральную его часть (ту часть, которая помещается в контейнер). Таким образом, у нас получаются красивые миниатюры (без необходимости уменьшение самого изображения).

Это хорошо работает с "нетяжелыми" изображениями.

В блоке находится ссылка, которая ведет к полноразмерному изображению. Название файла служит значением атрибута title. Плагин lightBox использует эти значения и преобразует картинки в галерею. Чтобы изменить описание изображения, необходимо его переименовать.

У Вас может возникнуть вопрос по поводу класса nomargin! Для чего он нам нужен? У каждого изображения в галерее есть правый и нижний отступ. Это означает, что последний элемент в каждом ряду не сможет выравняться с правой частью заголовка блока. Это выглядит непрофессионально. Поэтому мы присваиваем специальный класс, который убирает правый отступ для последнего элемента в ряду. В итоге, мы получаем красивый результат.

CSS

Теперь давайте все немного оформим:

/* first reset some of the elements for browser compatibility */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{

margin:0px;

padding:0px;

font-family:Arial, Helvetica, sans-serif;

}

body{ /* body */

margin-top:20px;

color:white;

font-size:13px;

background-color:#222222;

}

.clear{ /* clearfix класс */

clear:both;

}

a, a:visited {

color:#00BBFF;

text-decoration:none;

outline:none;

}

a:hover{

text-decoration:underline;

}

#container{

width:890px;

margin:20px auto;

}

#heading,#footer{

background-color:#2A2A2A;

border:1px solid #444444;

height:20px;

padding:6px 0 25px 15px;

margin-bottom:30px;

overflow:hidden;

}

#footer{

height:10px;

margin:20px 0 20px 0;

padding:6px 0 11px 15px;

}

div.nomargin{ /* nomargin класс */

margin-right:0px;

}

.pic{

float:left;

margin:0 15px 15px 0;

border:5px solid white;

width:200px;

height:250px;

}

.pic a{

width:200px;

height:250px;

text-indent:-99999px;

display:block;

}

h1{

font-size:28px;

font-weight:bold;

font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;

}

h2{

font-weight:normal;

font-size:14px;

color:white;

}

jQuery

Для правильной работы нам понадобится в шапке документа подключить фреймворк, таблицу стилей и вспомогающие скрипты:

<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css">

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>

<script type="text/javascript" src="script.js"></script>

Еще немного работы:

// после загрузки страницы

$(document).ready(function(){

$('.pic a').lightBox({

imageLoading: 'lightbox/images/loading.gif',

imageBtnClose: 'lightbox/images/close.gif',

imageBtnPrev: 'lightbox/images/prev.gif',

imageBtnNext: 'lightbox/images/next.gif'

});

});

Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.

Перечень контрольных вопросов:

1. Что такое PHP и JavaScript?

2. Как разместить на сайте виртуальную выставку?

3. Какие материалы можно использовать на выставке?

Дата добавления: 2014-12-25