Собственно я не собирался делать вообще никаких галерей. Просто как обычно отметил для себя довольно часто повторяющийся вопрос – как заставить картинку плавно появиться после ее окончательной загрузки? В общем это не очень сложно, но чтобы придать примеру какую-то практическую пользу я покажу как сделать из этого простенькую мини фотогалерею. Основное ее достоинство в том, что она реализована всего одиннадцатью строками кода, но думаю многим сможет пригодиться, поскольку не всегда бывает нужна мощная функциональность таких галерей как LightBox или FancyBox.
Начинаем с само собой разумеющегося – подключаем библиотеку jQuery:
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
Постараемся не вносить в HTML-разметку лишних идентификаторов, имен классов, попробуем обойтись минимумом. Для выстраивания миниатюр используем ненумерованный список ul, в каждом элементе li которого и будет содержаться миниатюра. Миниатюре – тэгу img, добавим атрибут alt, в который напишем комментарий к фотографии. Картинку-миниатюру заключим в тэг a, атрибут href которого будет указывать на полноразмерную фотографию. С миниатюрами все. Добавим в HTML-разметку элемент div, в который будем загружать полноразмерные изображения при клике на соответствующую миниатюру и вот ему пожалуй придется присвоить идентификатор #imgHolder. Получилась вот такая простенькая разметка:
<ul>
<li>
<a href="max/1.jpg">
<img src="min/1.jpg" alt="Офигительный жучила..." />
</a>
</li>
.......
<li>
<a href="max/7.jpg">
<img src="min/7.jpg" alt="Гадина какая-то страшная..." />
</a>
</li>
</ul>
<div id="imgHolder"></div>
С помощью CSS оформляем разметку так, как нам понравится.
img { border:none; }
ul { margin:0; padding:0; list-style:none; }
ul li { display:inline; }
#imgHolder {
position:relative;
width:800px; height:600px;
overflow:hidden;
}
#imgHolder em {
position:absolute;
left:10px; bottom:10px;
margin:2px 10px; padding:2px 10px;
background-color:#000; color:#fff;
}
В примере – не показываем рамку у изображений, для списка задаем нулевые значения полей и отступов, для элементов li устанавливаем свойству display значение inline, вытягивая таким образом список в строку. Зададим блоку #imgHolder ширину, высоту и на всякий случай свойству overflow присвоим значение hidden. Позиционируем элемент em внутри div‘а абсолютно (сюда будем выводить комментарии к фотографиям) и оформим его соответствующим образом.
Осталось самое главное – эти одиннадцать строк кода, которые заставят работать эту конструкцию. Вот эти строки:
$('ul img').click(function(){
var path = $(this).parent().attr('href');
var alt = $(this).attr('alt');
$('#imgHolder').animate({opacity: 0},1000,function(){
$(this).html('<img src=' + path + ' />').find('img').bind('load',function(){
$(this).parent().append('<em>' + alt + '</em>').animate({opacity: 1},1000);
});
});
return false;
});
$('ul img:first').click();
Давайте подробно, строка за строкой разберемся, что мы тут наделали.
При загрузке страницы, вернее при наступлении момента готовности DOM (кусок кода с $(document).ready() опущен) мы выбираем все элементы img, которые являются потомками элементов ul. Есть у нас такие? Да, есть – это картинки-миниатюры. Связываем с этим набором элементов событие click, при наступлении которого выполним некоторую функцию.
Что же будет делать эта функция? Для начала определяем пару переменных. path – здесь мы запомним значение атрибута href элемента, который является предком картинки-миниатюры, т.е. элемента a. alt – сюда поместим содержимое атрибута alt самой картинки-миниатюры, чтобы впоследствии вывести его в качестве комментария к полноразмерному изображению.
Дальше начинается самое интересное – с помощью метода animate() мы в течение 1000 мс плавно скроем элемент div с идентификатором #imgHolder через задание значения 0 его CSS-свойству opacity. И как только это произойдет начнем действовать дальше, указав в третьем параметре метода animate() callback-функцию, которая будет вызвана в этот момент.
Внутри этой функции this ссылается на элемент div с идентификатором #imgHolder. Помня это обстоятельство, помещаем в этот элемент div фрагмент html-кода, описывающий элемент img – полноразмерную картинку. В атрибуте src которой указываем путь, сохраненный ранее в переменной path. Следуя далее по цепочке вызовов, отыскиваем только что добавленный элемент с помощью метода find() и используя метод bind(), связываем еще одну callback-функцию c событием load – с моментом загрузки полноразмерного изображения.
Внутри этой функции this указывает уже на большую картинку, поэтому мы отыскиваем ее родителя (элемент div #imgHolder) и используя append() добавляем туда em с комментарием, который предусмотрительно сохранили в переменной alt. После этого вновь используем метод animate(), но уже для того, чтобы плавно, в течение 1 секунды показать элемент div #imgHolder с уже загруженной полноразмерной фотографией, устанавливая CSS-свойству opacity значение 1.
return false служит для того, чтобы предотвратить стандартные действия браузера (т.е. переход по ссылке) при клике на элементе a.
Осталась только самая последняя строка кода, которая служит для того, чтобы при загрузке страницы подгрузить в #imgHolder полноразмерную фотографию с помощью эмуляции события click на первой картинке-миниатюре.
Проверил и убедился, что все работает в в FF2 и 3, Opera9, IE6 и 7, Google Chrome.
Вы можете открыть пример в новом окне, испытать его и посмотреть полный исходный код. Вы можете скачать архив, который содержит все файлы примера.
Предупреждая вопросы насчет всяких стрелочек вперед – назад и прочих штучек, хочу сразу напомнить, что это всего лишь пример, с помощью которого я стараюсь объяснить, как плавно скрыть и не менее плавно показать большую картинку только после ее окончательной загрузки.
