Фотогалерея на CSS и JavaScript

HTML

<div class="photo">
<ul class="link_photo">
<li><a href="max/1.jpg"><img src="min/1.jpg" alt="Город будущего"></a></li>
<li><a href="max/2.jpg"><img src="min/2.jpg" alt="Божья коровка"></a></li>
<li><a href="max/3.jpg"><img src="min/3.jpg" alt="Ангел"></a></li>
<li><a href="max/4.jpg"><img src="min/4.jpg" alt="Взлетевший город"></a></li>
</ul>
</div>
<div id="imgHolder"></div>

CSS

img {
border:none;
}
ul {
margin:0; padding:0; list-style:none;
}
ul li {
display:inline;
}
#imgHolder {
position:relative; width:100%;height:256px; overflow:hidden;
}
#imgHolder em {
position:absolute; left:10px; bottom:10px; margin:2px 10px;
padding:2px 10px; background-color:#000; color: burlywood;
}

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();
});

Для того, чтобы фотогалерея начала работать надо разместить на своем сайте библиотеку jQuery, прикрутить ее к нашей фотогалерее, прописав в разделе HEAD страницы, что-то типа:

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

Фотогалерея готова!
Та же самая фотогалерея только встроенная в дизайн страницы.

Неплохая фотогалерея на javascript, сделанная с помощью скрипта FrogJS.