Loading





Форекс с Альпари

eTXT




Анкетка


Оригинальная фотогалерея на css, ajax и jquery


Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В этом уроке мы собираемся создать еще одну галерею изображений с миниатюрами внизу, которые двигаются автоматически при перемещении мыши. Прокрутка изображений сделана с помощью CSS и JQuery. Идея галереи состоит в том, чтобы позволить пользователю увеличить картинку, нажав на ее картинку-превью. При наведении курсора мыши на миниатюру, она осветляется, а при щелчке - увеличивается в поле показа до оригинальных размеров. Помимо этого смену изображений можно осуществлять нажатием мыши на левый или правый край картинки (при этом курсор мыши трансформируется и появляются стрелки - указатели, но не во всех браузерах). Если Вы наведёте мышь на центральную часть изображения, указатель принимает форму «плюсика», а при нажатии мыши меняется на «минус» и превьюшки исчезают. При повторном щелчке, все возвращается в исходное состояние.

Кроме того, мы будем использовать PHP, чтобы вывести изображения и указатели из структуры папок. Папки будут содержать подпапки с альбомами и мы добавим опцию в галерее, которая позволяет выбрать альбом. Также будет использоваться функция изменения размера изображений и добавлен XML-файл, который содержит описания картинок.

Сделайте щелчок мышью в области картинки для её увеличения.

Оригинальная фотогалерея на css, ajax и jquery
Оригинальная фотогалерея на css, ajax и jquery

Демо-пример Исходники (7.4 мб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


Установка на сайт

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

меткаВ папке SlidingThumbnailsGallery Вы увидите вложенные папки ajax, css, icons, images и thumbs, а также файл скрипта jquery.gallery.js и индексный файл index.php.

Проверить функциональность галереи на компьютере не получится, так как, во-первых, индексный файл имеет расширение PHP, а во-вторых, необходимо подключение к Сети Интернет.
Поэтому сначала разберёмся со всем содержимым папки SlidingThumbnailsGallery и затем закачаем её полностью на сервер сайта, где откроем файл index.php.

Папка images

Начнём с этой папки, так как подбор и размещение изображений играет ключевую роль в создании галереи. В каждый из трёх альбомов загрузим изображения размером комфортным для показа. Количество изображений может быть ограничено только условием разумной достаточности и соответствовать количеству картинок-превью в папке thumbs.

Папка thumbs

В этой папке, в трёх вложенных папках, содержатся превьюшки наших изображений для показа. Размеры этих изображений, в крайнем случае, можно оставить оригинальными, если не желаете заморачиваться с изменениями размеров, но, из соображений целесообразности и в плане экономии места на диске, лучше всё-таки сделать их размеры меньше.

В каждом альбоме с картинками-превью имеется XML-файл с названиями и описаниями для изображений. Назовём этот файл desc.xml. Добавление описания для изображений не является обязательным. Структура XML-файла будет следующей:


<descriptions>
	<image>
		<name>1.jpg</name>
		<text>Описание</text>
	</image>
	<image>
		<name>2.jpg</name>
		<text>Описание</text>
	</image>
	<image>
		<name>3.jpg</name>
		<text>Описание</text>
	</image>
	...
</descriptions>


Файл index.php

В разделе head проверим подключение файла стилей галереи:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

Давайте взглянем на HTML и PHP-коды в разделе body:


<div class="albumbar">
            <span>
                <a href="#" target="_blank">
                    Переход на какую-либо страницу
                </a>
            </span>
            <div id="albumSelect" class="albumSelect">
                <ul>
                    <?php
                    $firstAlbum = '';
                    $i=0;
                    if(file_exists('images')) {
                        $files = array_slice(scandir('images'), 2);
                        if(count($files)) {
                            natcasesort($files);
                            foreach($files as $file) {
                                if($file != '.' && $file != '..') {
                                    if($i===0)
                                        $firstAlbum = $file;
                                    else
                                        echo "<li><a>$file</a></li>";
                                    ++$i;
                                }
                            }
                        }
                    }
                    ?>
                </ul>
                <div class="title down"><?php echo $firstAlbum;?></div>
            </div>
        </div>
        <div id="loading"></div>
        <div id="preview">
            <div id="imageWrapper">               
            </div>  
        </div>
        <div id="thumbsWrapper">
        </div>
        <div class="infobar">
            <span id="description"></span>
            <span class="reference">
                <a href="/">©  На мой сайт</a>
            </span>
        </div>
        <!--JavaScript-->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.gallery.js"></script> 

          Здесь можно проставить ссылку и её описание, например для перехода на какую-либо страницу с материалом по данной теме.

          Далее идет блок выбора альбома. Первый альбом будет выбран по умолчанию: Блок выбора альбома

          В этой строке можно прописать адрес и название ссылки, например на главную страницу своего сайта.

          В этих строках прописаны пути вызова jquery. В верхней строке это происходит с сайта //ajax.googleapis.com, в нижней же файл jquery.gallery.js есть в нашем распоряжении. О подключении библиотеки прочтите здесь

Папка css

В этой папке находится файл стилей style.css. Разберем его максимально подробно.

1. В самом начале добавлены стили по умолчанию для body:


body{
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff; 
    font-size:10px;
    overflow:hidden;
    background-color:#f9f9f9;
}

Текущий цвет фона по умолчанию приближенный к белому (background-color:#f9f9f9;), но Вы можете применить другие цвета, чтобы картина выглядела более привлекательной.

2. Давайте посмотрим стили верхней «планки» страницы:


.albumbar{
    height:24px;
    line-height:24px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    top:0px;
    -moz-box-shadow:-2px 0px 4px #333;
    -webkit-box-shadow:-2px 0px 4px #333;
    box-shadow:-2px 0px 4px #333;
    z-index:11;
}

3. Далее идут стили инфо-бара (в самом низу), в котором будут появляться описания каждого изображения:

 
.infobar{
    height:22px;
    line-height:22px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    bottom:0px;
    -moz-box-shadow:0px -1px 2px #000;
    -webkit-box-shadow:0px -1px 2px #000;
    box-shadow:0px -1px 2px #000;
}
span#description, .albumbar span{
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
.albumbar span a{
    color:#aaa;
    text-decoration:none;
}
.albumbar span a:hover{
    color:#ddd;
} 
 
 

4. Информационная панель и строки выбора альбома будут фиксированы и расположены в верхней правой части страницы. Поля albumSelect и albumSelect .title будут выглядеть в стилях следующим образом:

 
.albumSelect{
    height:18px;
    line-height:18px;
    position:absolute;
    right:5px;
    top:2px;
    width:120px;
}
.albumSelect .title{
    color:#f0f0f0;
    z-index:10;
    border:1px solid #444;
    background-color:#555;
    background-repeat:no-repeat;
    background-position:90% 50%;
    cursor:pointer;
    text-align:left;
    text-indent:10px;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
} 
 
 

5. В качестве указателей используется два изображения маленьких треугольников. Определим для них два класса - вверх и вниз:


.down{
    background-image:url(../icons/down.png);
}
.up{
    background-image:url(../icons/up.png);
}

6. Список UL со всеми альбомами будет выглядеть в стилях следующим образом:


.albumSelect ul {
    list-style:none;
    display:none;
    padding:0px;
    width:100%;
    border:1px solid #444;
    background-color:#555;
    margin:22px 0px 0px 0px;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}
.albumSelect ul li a{
    text-decoration:none;
    cursor:pointer;
    display:block;
    padding:3px 0px;
    color:#ccc;
}
.albumSelect ul li a:hover{
    background-color:#000;
    color:#fff;
}

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

7. Значок загрузки контейнера (loading.gif) будет показан в центре страницы (left:50%;). Расстояние от верха - 40% (top:40%;):


#loading{
    display:none;
    width:50px;
    height:50px;
    position:absolute;
    top:40%; 
    left:50%;
    margin-left:-24px;
    background:transparent url(../icons/loading.gif) no-repeat top left;
}

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

 
#thumbsWrapper{
    position: absolute; 
    width:100%;
    height:102px;
    overflow-y:hidden;
    background-color:#000;
    bottom:0px;
    left:0px;
    border-top:2px solid #000;
} 
 
 

9. Контейнер для превью (ThumbsContainer) будет иметь ширину, рассчитанную динамически в JavaScript, поэтому мы не определяем её в классе:


#thumbsContainer{
    height:79px;
    display:block;
    margin: 0;
}

10. Миниатюрные изображения имеют следующие стили:


#thumbsWrapper img{
    float:left;
    margin:2px;
    display:block;
    cursor:pointer;
    opacity:0.4;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

Им присвоено низкое значение непрозрачности (opacity:0.4;, opacity=40), чтобы получить возможность добавить эффект при наведении.

11. Блок ImageWrapper для изображений большого размера имеет следующий стиль:


#imageWrapper{
    position:relative;
    text-align:center;
    padding-top:30px; 
}

Добавлен отступ сверху (padding-top:30px; ), чтобы сделать альбом с большими изображениями обособленным.

12. Выравниваем центр изображения по горизонтали (margin:0 auto;):


#imageWrapper img{
    margin:0 auto; 
    -moz-box-shadow:2px 2px 10px #111;
    -webkit-box-shadow:2px 2px 10px #111;
    box-shadow:2px 2px 10px #111;
}

Здесь также создана аккуратная тень блока для больших изображений, которая воспринимается всеми современными браузерами.

13. И, наконец, определяем классы для различных типов курсора:


.cursorRight{
.cursorRight{
    cursor:url("../icons/next.cur"), url("icons/next.cur"), default;
}
.cursorLeft{
    cursor:url("../icons/prev.cur"), url("icons/prev.cur"),  default;
}
.cursorPlus{
    cursor:url("../icons/plus.cur"), url("icons/plus.cur"), default;
}
.cursorMinus{
    cursor:url("../icons/minus.cur"), url("icons/minus.cur"), default;
}

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка