Здравствуйте, прошу помощи в доработке кода. Нашла красивую галерею ПРИМЕР Она мне очень нужна, так как приходится обходиться этим. Мне нужно, чтобы слева можно было добавлять бесконечное число фото. Я думаю, что это можно осуществить с помощью контейнера со скроллингом. Мои эксперименты с <div class="scroll"> не увенчались успехом  :dontknow: Помогите, пожалуйста!

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Фотогалерея с помощью CSS</title>
<style type="text/css">
body{
	margin:0;
	padding:50px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	background:#000;
}
a img{border:none;}
 
#gallery1{
	width:663px;
	height:400px;
	overflow:hidden;
	position:relative;
	z-index:1;
	margin:0 auto 100px auto;
}
#tabs1{
	list-style:none;
	padding:0;
	margin:0;
	width:130px;
	height:400px;
	float:left;
}
#tabs1 li{
	padding:0;
	margin:0;
	float:left;
}
#tabs1 li a img{
	display:block;
	width:120px;
	height:90px;
}
#tabs1 li a{
	display:block;
	border:5px solid #999;
	width:120px;
	height:90px;
}
#tabs1 li a:hover{border:5px solid #fff;}
#tabs1 li a img.fullPic, #gallery1 div{
	position:absolute;
	z-index:1;
	left:130px;
	top:0;
	width:533px;
	height:400px;
}
#tabs1 li a:hover img.fullPic{z-index:3;}
#gallery1 div{
	z-index:2;
	background:#242424;
}
</style>
</head>
<body>
<h1>Галерея №1. Переключение картинок на hover.<br /> Почему-то не работает в ие6 =(</h1>
<div id="gallery1">
	<ul id="tabs1">
<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>
<li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>
<li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>
<li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>
	</ul>
	<div></div>
</div>
</body>
</html>

Теги: заказ скриптов

Отредактировано Slavna (2012-09-14 05:43:16)