14:53 Привет брату программеру)

Добро пожаловать, Ben_Der. Какое направление Web?
картинка-приветсвие) Мы оба любим Асприна)

@темы: Наблюдения, ПЧ, Я

URL

Комментировать

21:11 Лис, ты еще обитаешь тут?

@темы: Лис_лис, ПЧ, Флуд

URL

Комментарии (7)

08:17 соседи радуют с утра...

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

к соседу диджею мы уже привыкли... он только в 9-10 просыпается. Так что это что-то новенькое

@музыка: Чайф - время не ждет

@темы: Бред, Лытдыбр, Я

URL

Комментировать

10:18 Доброго утра)

@темы: Не моё, Лис_лис, Фото

URL

Комментировать

15:08 Мечтайте!

@темы: Не моё, Рисунки

URL

Комментировать

14:51 Мечта остается мечтою...

Я так и не увидела море... Зато побродила по городу, пила глинтвейн и совершенно не боялась высоты

Как доберутся руки обязательно выложу пару фото)

@темы: Лытдыбр, Путешествия, Я

URL

Комментировать

23:12

Сегодня еду в Ригу. Первый раз получила визу и еду за пределы родины... Жуть как интересно, и страшно... А еще, еще у меня сбудется мечта!!! Я, наконец-то, увижу море! Пусть зимнее, пусть! Зато без копошащихся в нем людей... Море... Как же я о нем мечтаю! :heart:

@темы: Лытдыбр, Любовь, Я

URL

Комментарии (2)

18:59 Добро пожаловать.

Есть такая традиция, приветствовать тех, кто добавляет тебя в избранное... Я это делаю добавляя отдельный пост, чаще всего с картинкой, которая объединяет наши интересы.

Добро пожаловать, vit@lik. Рада тебя видеть.

Пишу я немного в последнее время...

Осень в душе

желтыми листьями

Плачет во сне,

старыми песнями...

Песни без слов,

музыка ритмами,

Тяжесть веков

тянет на дно...

Слезы в глазах -

дождик не прошенный,

Маски в руках,

эмоции сброшены...

Отброшены страх,

жалость, сомнения...

Остался лишь шаг

шаг из забвения.

@темы: Грустное, ПЧ, Стихи, Я

URL

Комментарии (4)

18:46 Приветствие

Добро пожаловать, Kudoki_Kitsune.
картинка

@темы: ПЧ

URL

Комментарии (4)

17:42 Добро пожаловать!

Привет Half-BloodGamer.
картинка)

URL

Комментировать

16:03

Привет, Fa.fa! Добро пожаловать)

"- Когда знаешь, о чем поговорить с человеком, это — признак взаимной симпатии. Когда вам есть о чем вместе помолчать, это — начало настоящей дружбы."(с)

@темы: ПЧ

URL

Комментировать

15:42 Добро пожаловать)

4ert, добро пожаловать. Ни дневника, ни профиля... Интересно даже, кто ты)

@темы: ПЧ

URL

Комментарии (8)

13:46 Мне кажется, или поехала верстка? =)

Я знаю, я зануда)
:ps:

С наступающим вас, хорошие мои!!! :yolka11:

@темы: Лытдыбр, Точка зрения, Я

URL

Комментарии (4)

16:07 Простая галерея на jQuery

В связи с грядущим Новым годом оказалась я без срочной работы, и с заданием - выучить jQuery. Оно, конечно, полезно для верстальщика. Но вот с какой стороны подступиться?
После недели теории, я решила все же опробовать хоть что-то на практике. Вспомнилось сколько раз я мучилась, подгоняя под требования ТЗ всевозможные галереи, которых сейчас в интернете великое множество. Отсюда и родилась идея реализации галереи удобной для верстальщика, а главное простой!

Поэтому хочу показать свою, надеюсь простую и понятную.
читать дальше
Код html минимален и прост, как 5 копеек:

<!DOCTYPE HTML>
<html>
<head>
<sсript src="http://code.jquery.com/jquery-latest.js"></sсriрt>
<sсript src="js/gallery.js"></sсriрt>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="gallerey">
<li><img src="image/0_4e695_7842031a_XL.jpg" /></li>
<li><img src="image/110.jpg" /></li>
<li><img src="image/926600_12.jpg" /></li>
<li><img src="image/202851549.jpg" /></li>
<li><img src="image/560506482.jpg" /></li>
<li><img src="image/desktopwallpapers.org.ua-4121.jpg" /></li>
<li><img src="image/x_51c00eff.jpg" /></li>
<li><img src="image/x_a023852b.jpg" /></li>
</ul>
</body>
</html>

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

К ней небольшое оформление (css3 использовала просто для красоты, необходимости в нем нет):

body{
	background:#DDDDDD;}

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */

#gallerey_wrapper{
	width: 600px;
	min-width: 320px;
	padding: 20px;
	height: 350px;
	padding: 25;
	position: relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}

/* Это верхняя левая ленточка */

#gallerey_wrapper:before{
	content: '';
	position:absolute;
	top: -5px;
	left: -5px;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		-o-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
}

/* Это правая нижняя ленточка */
#gallerey_wrapper:after{
	content: '';
	position:absolute;
	right:-5px;
	bottom:-5px;
	width: 130px;
	height: 30px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-o-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg)
}


#prev, 
#next{
	width: 35px;
	height:35px;
	top: 50%;
	margin-top: -17px;
	text-align:center;
	cursor: pointer;
	opacity:0.5;
	position:absolute;z-index:10;}

#prev{
	background:url(../image/prev.png) center center no-repeat;
	left:15px;}

#next{
	background:url(../image/next.png) center center no-repeat;
	right:15px;}

#prev:hover, 
#next:hover{
	opacity:1;
}

#gallerey{
visible: hidden;
}

#image{
	z-index:5;
	height:auto
}
#image>img{
	max-width:100%;
	display:block;
	margin:0 auto;
	max-height:320px;
}

#navigation{
	clear: both;
    height: 24px;
	text-align:center;
	position:absolute;
	left: 50%;
	bottom:10px;
	z-index:10;}	

#navigation span{
	width: 24px;
	height: 24px;
	float: left;
	margin: 0;
	cursore: pointer;
	display: inline-block;
	background: url(../image/noselect_input.png);
	cursor: pointer;
}

#navigation span.active,
#navigation span:hover{
	background:url(../image/select_input.png);
	}

И собственно сама галерея. За основу создания взят массив и работа с ним:

// переменные
var mass = [];
var active = 0;

//вызов галереи
$(function(){
	createGallery("#gallerey";);
});

function showMass(active){
	$("#navigation span";).removeClass("active";);
	$("#image";).html('<img src="'+mass[active]+'" />';);
	$("#navigation span";).eq(active).addClass("active";);
}

function createGallery(id_gall){
	$(id_gall).wrap('<div id="gallerey_wrapper"></div>';).after('<div id="next"></div><div id="navigation"></div>';).before('<div id="image"></div><div id="prev"></div>';).hide();
	var number_elem = $(id_gall +" li";).size();
	for (i=0; i < number_elem; i++){
		mass[i] = $(id_gall +" li";).eq(i).children("img";).attr("src";);
		$("#navigation";).append('<span data-index-element="'+i+'"></span>';);
	}
	
	$("#navigation";).width($("#navigation span";).width()*number_elem).css("margin-left", -($("#navigation span";).width()*number_elem)/2);
	$("#navigation span";).eq(active).addClass("active";);
	$("#image";).html('<img src="'+mass[active]+'" />';);
}	

$("#prev";).live("click", function(){
	var n = $(this).next().find("li";).size()-1;
	if (active > 0){
		--active}
	else {
		active =  n}
	showMass(active);
	});
	
$("#next";).live("click", function(){
	var n = $(this).prev().find("li";).size()-1;
	if (active < n){
		++active}
	else{
		active = 0;}
	showMass(active);
	});

$("#navigation span";).live("click", function(){
	active = $(this).attr("data-index-element";);
	showMass(active);
	});

Все основные настройки сосредоточены в css (что не может не радовать верстальщика). И навесить поверх можно все, что угодно. Хоть иконки картинок сделать, вместо булетов. Хоть модальное окно, в которое будет выводится изображение. Хоть описания изображений. Для ИЕ придется подгонять стили (впрочем они тут больше для примера), но галерея прекрасно сохраняет функционал и в ИЕ6

@темы: HTML5, Рабочие заметки, JQuery, CSS3, Я

URL

Комментировать

08:29

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

Поеду-ка я на работу)

@темы: Лытдыбр, Я

URL

Комментарии (2)

09:04 Скоро, да...

@темы: Бред, Лытдыбр, Я

URL

Комментировать

00:10

Какая штука!
Потыкайте, а потом пробел.

URL записи

@темы: Игры, Интересности, Интернет

URL

Комментировать

09:44 Гороскоп Майя)

Белый Ветер

Твой Гороскоп Майя

@темы: Интересности, Интернет

URL

Комментировать

00:26 Прикольная рисовалка)

new.weavesilk.com/?gdir

@темы: Интересности, Интернет

URL

Комментировать

16:09 Пробую новый рецепт)

На кусочки мяса (порезанные по пол сантиметра, а-ля отбивные) посыпала приправ (французкие травы) и положила кусочек лимона... Это счастье покрыла пищевой пленкой и отбила, пока лимон не превратился в кашу и не смешался с мясом... Собственно н раз, пока мясо не закончится... Положила все на протвинь, посолила, положила сверху лук (наверное зря

), и сверху тертый сыр... и на небольшой огонь в духовку) Как лук будет готов - проверю, вкусно ли)

UPD: Лук совсем не зря... а вот лимона нужно меньше класть) Ну и пересолила слегка)

@темы: Рабочие заметки, Лытдыбр, Я

URL

Комментировать