Мини фотогалерея из 11 строк кода

[UDAV]

Мини фотогалерея из 11 строк кода
Начинаем с само собой разумеющегося - подключаем библиотеку jQuery:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

Для выстраивания миниатюр используем ненумерованный список 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'а абсолютно (сюда будем выводить комментарии к фотографиям) и оформим его соответствующим образом.
Осталось самое главное - эти одиннадцать строк кода, которые заставят работать эту конструкцию.
(строк здесь получилось несколько больше, но в исходном коде примера их ровно 11)

<script type="text/javascript">
<!--
$(document).ready(function(){
  $('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();
});
-->
</script>

Пример в аттаче.
З.ы. скрипт не мой.

 

[dlsmit]

Отличная галлерея, спс. Особенно порадовало плавное появление самих картинок.