HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

Фотогалерея с помощью CSS, без использования java script

Посмотрим, как можно сделать простенькую фотогалерею только при помощи CSS, без использования java script.

Пример того, что мы будем делать смотрите тут: пример галереи на css. Итак, начнем.

CSS галерея, переключение картинок на hover

Посмотрим сразу код, и начнем разбирать его:

<!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>

Как видим, создаем блок галереи и список мелких картинок. Рядом с каждой картинкой стоит ее большая картинка. Важно, чтобы обе картинки были в теге a. Сама идея галереи на hover состоит в том, что все большие картинки, позиционируются абсолютно в одном месте, и при наведении на мелкую картинку, т.е. на a:hover, у большой картинки меняется z-index на бОльший, и тем самым она «всплывает» над остальными. И в итоге, получается переключение картинок при наведении на мелких. Пустой див внизу нужен для перекрытия всех больших картинок, чтобы в самом начале не было видно ни одной большой картинки.

Вроде бы ничего сложного, но почему-то в моем эмуляторе ие6 данный пример заработать не захотел. Ну и хрен с ним =)

CSS галерея, переключение картинок на click

Теперь более интересный способ. Посмотрим, как переключать картинки на click. Даю код, и начнем разбирать его:

<!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;}
 
#gallery2{
	width:663px;
	height:400px;
	overflow:hidden;
	position:relative;
	z-index:1;
	margin:0 auto 100px auto;
}
#tabs2{
	list-style:none;
	padding:0;
	margin:0;
	width:130px;
	height:400px;
	float:left;
}
#tabs2 li{
	padding:0;
	margin:0;
	float:left;
}
#tabs2 li a img{
	display:block;
	width:120px;
	height:90px;
}
#tabs2 li a{
	display:block;
	border:5px solid #fff;
	width:120px;
	height:90px;
}
#fullPicBlock{
	width:533px;
	height:400px;
	overflow:hidden;
	float:left;
	background:#242424;
}
 
</style>
</head>
<body>
<h1>Галерея №2. Переключение картинок на click.</h1>
<div id="gallery2">
	<ul id="tabs2">
		<li><a href="#pic1"><img src="images/pic1s.jpg" alt="" /></a></li>
		<li><a href="#pic2"><img src="images/pic2s.jpg" alt="" /></a></li>
		<li><a href="#pic3"><img src="images/pic3s.jpg" alt="" /></a></li>
		<li><a href="#pic4"><img src="images/pic4s.jpg" alt="" /></a></li>
	</ul>
	<div id="fullPicBlock">
		<div><a name="pic1"></a><img src="images/pic1.jpg" alt="" /></div>
		<div><a name="pic2"></a><img src="images/pic2.jpg" alt="" /></div>
		<div><a name="pic3"></a><img src="images/pic3.jpg" alt="" /></div>
		<div><a name="pic4"></a><img src="images/pic4.jpg" alt="" /></div>
	</div>
</div>
</body>
</html>

Собственно что делаем. А делаем 2 блока для мелких картинок и для больших картинок. Блок больших картинок делаем шириной и высотой равной большим фоткам, и задаем ему overflow:hidden. Внутри него ставим большие картинки с ссылками-якорями. И на мелких картинках ставим ссылки на их соответствующие якори. В итоге, при клике на мелкую картинку, в большом блоке всплывает его соответствующая большая картинка. Обертывание якорных ссылок и больших картинок в div, позволяет избежать некоторых глюков при переключении картинок в ИЕ.

А вот этот способ в ие6 работает =)

Вот и всё. Еще раз посмотреть пример.

P.S. Из минусов, стоит отметить, что в итоге грузятся все картинки сразу, что не есть хорошо. Но способ интересный, можно взять на заметку.

Метки: css, галерея

Запись опубликована 29.04.2010 в 11:28 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Fatal error: Call to undefined function wp_related_posts() in /home/k/kazanets/htmlcssinfo/public_html/wp-content/themes/htmlcsstheme/single.php on line 70