Галерея необходима для каждого веб-сайта. Она содержит в себе все изображения сайта, а также дает возможность скачать их.
В этой статье мы расскажем вам о том, как создать собственную галерею изображений. Для этого нам понадобятся стандартные HTML и CSS, но для хорошей работы понадобится также JavaScript, а именно библиотека JQuery.
<!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=windows-1251"> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.galleryview-1.0.1-pack.js"></script> <script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.timers-1.1.2.js"></script> <style type="text/css">
Мы создадим не простую галерею, у неё будет одна простая функция — плавная смена изображений. Пользователь сможет очень просто перелистывать изображения. К тому же, в ней будут содержаться изображения сайта, что может быть полезно для больших интернет-ресурсов.
Ещё одно, наша галерея использует плагин GalleryView, который требуется для создания хорошего функционала и правильного отображения.
Разметка. HTML
Начнем с основного — HTML разметки. Для начала, создаем HTML документ и записываем туда все необходимые теги — doctype, html, head, meta, body и т.д.
Теперь самое главное — подключение внешних файлов. Нам необходимо подключить файл style.css и 4 JavaScript файла. Все 4 файла содержат данные библиотеки JQuery.
После этого размещаем все необходимые элементы. Сначала мы создаем блок галереи, с идентификатором gallery_wrap. В нем будут располагаться блоки с изображениями. Изображения добавляем с помощью тега img.
Далее размещаем заголовок 2 уровня(h2). Он будет содержать описание картинки. Ниже мы будем размещать список изображений с описанием.
В идеале, ваш код должен выглядеть примерно так:
<title>Как создать галерею картинок для сайта</title>
</head>
<br><br><br><br><br><br><br><br><br>
<body>
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel">
<img src="img/01.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/02.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/03.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/04.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/06.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/05.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/07.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<div class="panel">
<img src="img/08.jpg" />
<div class="panel-overlay">
<h2>Тут может быть описание Вашей картинки</h2>
<p>Сайт для веб-мастеров.</p>
</div>
</div>
<ul class="filmstrip">
<li><img src="img/frame2-01.jpg" alt="Effet du soleil" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-02.jpg" alt="Eden" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-03.jpg" alt="Snail on the Corn" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-04.jpg" alt="Flowers" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-06.jpg" alt="Alone Beach" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-05.jpg" alt="Sunrise Trees" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-07.jpg" alt="Waterfall" title="Сайт для веб-мастеров." /></li>
<li><img src="img/frame2-08.jpg" alt="Death Valley" title="Сайт для веб-мастеров." /></li>
</ul>
</div>
</div>
</body>
</html>
CSS стилизация
Теперь приступаем к стилизации. Для начала зададим фон и цвет текста для тега body.
После этого вписываем идентификатор галереи — #gallery_wrap. Для него мы зададим размеры, внутренние отступы и фон.
В нашей галерее кнопки представлены в виде ссылок. Для них также необходимо задать свои стили.
После создания стилей, ваш CSS код должен выглядеть примерно так:
JavaScript
Итак, завершающая часть — создание скриптов. В основном, нам потребуется пара функций и изменения некоторых стилей, а именно изменение размеров панелей и фреймов.
JavaScript код:
Заключение
В этой статье мы рассматривали создание галереи. Как вы уже могли заметить, это не очень сложный проект, много кода писать не требуется.
Вы можете добавить свои стили или некоторые элементы в HTML и JavaScript код. Если же у вас что-то не получилось, то скачивайте наши исходники. Только просмотрев весь код вы сможете полностью разобраться в нем. Удачи в изучении!
Теги: