ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Фотогалерея с эффектами

Принцип работы галереи достаточно прост - щелчок по эскизу вызывает появление крупного изображения. Щелчок по эскизу заставляет появляться крупное изображение, а рисунок, имеющийся на странице постепенно исчезать. Для пользователей, у которых отключен JavaScript, предоставляется возможность увидеть изображение перейдя по ссылке, в которое заключено крупное изображение.

Итак, действие начинается при щелчке по ссылке, т.е. данный сценарий использует событие щелчка по ссылке, чтобы выполнить следующие задачи.

  1. Воспрепятствовать стандартному поведению ссылок. Как правило щелчок по ссылке означает переход на другую страницу. На данной странице щелчок по ссылке, включающий эскиз, означает покидание страницы и отображение более крупного изображения. Поскольку мы используем JavaScript для показа изображения, необходимо добавить небольшой код, чтобы воспрепятствовать переходу по ссылке в браузере.
  2. Получить значение href ссылки, которая указывает на более крупное изображение. Возвратив значение ее href, мы одновременно получаем путь к крупному изображению.
  3. Создать новый элемент изображения для вставки на страницу. Этот элемент будет включать путь из значения href.
  4. Скрыть старый рисунок и заставить появиться новый. Текущее изображение медленно исчезает из виду, а крупная картинка проявляется.

Создадим страницу с двумя колонками. В левой колонке будут находится иконки с рисунками, в правой будут выводиться, по щелчку мыши, большие фотографии.

HTML-код левой колонки:

<div id="gallery" >
<a href="../images/pict1_h.jpg"><img class="pict" src="../images/pict1.jpg" alt="Год рждения"/></a>
<a href="../images/pict2_h.jpg"><img class="pict" src="../images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a href="../images/pict3_h.jpg"><img class="pict" src="../images/pict3.jpg" alt="Что тут пить"/></a>
<a href="../images/pict4_h.jpg"><img class="pict" src="../images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a href="../images/pict5_h.jpg"><img class="pict" src="../images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a href="../images/pict6_h.jpg"><img class="pict" src="../images/pict6.jpg" alt="Я тост принес"/></a>
</div>

HTML-код правой колонки:

<div id = "photo"></div>

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


$(document).ready(function() {
$("#gallery a").click(function(evt) {

});
});

Селектор #gallery a выбирает элементы ссылок внутри элемента с идентификатором gallery. В коде обработчику событие click передается анонимная функция. В данном случае переменная evt сохраняет объект события. Мы воспользуемся им в следующем шаге, чтобы предотвратить переход по ссылке. Дальше введем следующий код:

evt.preventDefault();

Как правило щелчок по ссылке дает команду загрузить документ, на который она указывает(веб-страницу, графический файл, PDF-документ и т.д.). В данном случае ссылка присутствует для того, чтобы пользователи, у которых на включен JavaScript, смогли перейти к большому изображению. Чтобы помешать браузеру сдалать этот переход, запускаем функцию preventDefault().

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

var imgPath = $(this).attr("href");

Здесь выражение $(this) относится к элементу, по которому был совершен щелчок, т.е. к ссылке. Атрибут href указывает на страницу или ресурс, к которому ведет ссылка. Это важная информация, поскольку мы можем использовать ее для добавления элемента изображения, указывающего не его файл. Но прежде чем это сделать, нам необходимо получить ссылку на изображение, которое в данный момент отображено на странице. Имеенно это изображение в дальнейшем нам придется скрыть.

Введем следующий код:

var oldImage = $("#photo img");

Переменная oldImage содержит выборку, в которой находится элемент img внутри тега div фотографии. Пришло время создать элемент для нового изображения. Для этого введем следующий код:

var newImage = $('<img src="' + imgPath + '">');

В данной переменной создается новый элемент img и сохраняется в переменной newImage. Когда сценарий передаст данную информацию, например $("<img src = '../images/pict1_h.jpg'>"), браузер создаст элемент страницы. Он пока еще не отображен, но браузер готов добавить его на страницу в любое время.

Добавим следующий код:

 newImage.hide();
  $("#photo").prepend(newImage);
  newImage.fadeIn(1000);

Теперь, только что созданное изображение, сохраненное в переменной newImage, скрыто с использованием функции hide().

Итак, сначала мы скрываем изображение, а потом добавляем его на страницу в элемент div фотографии.

Функция prepend() добавляет HTML-код в элемент, а именно в его начало. Теперь в элементе div фотографии присутствуют два изображения. Одно изображение находится поверх другого. Верхнее изображение невидимо, но функция fadeIn() заставляет изображение медленно проявляться в течении 1000 миллисекунд(одной секунды). Теперь нужно, чтобы исходное изображение исчезло из виду. Для этого в наш код добавим следующие строки:

oldImage.fadeOut(1000,function(){
	$(this).remove();  
  });

В переменной oldImage мы сохранили ссылку на исходное изображение. Этот рисунок должен быть скрыт, для этого используется функция fadeOut(). Мы передаем функции два аргумента:

  1. Первый - длительность эффекта (1000 миллисекунд).
  2. Второй -функция обратного вызова, которая выполняется после завершения эффекта исчезновения и удаляет элемент img для данного изображения. Функция remove() удаляет элемент из объектной модели документа.

Последний шаг - это загрузка первого изображения В настоящее время элемент div, в котором находится фотография, пуст. Для добавления первой фотографии добавим следующий код:

$("#gallery a:first").click();

Последняя инструкция состоит из двух частей. Сначала селектор #gallery a:first выбирает первую ссылку в элементе div. Далее следует функция click(). Мы использовали ее, чтобы присвоить функцию, которая выполняется, когда происходит событие. Однако если не передать функции события ни каких аргументов, то это просто запустит событие. То есть данная строка кода заставит большую фотографию первогой иконки появиться при загрузке страницы.


$(document).ready(function() {
$("#gallery a").click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr("href");
var oldImage = $("#photo img");
var newImage = $("<img src="' + imgPath + '">");
newImage.hide();
$("#photo").prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$("#gallery a:first").click();

});
<!DOCTYPE html>
<html>
<title>Фотогалерея с эффектами</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.w3-light-grey{color:#000!important;background-color:#f1f1f1!important}
.w3-content{max-width:980px;margin:auto}
.w3-margin-top{margin-top:16px!important}
.w3-margin-bottom{margin-bottom:16px!important}
.w3-layout-container{display:table;width:100%}
.w3-row-padding{padding:0 8px}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s2{width:16.66666%}
.w3-col.s10{width:83.33333%}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-grey{color:#000!important;background-color:#9e9e9e!important}
.w3-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-display-container{position:relative}
.w3-container{padding:0.01em 16px}
.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-teal{color:#fff!important;background-color:#009688!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-center{text-align:center; height:70px; }
.fa{margin-top:20px}
#gallery{margin:0; padding:10px; text-align:center}
#photo img{position:relative; top:20px; left:10px; max-width:99% }
.pict{margin:4px; max-width:99%}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#gallery a").click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr("href");
var oldImage = $("#photo img");
var newImage = $('<img src="' + imgPath + '">');
newImage.hide();
$("#photo").prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$("#gallery a:first").click();

});
</script>
<body class="w3-light-grey">

<!-- Page Container -->
<div class="w3-content w3-margin-top w3-layout-container" >

<!-- The Grid -->
<div class="w3-row-padding">

<!-- Left Column -->
<div class="w3-third w3-col s2 " >
<div class="w3-white w3-text-grey w3-card-4" style="height:550px; margin:0 8px 0 0">
<div class="w3-display-container">
<div id="gallery" >
<a href="images/pict1_h.jpg"><img class="pict" src="images/pict1.jpg" alt="Год рждения"/></a>
<a href="images/pict2_h.jpg"><img class="pict" src="images/pict2.jpg" alt="Тебе нужен тост"/></a>
<a href="images/pict3_h.jpg"><img class="pict" src="images/pict3.jpg" alt="Что тут пить"/></a>
<a href="images/pict4_h.jpg"><img class="pict" src="images/pict4.jpg" alt="Мой прадед говорил"/></a>
<a href="images/pict5_h.jpg"><img class="pict" src="images/pict5.jpg" alt="Так выпьем же за то"/></a>
<a href="images/pict6_h.jpg"><img class="pict" src="images/pict6.jpg" alt="Я тост принес"/></a>
</div>
</div>
</div><br>
<!-- End Left Column -->
</div>
<!-- Right Column -->
<div class="w3-twothird w3-col s10" >
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Кадры из моих любимых фильмов</h2>
<div id = "photo"></div>
<!-- End Right Column -->
</div>

<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
<div style=" clear:both"
<footer class="w3-container w3-teal w3-center w3-margin-top">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>

</body>
</html>