Требуются умные люди! Создание фотогалереи на основе CSS

humn · March 1, 2011

Помогите усовершенствовать фотогалерею

http://www.cssplay.co.uk/menu/lightbox.html#flower8

http://www.cssplay.co.uk/menu/zips/gallery.zip

Что я хочу изменить :

1. Убрать реакцию галереи на наведение курсора

2. Сделать так что бы вкладки в галереи работали только по кликанию мышью, а не при наведении.

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

4. И последнее - сделать так что бы при кликании на вкладку - на ней сохранялся активный цвет, а цвет с предыдущей активной вкладки исчезал.

5. При открытие фотографии она открывается по верх галлереи - если такое возможно сделать красиво средствами css

Может кто помочь ?

Я не хочу добавлять яву на сайт и прочее. Чем проще сайт - тем лучше.

Из всех галерей только такая соответствует удобству.

Думаю она многим бы была полезная, так как аналогов я ненашел.

Спасибо!!

Edited March 1, 2011 by humn

Serlutin · March 1, 2011

Вы в css разбираетесь? Нет, вы в css не разбираетесь.

Это не язык программирования, это всего лишь стили. Понимаете? Стили.

Неужели вы думаете, что никто бы не сделал галерею на css, если это было бы возможно?

1. Убрать реакцию галереи на наведение курсора

Это делается легко. Убирается :hover

2. Сделать так что бы вкладки в галереи работали только по кликанию мышью, а не при наведении.

Интересно, как вы себе это представляете? Сейчас это выполнено с помощью свойства :hover. История его такова что он предназначался для выделения ссылок. Только потом его стали использовать для других элементов, с чем IE6 категорически не согласен.

3. Сделать так что бы галерея не возвращалась на исходную позицию, когда курсор уводишь с галереи. Если такое возможно ?
5. При открытие фотографии она открывается по верх галлереи - если такое возможно сделать красиво средствами css

Конечно не возможно.

Я не понимаю, почему вы не хотите использовать js. Хотя нет, понимаю. Вы просто не разбираетесь в js. Но ведь это не беда. Есть куча примером, где нужно только скопировать и вставить.

Запомните:

html - для разметки

css - для стилизации

js - для действия

php - для взаимодействия

psywalker · March 1, 2011

Тему стоит перенести в соответствующий раздел я думаю. Возможно там люди смогут сделать эту работу...но уже за деньги конечно же.

humn · March 1, 2011

Да в принципе могу просто такой галереи на яве я не нашел , вы видели что нибудь подобное ?

а сам я написать такую галерею не смогу - навыков программирования у меня 0

Блин зашибись - пришел человек помощи просить - сразу тему кидают где все бабло будут просить.

Респект.

klierik · March 1, 2011

Блин зашибись - пришел человек помощи просить - сразу тему кидают где все бабло будут просить.
Респект.

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

Serlutin · March 1, 2011

Вам нужно всего два jquery плагина.

Первый - это для вкладок

Второй - для lightbox (отображение изображения на той же страницы по центру).

Если вам действительно это нужно, то вы сами разберётесь. Бесплатно же вряд ли кто возьмётся делать.

psywalker · March 1, 2011

Да в принципе могу просто такой галереи на яве я не нашел , вы видели что нибудь подобное ?
а сам я написать такую галерею не смогу - навыков программирования у меня 0
Блин зашибись - пришел человек помощи просить - сразу тему кидают где все бабло будут просить.
Респект.

А ты бы ещё Т3 всем разослал бы в личку, сразу все бы откликнулись

sigma77 · March 2, 2011

Да не нужны тут никакие лайтбоксы и пр. плагины от jquery. Тут всё достаточно элементерно.

Сегодня-завтра могу накидать примерчик, но прикручивать его под свои нужды будете уже сами.

Ну а если нужно готовое решение, то да. В сети полно галерей.

humn · March 2, 2011

Я прислушался и решил установить вот такие вкладки :

http://prootime.ru/vkladoki-css

и добавил туда галерею на яве со стилями.

Код у галереи вот такой :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery</title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if lte IE 7]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
<h1>Hoverbox Image Gallery</h1>
<ul class="hoverbox">
<li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li>
<li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li>
<li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li>
<li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li>
<li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li>

</ul>
</body>
</html>

У галереи есть стиль hoverbox.css

в котором

*
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* =Basic HTML, Non-essential
———————————————————————-*/

a
{
	text-decoration: none;
}

body
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 50px;
	position: relative;
	width: 620px;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p
{
	clear: both;
	font: 10px Verdana, sans-serif;
	padding: 10px 0;
	text-align: center;
}

p a
{
	background: inherit;
	color: #777;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* =Hoverbox Code
———————————————————————-*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

————-

Но и у сайта есть стиль :

/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */



/* CSS Document */


/* General */

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
font-size: 62.5%;
}

body {
	height: 100%;
	text-align: left;
	font: 1.2em Verdana, Arial, Helvetica, sans-serif;
	background: #242424 url('../img/bg.gif') repeat-x 0 0;
	min-width: 980px;
}

a:link, a:visited {
color: #AFBC25;
text-decoration: underline;
font-weight: bold;
}

a:hover {
text-decoration: none;
}

.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
content: ' ';
}

.noscreen {
display: none;
}

.hidden { /* Skip menu */
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}


/* Paragraphs, headings, ... */

p {
line-height: 170%;
margin-bottom: 10px;
color: #FDFDFD;
}

p.more {
float: right;
display: inline;
margin-right: 7px;
}

p.more a, p.more a:visited {
font-weight: normal;
}

h1 {
font-size: 2.2em;
font-weight: normal;
color: #FFFFFF;
text-align: left;
padding: 43px 0 4px 0;
letter-spacing: 1px;
background: url('../img/h1-bg.gif') repeat-x 0 100%;
width: 50%;
}

h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}

h2 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FFFFFF;
text-align: left;
margin: 4px 0 0 0;
letter-spacing: 1px;
}

h3 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FDFDFD;
letter-spacing: 1px;
background: url('../img/h3-bg.gif') no-repeat 0 54%;
padding-left: 18px;
margin-bottom: 7px;
}

address {
}


/* Images */

img.image-main {
border: 1px solid #AFBC25;
margin: 0.2em 0 0.6em 0;
 float:left; /* Выравнивание по левому краю */
 margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}


/* Header */

#header {
width: 980px;
height: 178px;
position: relative;
margin: 0 auto;
text-align: left;
}

ul#navigation {
float: right;
margin: 8px 1px 0 0;
display: inline;
color: #FFFFFF;
}

ul#navigation li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
font-size: 0.9em;
}

ul#navigation li a, ul#navigation li a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: normal;
}

ul#navigation li a:hover {
text-decoration: underline;
}

li#house {
background: url('../img/house.gif') no-repeat 0 1px;
padding-left: 24px;
}

li#house a {
margin-right: 16px;
}

li#sitemap {
background: url('../img/sitemap.gif') no-repeat 0 2px;
padding-left: 24px;
margin-left: 16px;
}

li#sitemap a {
margin-right: 16px;
}

li#envelope {
background: url('../img/envelope.gif') no-repeat 0 2px;
padding-left: 23px;
margin-left: 16px;
}


/* Search form */

form.searching {
width: 204px;
position: absolute;
top: 43px;
right: 1px;
}

form.searching fieldset {
border: 0;
}

#picture-input {
position: absolute; 
top: 0;
left: 0;
overflow: hidden;
width: 171px;
height: 26px;
background: #FAFFE5 url('../img/input-bg.gif') no-repeat 0 0;
border: 0;
}

#picture-input input {
position: relative;
top: 5px;
left: 10px;
width: 160px;
border: 0;
letter-spacing: 1px;
background-color: #FAFFE5;
}

form.searching input.hledat {
letter-spacing: 1px;
padding-left: 0;
font-weight: bold;
color: #FFFFFF;
position: absolute;
top: 0;
right: 0;
}

form.searching label {
display: none;
}


/* Menu */

#menu {
position: absolute;
top: 145px;
right: 1px;
}

#menu li {
float: left;
display: inline;
list-style-type: none;
}

#menu li a {
float: left;
display: inline;
list-style-type: none;
text-align: center;
color: #FFFFFF;
font-size: 1.1em;
text-decoration: underline;
padding: 0 1.1em;
height: 32px;
line-height: 32px;
margin-left: 3px;
background: #242424 url('../img/li-bg.gif') repeat-x 0 0;
border: 1px solid black;
border-bottom: none;
}

#menu li a:hover {
color: #FFFFFF;
text-decoration: none;
background: #242424;
border: 1px solid #222222;
border-bottom: none;
}

#menu li a.active {
background: #232323 url('../img/li-bg-hover.gif') repeat-x 0 0;
color: #FFFFFF;
text-decoration: none;
border: 1px solid #2D4A00;
border-bottom: none;
}


/* 3 columns layout */

#content {
font-size: 0.9em;
width: 980px;
margin: 23px auto 0 auto;
text-align: left;
background: #242424 url('../img/content-bg.gif') repeat-y 0 0;
}

#column-1 {
float: right;
width: 650px;
}

#column-1 #column-11 {
float: left;
width: 650px;
}

#column-1 #column-12 {
float: right;
width: 296px;
}

#column-2 {
float: left;
width: 300px;
}


/* Footer */

#footer {
width: 970px;
height: 80px;
margin: 60px auto 0 auto;
border-top: 1px solid #404040;
}

p.footer-left {
float: left;
width: 465px;
color: #FFFFFF;
text-align: left;
margin: 9px 0 0 15px;
display: inline;
}

p.footer-left a, p.footer-left a:visited {
color: #FFFFFF;
font-weight: normal;
}

p.footer-right {
float: right;
width: 465px;
color: #999999;
text-align: right;
margin: 9px 15px 0 0;
display: inline;
}

p.footer-right a, p.footer-right a:visited {
color: #999999;
font-weight: normal;
}

p.footer-right a:hover {
color: #FFFFFF;
font-weight: normal;
}

——-

В итоге эти 2 стиля конфликтуют и получается вот что :

Кто может помоч объединить стили, что бы фотографии правильно распологались во вкладках :

Вот тут можно скачать галерею http://sonspring.com/journal/hoverbox-image-gallery

Проэкт не коммерчиский! Админы выкинули из темы помощь новичкам - куда не следовало. Я не виноват в отсебяченности администрации. Прошу понять правильно. Если нет желания помочь - я не настаиваю.

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

Edited March 2, 2011 by humn

blaga · March 2, 2011

для вставки кода в форум существует специальная кнопка "код"

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

humn · March 2, 2011

Я не обвиняю - я не согласен с тем что тему надо было перемещать. Мнение участников нельзя стаивть выше своего мнения. Надо считаться с людьми. Я не глупый человек и знаю где должна быть моя тема что бы она эффективно работала.

Тут ее эффективность снижается до минимума.

Сижу пытаюсь совместить стили. Но пока без успешно. Конфликты то там то тут.

Решил установить перед галереей в коде стиль, написав :

И удалил в стиле hoverbox.css праметр body , в итоге что-то близкое стало, но фотографии при наведении ложаться друг под друга. И съехала шапка сайта :

blaga · March 2, 2011

вы пытаетесь делать наугад а этим сложно что то добиться.

решите для себя либо

- вам интересна тема создания сайтов и верстки и вы берете книжку и читаете что там и как

- вам не интересна тема создания сайтов и верстки, вы экономите на чем то что бы оплатить работу профессионалу

я других выходов не вижу.

humn · March 2, 2011

И так у меня продвижение

я выравнил шампку , добавив после галереи :

Незнаю как это все влияет но работает )

не берд какой то вышел,

в браузере IE все развалилось нафиг

Edited March 2, 2011 by humn

Clubberry · March 3, 2011

И так у меня продвижение
я выравнил шампку , добавив после галереи :
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" />
Незнаю как это все влияет но работает )
не берд какой то вышел,
в браузере IE все развалилось нафиг

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

Иго юха · March 3, 2011

Попробую помочь, но не за просто так, с вас отзыв с фото, и работу ко мне в портфель. идет?

контакты

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

да, быстрей бы он исчез на совсем, портит жизнь верстальщикам

Edited March 3, 2011 by Иго юха

Sign In

Требуются умные люди! Создание фотогалереи на основе CSS

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

Обсуждения

Important Information