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

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

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

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

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

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

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

Создание фотогалереи

фотогаллерея
Обзор задачи

Файл содержит серию из шести изображений. Каждая картинка заключена в ссылку, указывающую на большую версию фотографии, все изображения содержатся в элементе div с идентификатором gallery.

Нам надо решить две основные задачи:

  1. Предварительно загрузить сменяемое изображение, связанное с каждым изображением внутри элемента div.
  2. Прикрепить функцию hover() к каждой из картинок в рамках элемента div. Функция hover() меняет переключаемое изображение, когда на него наведен указатель мыши, а затем возвращает исходную картинку, когда курсор смещается с изображения.

Из этого описания видно, что оба шага связаны с изображением внутри элемента div, т.е один из подходов к этой задаче - сначала выбрать изображение внутри элемента div, а затем проработать выборку в цикле, предварительно загружая сменяемый вариант для каждого из изображений и прикрепляя к нему функцию hover().

В первом шаге выбираются все изображения в элементе div и задается цикл с функцией each(), которая позволяет исполнить переданную функцию для каждого выбранного элемента.


$(document).ready(function() {
$("#gallery img").each(function() {

});
});

Этот сценарий просматривает в цикле каждое изображение галереи, но не делает более ничего. В первую очередь нам необходимо взять свойтсво изображения src и сохранить его в переменной, которая будет использоваться далее в сценарии.

Создаем переменную с кодом:

var imgFile = $(this).attr("src");

Ключевое слово $(this) будет относиться к каждому из элементов изображения в порядке очереди, обрабатываемой в цикле. Функция attr() возвращает указанный атрибут HTML. В данном случае она возвращает свойство src изображения и сохраняет его в переменной imgFile.

Для предварительной загрузки изображения, создадим объект изображения.

var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt, "_h$1");

В данном случае переменная preloadImage создается для сохранения объекта изображения. Далее предварительная загрузка происходит при задавании свойства src объекта изображения.

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

В данном примере мы будем использовать более эффективный и менее трудоемкий способ предварительной загрузки изображений. Для этого необходимо всего лишь правильно назвать файл с изображением. Например, первое малое изображение назовем pict1, большое изображение pict1_h. Оба файла необходимо сохранить в одном и том же каталоге, поэтому и путь к ним будет одинаковый. Для чего это надо будет понятно дальше.

Если мы знаем путь к изображению на странице, то имя сменяемого изображения будет просто содержать символы _h перед раширеним jpg. Таким образом, после проведенной манипуляции images/pict1.jpg становится images/pict1_h.jpg.

Именно эту задачу выполняют две оставшиеся строки кода. Первая - создает регулярное выражение:

var imgExt = /(\.\w{3,4}$)/;

Данное выражение находит точку, за которой следуют три или четыре символа в конце строки. В нашем случае это .jpg.

Для замены соответствующего текста другм используется функция replace().

preloadImage.src = imgFile.replace(imgExt, "_h$1")

C ее помощью окончание имени файла будет заменено на _h, поэтому вместо images/pict1.jpg, мы получим images/pict1_h.jpg.

Теперь, когда переключаемое изображение уже предварительно загружено, мы можем присвоить ему событие hover().


$(document).ready(function() {
$("#gallery img").each(function() {
var imgFile = $(this).attr("src");
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt, "_h$1");
$(this).hover(
function(){

});
});
});;

В пустую строку добавим следующие строчки кода:

$(this).attr({"src":preloadImage.src,"id":"pict"});
$("body").attr("class","grey");
},

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

А теперь добавим вторую функцию, которая меняет атрибут src на атрибут исходного изображения. Путь к исходному изображению, сохраняется в переменной imgFile. Вернем изображению его идентификатор, а странице вернем ее первоначальный фон.


$(document).ready(function() {
$("#gallery img").each(function() {
var imgFile = $(this).attr("src");
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt, "_h$1");
$(this).hover(
function(){
$(this).attr({"src":preloadImage.src,"id":"pict"});
$("body").attr("class","grey");
},
function(){
$(this).attr({"src":imgFile,"id":"photo"});
$("body").attr("class","ff");
});
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Создание фотогалереи</title>
<style type="text/css">
#gallery{display:block; overflow:hidden; margin:1% 5%; width:80%; height:100% }
#hF{margin:1% 5%;}
#pict{position:absolute; top:10%; bottom:1%; left:5%; right:5%}
.grey{background:#5B5757}
.ff{background:#FFFFFF}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#gallery img").each(function() {
var imgFile = $(this).attr("src");
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt, "_h$1");
$(this).hover(
function(){
$(this).attr({"src":preloadImage.src,"id":"pict"});
$("body").attr("class","grey");
},
function(){
$(this).attr({"src":imgFile,"id":"photo"});
$("body").attr("class","ff");
});
});
});
</script>
</head>

<body>
<h3 id = "hF">Кадры из моих любимых фильмов</h3><br>
<div id="gallery">
<img id = "photo" src="images/pict1.jpg" alt="Год рождения"/>
<img id = "photo" src="images/pict2.jpg" alt="Тебе нужен тост"/>
<img id = "photo" src="images/pict3.jpg" alt="Что тут пить"/>
<img id = "photo" src="images/pict4.jpg" alt="Мой прадед говорил"/>
<img id = "photo" src="images/pict5.jpg" alt="Так выпьем же за то"/>
<img id = "photo" src="images/pict6.jpg" alt="Я тост принес"/>
</div>
<p><em><span style="font-size:18px; color:#EF2226">Обратите внимание:</span> из-за особенностей работы плагина, код данного примера может работать не корректно.
Для того, чтобы пример работал корректно, перезагрузите страницу или создайте HTML файл на Вашем компьютере и скопируйте в него код из примера.</em></p>

</body>
</html>