галерея картинок

Ingvarion · February 18, 2009

День добрый, хочу вас спросить, возможно ли сделать галерею картинок, желательно простененькую, на css.

интересует что-то вроде этого:

http://www.cssplay.co.uk/menu/photo_album.html#nogo

посоветуйте новчику - как сделать, где посмотреть, или где почитать на эту тему.

Павел Билькис · February 18, 2009

Галерея по ссылке - нерабочая.

dber · February 19, 2009

на чистом css это не сделать. еще надо еще скрипты использовать! как вариант можешь с этого же сайта и взять! а вообще я бы советовал искать галереи на Jquery

Ingvarion · February 19, 2009

-=PSU=-, у меня ссылка работает.

dber, к сожалению, я пока не знаю ни жаваскриптов ни Jquery. Посоветуйте пожалуйста откуда можно почерпнуть информацию по jquery.

Victor Ananiev · February 19, 2009

и у меня работает)

там наверно джс все таки) кароче все картинки вначале рузятся, а потом их можна перещелкивать по src.

Ingvarion · February 19, 2009

Victor Ananiev, вы не могли бы конкретизировать свой ответ иллюстрированным примером?

p.s. посмотря код этой странице с галлереей, я так понимаю, там действительно используется жаваскрипт. непойму только - как именно. (может, даже безотносительно к галерее.)

p.p.s корое я просто в коде сейчас разбираюсь, но могу сказать одно - там всё на css безо всяких жаваскриптов. Они там написаны применительно к каким-то баннерам или менюшкам...

Edited February 19, 2009 by Ingvarion

Victor Ananiev · February 19, 2009

а, да..)) там при фокусе на ссылке меняется display у картинки, как то так:

a img
{
 display:none;
}
a:focus img
{
 display:inline(block);
}

Ingvarion · February 19, 2009

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

привожу конкретно смысл:

<style type="text/css">
a, a:visited, a:hover, a:active {
...
}
#album {
...
}
.gallery {
...
}
.gallery li {
...
}
.gallery li a, .gallery li a:visited {
...
}
.gallery li a img.landscape {
...
}
.gallery li a img.portrait {
...
}
.gallery li a:hover {
...
}
.gallery li a:active, .gallery li a:focus {
...
}
.gallery li a:active img, .gallery li a:focus img {
....
}
</style>
</head>
<body >

<div id="album">
<ul class="gallery">
<li><a href="#nogo">01<img class="landscape" src="http://www.cssplay.co.uk/menu/gallery/landscape_1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li>
<li><a href="#nogo">02<img class="landscape" src="http://www.cssplay.co.uk/menu/gallery/landscape_2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li>
<li><a href="#nogo">03<img class="portrait" src="http://www.cssplay.co.uk/menu/gallery/portrait_1.jpg" alt="portrait image 1" title="portrait image 1" /></a></li>
<li><a href="#nogo">04<img class="portrait" src="http://www.cssplay.co.uk/menu/gallery/portrait_2.jpg" alt="portrait image 2" title="portrait image 2" /></a></li>
<li><a href="#nogo">05<img class="landscape" src="http://www.cssplay.co.uk/menu/gallery/landscape_3.jpg" alt="landscape image 3" title="landscape image 3" /></a></li>
<li><a href="#nogo">06<img class="portrait" src="http://www.cssplay.co.uk/menu/gallery/portrait_3.jpg" alt="portrait image 3" title="portrait image 3" /></a></li>
<li><a href="#nogo">07<img class="landscape" src="http://www.cssplay.co.uk/menu/gallery/landscape_4.jpg" alt="landscape image 4" title="landscape image 4" /></a></li>
<li><a href="#nogo">08<img class="landscape" src="http://www.cssplay.co.uk/menu/gallery/landscape_5.jpg" alt="landscape image 5" title="landscape image 5" /></a></li>
<li><a href="#nogo">09<img class="portrait" src="http://www.cssplay.co.uk/menu/gallery/portrait_4.jpg" alt="portrait image 4" title="portrait image 4" /></a></li>
<li><a href="#nogo">10<img class="portrait" src="http://www.cssplay.co.uk/menu/gallery/portrait_5.jpg" alt="portrait image 5" title="portrait image 5" /></a></li>

</ul>
</div>

непонятно только, что в данном случае делает div?..

и - как сделать чтобы при нажатии вне ссылки на картинку она не сбрасывала её?

Edited February 19, 2009 by Ingvarion

solovets-denis · February 19, 2009

Пользуйся. Можесь вставить в хтмл-редактор, уже рабочее

<style type="text/css">
	#fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
	.fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
	.fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
	.fsControl.disabled { color: #666666; }
	#fsScreen { height: 300px ! important; background: no-repeat 50% 50%; }
</style>
<div id="fsClipper">
	<div id="fsScreen"></div>
</div>
<p>
	<span id="fsControl_prev" class="fsControl">←</span>
	<span id="fsControl_next" class="fsControl">→</span>
</p>
<p id="fsLinks">
	<a href="http://www.artlebedev.ru/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg', 200, 200 )">он</a>,
	<a href="http://www.artlebedev.ru/portfolio/illustrations/i/577698ac49499acc.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/577698ac49499acc.jpg', 200, 200 )">они</a>,
	<a href="http://www.artlebedev.ru/portfolio/illustrations/i/69d02a844a673326.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/69d02a844a673326.jpg', 200, 200 )">она</a>,
	<a href="http://www.artlebedev.ru/portfolio/illustrations/i/69fbeb22269a853d.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/69fbeb22269a853d.jpg', 200, 200 )">оно</a>
</p>
<script type="text/javascript">
	function Filmstrip(){
		this.ePicture = document.getElementById('fsScreen');
		this.ePrev = document.getElementById('fsControl_prev');
		this.eNext = document.getElementById('fsControl_next');
		var eLinks = document.getElementById('fsLinks');
		this.aeLink = eLinks.getElementsByTagName('A');
		this.show_picture = function( sBackground, iWidth, iHeight ){
			this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
			if( iWidth )
				this.ePicture.style.width = iWidth;
			if( iHeight )
				this.ePicture.style.height = iHeight;
			this.set_current( sBackground );
		}
		this.set_current = function( sHref ){
			for( var i = 0; i < this.aeLink.length; i++ ){
				if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
					this.aeLink[i].className += " current";
					this.ePrev.className = this.ePrev.className.replace( /\s+disabled/g, "" );
					this.eNext.className = this.eNext.className.replace( /\s+disabled/g, "" );
					if( i == 0 ){
						this.ePrev.className += " disabled";
						this.ePrev.onclick = function(){};
						this.eNext.onclick = this.aeLink[i + 1].onclick;
					}else if( i == this.aeLink.length - 1 ){
						this.eNext.className += " disabled";
						this.eNext.onclick = function(){};
						this.ePrev.onclick = this.aeLink[i - 1].onclick;
					}else{
						this.eNext.onclick = this.aeLink[i + 1].onclick;
						this.ePrev.onclick = this.aeLink[i - 1].onclick;
					}
				}else{
					this.aeLink[i].className = this.aeLink[i].className.replace( /\s*current/g, "" );
				}
			}
		}
	}
	var oFilmstrip = new Filmstrip();
	function Show_picture( sHref, iWidth, iHeight ){
		oFilmstrip.show_picture( sHref, iWidth, iHeight );
		return false;
	}
	oFilmstrip.aeLink[0].onclick();
</script>

Ingvarion · February 19, 2009

solovets-denis большое спасибо, приму к сведению.

тем не менее, меня интересуют решения на html\css ,без применения жаваскриптов и всего прочего.

solovets-denis · February 19, 2009

solovets-denis большое спасибо, приму к сведению.
тем не менее, меня интересуют решения на html\css ,без применения жаваскриптов и всего прочего.

А на каком движке создается сайт?

SelenIT · February 19, 2009

Имхо, без JS нерационально. Если делать по аналогии с примером Стю, это же юзеру придется сразу все немаленькие полноразмерные картинки грузить...

По-моему, удачнее всего задачу решают разнообразные LigthBox-ы (тысячи их). На самой странице - только легкие превьюшки, при включенном JS - плавное переключение картинок в красивой рамке, без JS - просто новые окошки с полноразмерными картинками...

dber · February 19, 2009

вот я посидел 10 минуток)) думал, что нельзя подобное сделать... ошибся

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title>.::Компания Мэйпл::. - 1C:Франчайзинг</title>

	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="content-type" content="text/html" charset="Windows-1251"/>
	<meta name="description" content=""/>
	<meta name="resource-type" content=""/>
	<meta name="keywords" content=""/>
	<meta name="revisit" content=""/>
	<meta name="revisit-after" content=""/>
	<meta name="robots" content="all"/>
	<meta name="author" content="Maple"/>
	<meta name="copyright" content="Copyright (c) 2009 by Maple"/>
	<meta name="distribution" content="global"/>
	<style type="text/css">
	body,html{margin:0px; padding:0px;}
	.border{border:1px solid gray;}
	.frame{height:200px; width:200px; poasition:absolute; left:0px; top:0px;}
	.photos{height:180px;width:200px;}
	.links a{display:inlene-block; width:10px; height:20px;}
	.links a div{position:absolute;left:2px;top:2px;width:200px; height:180px;z-index:1;display:none;}
	.links a:focus div{display:block;}


	._1{background:red;}
	._2{background:green;}
	._3{background:yellow;}
	._4{background:pink;}
	</style>
</head>
<body>
	<div class="frame ">
		<div class="photos border"> 

		</div>
		<div class="links border">
		<a href="#">1<div class="_1"> </div></a>
		<a href="#">2<div class="_2"> </div></a>
		<a href="#">3<div class="_3"> </div></a>
		<a href="#">4<div class="_4"> </div></a>
		</div>

	</div>
</body>
</html>

Victor Ananiev · February 19, 2009

очепятка)) .links a{display:inlene-block; width:10px; height:20px;}

но это по мелочам, а так в a вроде совать div низя))

rus · February 19, 2009

Не знаю подойдет тебе или нет, но попробуй вот это, там все подробненько расписано.

dber · February 20, 2009

-=PSU=-, у меня ссылка работает.
dber, к сожалению, я пока не знаю ни жаваскриптов ни Jquery. Посоветуйте пожалуйста откуда можно почерпнуть информацию по jquery.

http://www.rsdn.ru/article/inet/jQuery.xml

http://www.linkexchanger.su/category/jquery

http://www.w3school.ru/blog/web-developmen...y-examples.html

Ingvarion · February 20, 2009

rus, dber - огромное спасибо. как разберусь с галереей на цсс - посмотрю jquery.

dber · February 20, 2009

очепятка)) .links a{display:inlene-block; width:10px; height:20px;}
но это по мелочам, а так в a вроде совать div низя))

насччет опечатки)))) да... точно.... пропустил.... значит это свойство не нужно, раз без него пашет)

а кто запретил?

Edited February 20, 2009 by dber

Victor Ananiev · February 20, 2009

здравый смысл, и валидатор) но валидатор ладно, а смысл... ))

просто А - строчный элемент, а div - блочный, а по стандартам - блочный в строчный пихать низя)

Sign In

галерея картинок

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information