Увеличение изображения

Увеличение изображения фотогалереи

Обычно изображения на сайте обладают небольшими размерами, которые необходимо увеличить.
Увеличение изображения можно сделать с помощью JavaScript, а точнее используя fancybox - jQuery плагин, при этом изображение будет плавно увеличиваться в модальном окне на затемненном фоне.

пример

Разработкой веб-сайтов

ПРОСМОТР СКАЧАТЬ

Алгоритм разработки

1. Создание вэб-узла.

Создайте веб-узел – это папка с подпапками (pictures, catalog и др), в которых необходимо скопировать необходимые элементы сайта (изображение, видео, аудио, банеры) Все файлы называются английскими буквами, в нижнем регистре и без пробелов.

2. Создание файлов сайта.

В веб-узеле создайте файл index.html, файл стилей style.css, папку для хранения изображений, например, pictures.
Для создания html и css файлов можно использовать редакторы Notepad, Notepad++ и д.р.

Раскуртка сайтов

3. библиотеки jQuery.

Скачайте библиотеки jQuery. В скаченном архиве папки "css" и "js", скопируйте к себе в веб-узел.

Разработка сайтов

4. HTML-разметка страницы.

В файле index.html сделайте HTML-разметку страницы, подключите файл стилей style.css.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Увеличение изображения фотогалереи</title>
	<!-- Подключение файла стилей style.css -->
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <!-- Начало блока фотогалереи -->
    <div class="wrapper">
        <div class="galery">
            <a href="pictures/work1.jpg">
                <img src="pictures/work1.jpg">
            </a>
            <a href="pictures/work2.jpg">
                <img src="pictures/work2.jpg">
            </a>
            <a href="pictures/work3.jpg">
                <img src="pictures/work3.jpg">
            </a>
        </div>
        <div class="galery">
            <a href="pictures/work4.jpg">
                <img src="pictures/work4.jpg">
            </a>
            <a href="pictures/work5.jpg">
                <img src="pictures/work5.jpg">
            </a>
            <a href="pictures/work6.jpg">
                <img src="pictures/work6.jpg">
            </a>
        </div>
    </div>
    <!-- Конец блока фотогалереи -->
</body>
</html>

5. Оформление CSS стилей.

В приведенном примере, все изображения имеют разные размеры. Зададим тэгу <img> ширину и высоту (width: 343px; height: 245px;), в таком случае изображения будут подстраиваться под размер 343px*245px.

CSS

/*Начало сброса стилей*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/*Конец сброса стилей*/

/*Начало стилей галереи*/
.wrapper {
    width: 1040px;
    margin: 0 auto;
    margin-top: 30px;
}
.galery {
    margin-bottom: 3px;
    margin-right: 3px;
}
img {
    width: 343px;
    height: 245px;
}
/*Конец стилей галереи*/

6. Подключение jQuery

В head подключите jQuery - библиотеки jquery.js, jquery-1.5.min.js, jquery.fancybox-1.3.4.pack.js, таблицу стилей jquery.fancybox-1.3.4.css

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Увеличение изображения фотогалереи</title>
    <link href="style.css" rel="stylesheet">
    
    <!--подключение jquery-->
    <link rel="stylesheet" type="text/css" 
	href="css/fancybox/jquery.fancybox-1.3.4.css" media="screen">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
</head>

7. инициализация галереи

После подключения jQuery в head, ниже добавляем скрипт:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Увеличение изображения фотогалереи</title>
    <link href="style.css" rel="stylesheet">
    
    <!--подключение jquery-->
    <link rel="stylesheet" type="text/css" 
	href="css/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
    
	<script type="text/javascript">
    $(document).ready(function() { 
        $(".fancybox").fancybox({
            'opacity'       : true,   
            'overlayShow'   : true,       
            'transitionIn'  : 'elastic', 
            'transitionOut' : 'elastic'
        });
        }); 
</script>
</head>

8. создание структуры фотогалереи

В атрибут class дескриптора <a> вписываем "fancybox": class="fancybox" - единый класс для всех ссылок фотогалереи, он необходим для выборки объектов увеличения.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Увеличение изображения фотогалереи</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <!-- блок фотогалереи -->
    <div class="wrapper">
        <div class="galery">
            <a href="pictures/work1.jpg" class="fancybox">
                <img src="pictures/work1.jpg">
            </a>
            <a href="pictures/work2.jpg" class="fancybox">
                <img src="pictures/work2.jpg">
            </a>
            <a href="pictures/work3.jpg" class="fancybox">
                <img src="pictures/work3.jpg">
            </a>
        </div>
        <div class="galery">
            <a href="pictures/work4.jpg" class="fancybox">
                <img src="pictures/work4.jpg">
            </a>
            <a href="pictures/work5.jpg" class="fancybox">
                <img src="pictures/work5.jpg">
            </a>
            <a href="pictures/work6.jpg" class="fancybox">
                <img src="pictures/work6.jpg">
            </a>
        </div>
    </div>
    <!-- конец блока фотогалереи -->
</body>
</html>

Атрибут rel предназначен для объединения изображения в одну галерею. Добавим атрибут rel="works" - слово "works" выдуманное.
Атрибут title служит подписью к изображению.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Увеличение изображения фотогалереи</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <!-- блок фотогалереи -->
    <div class="wrapper">
        <div class="galery">
            <a href="pictures/work1.jpg" class="fancybox" rel="works" title="Изображение №1">
                <img src="pictures/work1.jpg">
            </a>
            <a href="pictures/work2.jpg" class="fancybox" rel="works" title="Изображение №2">
                <img src="pictures/work2.jpg">
            </a>
            <a href="pictures/work3.jpg" class="fancybox" rel="works" title="Изображение №3">
                <img src="pictures/work3.jpg">
            </a>
        </div>
        <div class="galery">
            <a href="pictures/work4.jpg" class="fancybox" rel="works" title="Изображение №4">
                <img src="pictures/work4.jpg">
            </a>
            <a href="pictures/work5.jpg" class="fancybox" rel="works" title="Изображение №5">
                <img src="pictures/work5.jpg">
            </a>
            <a href="pictures/work6.jpg" class="fancybox" rel="works" title="Изображение №6">
                <img src="pictures/work6.jpg">
            </a>
        </div>
    </div>
    <!-- конец блока фотогалереи -->
</body>
</html>

Основные параметры, которые можно задать при вызове fancybox и которые влияют на внешний вид и поведение фотогалереи:

'opacity': true - Прозрачности нет.
'overlayShow': true - затемнение общего фона страницы (по умолчанию true)
'transitionIn': 'elastic','transitionOut': 'elastic' - transitionIn, transitionOut - анимация перехода состояния (по умолчанию 'fade'). Может принимать значения 'elastic' (окно появляется из точки), 'fade' (через прозрачность) или 'none' (нет).

запуск примера

ЗАПУСТИТЬ

скачать пример

СКАЧАТЬ