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

«
»

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!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. Даю код, и начнем разбирать его:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!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. Из минусов, стоит отметить, что в итоге грузятся все картинки сразу, что не есть хорошо. Но способ интересный, можно взять на заметку.

Метки: ,

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

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

  • апарне:
    06.08.2010 в 14:05

    заебок! клевая тема

  • Евгений:
    19.08.2010 в 22:52

    Выглядит и работает очень здорово!
    Очень буду признателен, если подскажите: каким образом сделать дополнительно миниатюры фотографий в горизонтальную строку, оставив при этом левый ряд, либо просто как сделать пару рядов в горизонтальную строку?

  • Костя:
    19.08.2010 в 23:36

    <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>
    <li><a href=’#pic5′><img src=’images/pic5s.jpg’ alt=» /></a></li>
    <li><a href=’#pic6′><img src=’images/pic6s.jpg’ alt=» /></a></li>
    <li><a href=’#pic7′><img src=’images/pic7s.jpg’ alt=» /></a></li>
    <li><a href=’#pic8′><img src=’images/pic8s.jpg’ alt=» /></a></li>
    </ul>
    Cделать внешний ul шириной равной 4 м превьюшкам и каждой li задать float:left. И тогда получится 2 горизонтальных ряда по 4 фотки. Это имели ввиду?

  • asdanta:
    16.09.2010 в 15:13

    плохо что в 1м варианте картинка вьігружаеться и остаеться серьій фон, а так идея супер!

  • Ксения:
    22.11.2010 в 23:58

    2Костя

    почему-то не получается 2 ряда…Может, я настолько дуб?)

  • Костя:
    23.11.2010 в 00:58

    Ксения, давайте ссылку, где у вас не получается.

  • Ксения:
    23.11.2010 в 01:05

    Посмотрите часть кода…..может тут чего не так написала?

    Виды Ла-Гомеры








  • Ксения:
    23.11.2010 в 01:06

    Виды Ла-Гомеры








  • Ксения:
    23.11.2010 в 01:08

    не скопировать сюда код….грустно

  • Костя:
    23.11.2010 в 01:13

    Попробуйте тег < code > … — пробелы убрать.
    тест:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  • Костя:
    23.11.2010 в 01:13

    но что-то криво все-равно)

  • Ксения:
    23.11.2010 в 01:21

    а можно как-то сделать, чтоб маленькие картинки были не в 2 ряда? Т.е. чтоб справа и слева были колонки по 4 фотки)

  • Костя:
    23.11.2010 в 01:22

    Можно конечно, для этого учимся верстать колонки)

  • Ксения:
    23.11.2010 в 01:27

    ааааа, хэлп глупому гуманитарию, которого заставили делать сайт:))))

  • Михаил:
    07.01.2011 в 22:27

    если кому надо могу предложить свой вариант добавления второго столбца.
    #gallery2{
    width:793px;
    height:400px;
    overflow:hidden;
    position:relative;
    z-index:1;
    margin:0 auto 10px auto;
    }
    здесь увеличиваем на 130 px для того, чтобы поместился второй столбец.
    Затем копируем и вставляем еще раз этот блок:
    Галерея №2. Переключение картинок на click.







    так я получил два столбца.

  • Михаил:
    07.01.2011 в 22:30




    этот блок вставляем второй раз сразу после

  • Михаил:
    07.01.2011 в 22:32




  • Михаил:
    07.01.2011 в 22:34




  • Валерий:
    08.01.2011 в 09:04

    Здравствуйте!
    Установил фотогалерею по вашему рецепту, все хорошо, в Мозилле она работает прекрасно, а в Опере не хочет работать, может подскажете, в чем тут дело?

  • Костя:
    09.01.2011 в 18:29

    Валерий, ссылочку бы.

  • Михаил:
    09.01.2011 в 20:47

    Сделал по статье галерею. Хочу добавить функцию, чтобы при клике на большую фотографию открывалась следующая. Как это реализовать? Спасибо за ответ.
    http://mikhailkolesniko.narod.ru/foto_gallery_1.html

  • Валерий:
    10.01.2011 в 22:43

    Костя, ты просил ссылочку, http://www.hyundai-avtomobil.ru/hyundai-getz-foto.html
    Уточняю, что у меня не работало в Опере 10-й, а в Опере 11-й работает.

  • Lip:
    15.01.2011 в 08:40

    Михаил, так возьми туже фунцию, которая работает в левом стобце в втором примере и поставь по очередно к каждой большой картинке.

  • tygrytsa:
    15.01.2011 в 20:05

    Было бы интересно галерею, которая генерировала бы для каждой отдельной фотографии отдельную динамическую страницу. Например, как на «дофига.нет». Извините. может не там пишу, здесь вроде css обсуждают, но я уже неделю лазаю и ищу нечто подобное и не попадается мне ничего дельного.. помогите ссылочкой, кто-нибудь, пожалуйста

  • Костя:
    17.01.2011 в 00:58

    Тигрица, это уже движок сайта так делает, это ни css, ни js. Если используешь какую-либо бесплатную cms, поищи какие-нибудь плагины фотогалерей.

  • Валерий:
    10.02.2011 в 17:30

    Пользуясь вашим сайтом хочу попросить советов по оформлению моего сайта про автомобили, может кто-нибудь подскажет дельным советом?
    Мой сайт: http://www.vazmaster.ru

  • Илья:
    10.02.2011 в 18:57

    Валерий, убрать всюду понатыканную рекламу и потратиться на дизайнера с верстальщиком.

  • Гость:
    23.02.2011 в 00:31

    Спасибо за статью. я пока просто сделал открытие большой фотки на новой странице, но возьму на заметку. Из минусов наверно гимор делать кучу превьюшек и фото я так понял большие надо одного размера?

  • Гость:
    23.02.2011 в 00:33

    Спасибо за статью, возьму на заметку. большие фотки должны быть одного размера как я понял? ещё минус что надо превьюшку делать для каждой фотки.

  • Гость:
    23.02.2011 в 00:34

    удалите второй комментарий мой, не заметил что первый прошёл ((

  • Nali:
    26.04.2011 в 17:08

    Уруру =)
    второй способ запал в душу, попробуем-с =)
    автору респект,
    надеюсь, смогу повторить фокус без смертельного исхода :-)

  • AlexMen:
    17.05.2011 в 21:22

    Люди подскажите как сделать чтобы картинки при просмотре были большим разрешением чем в данном примере?
    Я понял тут 533 на 400 пикселей сделан просмотр картинок. Хотелось бы в 2 раза больше. Сам пробовал менять но картинка вообще не загружаеться(

    А так галерея классная, пытаюсь сайт сделать и поставить эту галерею!

  • FeNGeR:
    19.05.2011 в 20:18

    Спасибо Большое, Оч помогла галерея..!)

  • Андрей:
    04.08.2011 в 11:17

    Здравствуйте. Очень понравился второй способ, пытаюсь вписать его в свой сайт, но есть один вопрос. Суть в следующем, ряд превьюшек как прокручивать. У меня получается их выставить, но прокрутьть, например на номер 5 и далее не выходит…подскажите, что не так делаю?

  • Александр:
    08.08.2011 в 07:21

    Всем привет не подскажите как в первом случае сделать горизонтальный ряд по 4 фотки а то что та не получается

  • Вячеслав:
    09.09.2011 в 11:19

    Здравствуйте, хочу сделать небольшую фотогалерею для сайта. Понравился Ваш способ, но есть проблема, используются разноформатные фотографии и при показе они деформируются. Как можно сделать, чтоб они уменьшались или увеличивались пропорционально?

  • RuSH:
    15.12.2011 в 17:09

    для того чтобы в 1м варианте со старта не было пустой области просмотра, в див который показывает полноразмерое фото можно фоном вкинуть 1ю картинку.
    <div style="background-image:url(путькартинке); background-repeat:no-repeat; background-position:center"></div>

  • Алик:
    14.01.2012 в 01:17

    Вот код с двумя колонками

    <!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=windows-1251" />
    <title>Фотогалерея г.Оренбурга</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;
    }

    {
    margin:0;
    padding:50px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    background:#000;
    }
    a img{border:none;}

    #gallery2{
    width:793px;
    height:400px;
    overflow:hidden;
    position:relative;
    z-index:1;
    margin:0 auto 10px 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>Фотогалерея г.Оренбурга</h1>
    <div id="gallery2">
    <ul id="tabs2">
    <li><a href="#pic1"><img src="img/pic1s.jpg" alt="" /></a></li>
    <li><a href="#pic2"><img src="img/pic2s.jpg" alt="" /></a></li>
    <li><a href="#pic3"><img src="img/pic3s.jpg" alt="" /></a></li>
    <li><a href="#pic4"><img src="img/pic4s.jpg" alt="" /></a></li>
    </ul>
    <ul id="tabs2">
    <li><a href="#pic5"><img src="img/pic5s.jpg" alt="" /></a></li>
    <li><a href="#pic6"><img src="img/pic6s.jpg" alt="" /></a></li>
    <li><a href="#pic7"><img src="img/pic7s.jpg" alt="" /></a></li>
    <li><a href="#pic8"><img src="img/pic8s.jpg" alt="" /></a></li>
    </ul>
    <div id="fullPicBlock">
    <div><a name="pic1"></a><img src="img/pic1.jpg" alt="" /></div>
    <div><a name="pic2"></a><img src="img/pic2.jpg" alt="" /></div>
    <div><a name="pic3"></a><img src="img/pic3.jpg" alt="" /></div>
    <div><a name="pic4"></a><img src="img/pic4.jpg" alt="" /></div>
    <div><a name="pic5"></a><img src="img/pic5.jpg" alt="" /></div>
    <div><a name="pic6"></a><img src="img/pic6.jpg" alt="" /></div>
    <div><a name="pic7"></a><img src="img/pic7.jpg" alt="" /></div>
    <div><a name="pic8"></a><img src="img/pic8.jpg" alt="" /></div>
    </div>
    </div>
    </body>
    </html>

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос