Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, вобщем супер, но не все скрипты для этого одинаково полезны. Родоначальником был Lightbox, сейчас он называется Lightbox2, далее я расскажу о нем и о его многочисленных клонах, итак:

Lightbox2 на сайт

Если вы используете prototype и scriptaculous, то это лучший вариант. Сам скрипт без фреймворков весит всего 18Кб, а если очистить от комментариев и ужать, то будет в разы меньше.

Дизайн и физика движений довольно приятные, в целом скрипт довольно хорош, классика.

Leightbox на сайт

Так же основывается на prototype, но никаких визуальных эффектов не поддерживает, только затемнение. Размер скрипта 5Кб, ужатый еще меньше.

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

Lightview на сайт

Серьезная вещь, но к сожалению коммерческая. Работает не только с картинками, но и с видео, формами, фреймами, флешем и другим контентом. Отличный дизайн окна, приятная физика движений, возможность показа картинок слайдами. Умеет подстраиваться под размеры окна, есть возможность добавлять свои события (events), и традиционно основан на prototype и scriptaculous.

Очень хороший скрипт, его цена от 3€ до 295€ в зависимости от лицензии.

LightWindow v2.0 на сайт

Мощный скрипт, имеет массу возможностей:

• Поддерживает все типы медийных данных
• Классная анимация
• Галереи (прекрасно реализованы)
• Центровка и сжатие изображений под размеры окна
• и т.д.

Так же основан на prototype и scriptaculous.

Вердикт — безусловный must have. К тому же бесплатен.

Lytebox на сайт

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

Каким-то странным образом версия скрипта достигла v3.22. В общем оценка 3.

Lightbox+ на сайт

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

iBox v2 на сайт

Громкое название и только, дизайн далеко не i-style. Да и все остальное плохо при том очень, при прокрутке окно начинает прыгать, файл скритпа не заслуженно имеет размер 23Кб, возможности слабые.

GreyBox на сайт

Расчитан не только на медийный контент, но и на обычные страницы, открываемые в iframe.
Фотогалерея ужасна, при прокрутке все скачет, у обычных окон нельзя менять размеры.

Оформление в виде окна, но его нельзя перетаскивать и менять размер, глупость несусветная, в топку.

Highslide JS на сайт

Вот на этот скрипт нужно обратить внимание. Фреймворки не использует, абсолютный standalone. Главная фишка — картинка вырастает поверх всего, очень удобно и приятно смотреть. Не очень радует физика, движения прерывистые.

Скрипт хорош в ряде случаев, даже иногда необходим.

jQuery lightBox plugin на сайт

Не является отдельным скриптом, это всего лишь плагин для jQuery. Фактически 99% клон Lightbox2, с разницей в используемых фреймворках.

Достоинство — великолепная физика, спасибо jQuery.

ThickBox 3.1 на сайт

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

Интересного 0.

TinyBox на сайт

Использует prototype. Дизайн слабый, физики нет как и других дополнительных возможностей. Главная особенность — размер 3Кб! На этом все.

WeebBox на сайт

Just for fun был создан очередной клон Lightbox, автор прекрасно знал что изобретает велосипед, но тем не менее что-то получилось, это что-то ни сколько не дотягивает до классического Lightbox и ему равных. Все движения очень медленные и плоские, дизайн так себе, но на оценку 3 дотягивает.

FancyBox на сайт

Жемчужина коллекции, корни скритпа растут из jQuery, поэтому и физика великолепная. Открытие одиночных картинок такое же как в Highslide JS (увеличение картинки поверх всего на месте), работает очень красиво, так же масса дополнительных возможностей.

Это лучшее из всего вышеперечисленного что есть для jQuery.

Shadowbox.js на сайт

Профессиональная вещь, не для новичков. Не использует сторонних фреймворков, имеет собственный API. Возможность установки собственного flash плеера для видео.

Дизайн и физика на уровне, все качественно, но не очень просто. Разделен на несколько «плееров»: img, html, iframe, swf… С возможностью собрать себе необходимый набор плееров в один сжатый файл.

Несомненно полезная вещь для профессионалов.

UPD

jsImageBox на сайт

Спасибо c0rr за его дополнение, очень достойная реализация all-in-one. Скрипт не использует фреймворки, размер сжатого скрипта всего 9 Кб, так же отсутствует подключаемый css, некоторые стили можно задать прямо в скрипте в настройках.

ImageBox на сайт

Моя реализация клона lightbox, с использованием jQuery.

iLOAD на сайт

Совсем свежий скрипт, реализован на фреймворке jQuery, имеет массу настроек. Особенность реализации в скругленных углах, которые «собираются» на лету не используя дополнительных картинок. Удобное управление, возможность включения слайдшоу. Текущая версия 2.1.

 

source http://dustweb.ru/log/2008/07/17/lightbox_n_clones/

Деревянные дома из профилированного бруса в Санкт-Петербурге  

дача дом точка ком

http://dachadom.com/

Чтобы помочь вебмастерам в обеспечении безопасности их веб-сайтов, предлагаем перевод статьи от компании Sophos:

http://help.yandex.ru/webmaster/?id=1071330

steelblue	steelblue	steelblue	4682B4
royalblue	royalblue	royalblue	041690
cornflowerblue	cornflowerblue	cornflowerblue	6495ED
lightsteelblue	lightsteelblue	lightsteelblue	B0C4DE
mediumslateblue	mediumslateblue	mediumslateblue	7B68EE
slateblue	slateblue	slateblue	6A5ACD
darkslateblue	darkslateblue	darkslateblue	483D8B
midnightblue	midnightblue	midnightblue	191970
navy	navy	navy	000080
darkblue	darkblue	darkblue	00008B
mediumblue	mediumblue	mediumblue	0000CD
blue	blue	blue	0000FF
dodgerblue	dodgerblue	dodgerblue	1E90FF
deepskyblue	deepskyblue	deepskyblue	00BFFF
lightskyblue	lightskyblue	lightskyblue	87CEFA
skyblue	skyblue	skyblue	87CEEB
lightblue	lightblue	lightblue	ADD8E6
powderblue	powderblue	powderblue	B0E0E6
azure	azure	azure	F0FFFF
lightcyan	lightcyan	lightcyan	E0FFFF
paleturquoise	paleturquoise	paleturquoise	AFEEEE
mediumturquoise	mediumturquoise	mediumturquoise	48D1CC
lightseagreen	lightseagreen	lightseagreen	20B2AA
darkcyan	darkcyan	darkcyan	008B8B
teal	teal	teal	008080
cadetblue	cadetblue	cadetblue	5F9EA0
darkturquoise	darkturquoise	darkturquoise	00CED1
aqua	aqua	aqua	00FFFF
cyan	cyan	cyan	00FFFF
turquoise	turquoise	turquoise	40E0D0
aquamarine	aquamarine	aquamarine	7FFFD4
mediumaquamarine	mediumaquamarine	mediumaquamarine	66CDAA
darkseagreen	darkseagreen	darkseagreen	8FBC8F
mediumseagreen	mediumseagreen	mediumseagreen	3CB371
seagreen	seagreen	seagreen	2E8B57
darkgreen	darkgreen	darkgreen	006400
green	green	green	008000
forestgreen	forestgreen	forestgreen	228B22
limegreen	limegreen	limegreen	32CD32
lime	lime	lime	00FF00
chartreuse	chartreuse	chartreuse	7FFF00
lawngreen	lawngreen	lawngreen	7CFC00
greenyellow	greenyellow	greenyellow	ADFF2F
yellowgreen	yellowgreen	yellowgreen	9ACD32
palegreen	palegreen	palegreen	98FB98
lightgreen	lightgreen	lightgreen	90EE90
springgreen	springgreen	springgreen	00FF7F
mediumspringgreen	mediumspringgreen	mediumspringgreen	00FA9A
darkolivegreen	darkolivegreen	darkolivegreen	556B2F
olivedrab	olivedrab	olivedrab	6B8E23
olive	olive	olive	808000
darkkhaki	darkkhaki	darkkhaki	BDB76B
darkgoldenrod	darkgoldenrod	darkgoldenrod	B8860B
goldenrod	goldenrod	goldenrod	DAA520
gold	gold	gold	FFD700
yellow	yellow	yellow	FFFF00
khaki	khaki	khaki	F0E68C
palegoldenrod	palegoldenrod	palegoldenrod	EEE8AA
blanchedalmond	blanchedalmond	blanchedalmond	FFEBCD
moccasin	moccasin	moccasin	FFE4B5
wheat	wheat	wheat	F5DEB3
navajowhite	navajowhite	navajowhite	FFDEAD
burlywood	burlywood	burlywood	DEB887
tan	tan	tan	D2B48C
rosybrown	rosybrown	rosybrown	BC8F8F
sienna	sienna	sienna	A0522D
saddlebrown	saddlebrown	saddlebrown	8B4513
chocolate	chocolate	chocolate	D2691E
peru	peru	peru	CD853F
sandybrown	sandybrown	sandybrown	F4A460
darkred	darkred	darkred	8B0000
maroon	maroon	maroon	800000
brown	brown	brown	A52A2A
firebrick	firebrick	firebrick	B22222
indianred	indianred	indianred	CD5C5C
lightcoral	lightcoral	lightcoral	F08080
salmon	salmon	salmon	FA8072
darksalmon	darksalmon	darksalmon	E9967A
lightsalmon	lightsalmon	lightsalmon	FFA07A
coral	coral	coral	FF7F50
tomato	tomato	tomato	FF6347
darkorange	darkorange	darkorange	FF8C00
orange	orange	orange	FFA500
orangered	orangered	orangered	FF4500
crimson	crimson	crimson	DC143C
red	red	red	FF0000
deeppink	deeppink	deeppink	FF1493
fuchsia	fuchsia	fuchsia	FF00FF
magenta	magenta	magenta	FF00FF
hotpink	hotpink	hotpink	FF69B4
lightpink	lightpink	lightpink	FFB6C1
pink	pink	pink	FFC0CB
palevioletred	palevioletred	palevioletred	DB7093
mediumvioletred	mediumvioletred	mediumvioletred	C71585
purple	purple	purple	800080
darkmagenta	darkmagenta	darkmagenta	8B008B
mediumpurple	mediumpurple	mediumpurple	9370DB
blueviolet	blueviolet	blueviolet	8A2BE2
indigo	indigo	indigo	4B0082
darkviolet	darkviolet	darkviolet	9400D3
darkorchid	darkorchid	darkorchid	9932CC
mediumorchid	mediumorchid	mediumorchid	BA55D3
orchid	orchid	orchid	DA70D6
violet	violet	violet	EE82EE
plum	plum	plum	DDA0DD
thistle	thistle	thistle	D8BFD8
lavender	lavender	lavender	E6E6FA
ghostwhite	ghostwhite	ghostwhite	F8F8FF
aliceblue	aliceblue	aliceblue	F0F8FF
mintcream	mintcream	mintcream	F5FFFA
honeydew	honeydew	honeydew	F0FFF0
lightgoldenrodyellow	lightgoldenrodyellow	lightgoldenrodyellow	FAFAD2
lemonchiffon	lemonchiffon	lemonchiffon	FFFACD
cornsilk	cornsilk	cornsilk	FFF8DC
lightyellow	lightyellow	lightyellow	FFFFE0
ivory	ivory	ivory	FFFFF0
floralwhite	floralwhite	floralwhite	FFFAF0
linen	linen	linen	FAF0E6
oldlace	oldlace	oldlace	FDF5E6
antiquewhite	antiquewhite	antiquewhite	FAEBD7
bisque	bisque	bisque	FFE4C4
peachpuff	peachpuff	peachpuff	FFDAB9
papayawhip	papayawhip	papayawhip	FFEFD5
beige	beige	beige	F5F5DC
seashell	seashell	seashell	FFF5EE
lavenderblush	lavenderblush	lavenderblush	FFF0F5
mistyrose	mistyrose	mistyrose	FFE4E1
snow	snow	snow	FFFAFA
white	white	white	FFFFFF
whitesmoke	whitesmoke	whitesmoke	F5F5F5
gainsboro	gainsboro	gainsboro	DCDCDC
lightgrey	lightgrey	lightgrey	D3D3D3
silver	silver	silver	C0C0C0
darkgray	darkgray	darkgray	A9A9A9
gray	gray	gray	808080
lightslategray	lightslategray	lightslategray	778899
slategray	slategray	slategray	708090
dimgray	dimgray	dimgray	696969
darkslategray	darkslategray	darkslategray	2F4F4F
black	black	black	000000

jQuery — это замечательный Javascript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Как же все-таки работает jQuery?

 

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

домашней страницы проекта

, затем проинициализировать:

 

<head>                                                               <script type="text/javascript" src="jquery.js"></script></head>

 

А основные моменты Вам поможет понять следующая диаграмма:

 

 

Как получить элемент с помощью jQuery?

 

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивает селектор jQuery:

 

• $("#header") — получение элемента с id=«header»
• $(«h3») — получить все <h3> элементы
• $(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»
• $(«ul li») — получить все <li> элементы из списка <ul>
• $(«ul li:first») — получить только первый элемент <li> из списка <ul>

 

Выдвижная панель

 

Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см.

пример

)

Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с id=«panel» будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).

 

$(document).ready(function(){    $(".btn-slide").click(function(){        $("#panel").slideToggle("slow");        $(this).toggleClass("active");    });});

 

 

 

Магические исчезновения

 

Этот пример покажет как можно красиво и легко

убирать

растворять элементы (см.

пример

):

Когда мы кликаем по картинке <img class=«delete»>, будет найден родительский элемент <div class=«pane»>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:

 

$(document).ready(function(){    $(".pane .delete").click(function(){        $(this).parents(".pane").animate({ opacity: "hide" }, "slow");    });});

 

Связанная анимация

 

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см.

пример

):

Line 0: когда прогрузилась страница (DOM готов к манипуляциям)

 

Line 1: привязываемся к событию click для элемента <a class=«run»>

 

Line 2: манипулируем элементом <div id=«box»> — уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)

 

Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах

 

Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»

 

Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»

 

Line 6: затем top=0, скорость — «fast»

 

Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)

 

Line 8: затем slideDown, скорость — «slow»

 

Line 9: возвращаем false для того чтобы браузер не перешел по ссылке

 

$(document).ready(function(){    $(".run").click(function(){        $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")        .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")        .animate({top: "0"}, "fast")        .slideUp()        .slideDown("slow")        return false;    }); });

 

Гармошка #1

 

Пример реализации «гармошки». (см.

пример

)

Теперь приступим к разбору полетов:

 

Первой строчкой мы добавляем класс «active» первому элементу <h3> внутри <div class=«accordion»> (класс«active» отвечает за позиционирования фонового рисунка — иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=«accordion»>.

 

Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки <h3> и убираем у них класс «active»

 

$(document).ready(function(){    $(".accordion h3:first").addClass("active");    $(".accordion p:not(:first)").hide();    $(".accordion h3").click(function(){        $(this).next("p").slideToggle("slow")        .siblings("p:visible").slideUp("slow");        $(this).toggleClass("active");        $(this).siblings("h3").removeClass("active");     });  });

 

Гармошка #2

 

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см.

пример

)

 

В CSS у нас указано для всех элементов <p> display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(".accordion2 p").eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

 

$(document).ready(function(){    $(".accordion2 h3").eq(2).addClass("active");    $(".accordion2 p").eq(2).show();    $(".accordion2 h3").click(function(){        $(this).next("p").slideToggle("slow")        .siblings("p:visible").slideUp("slow");        $(this).toggleClass("active");        $(this).siblings("h3").removeClass("active");    });});

 

Анимация для события hover #1

 

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь,

Вы знаете что это

?), (см.

пример

):

Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:

 

$(document).ready(function(){    $(".menu a").hover(function() {        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");    }, function() {        $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");    });});

 

Анимация для события hover #2

 

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см.

пример

)

Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута «thetitle» и сохраним его в переменной «hoverText», затем этот текст будет вставлен в тэг <em>:

 

$(document).ready(function(){    $(".menu2 a").append("<em></em>");    $(".menu2 a").hover(function() {        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");        var hoverText = $(this).attr("title");        $(this).find("em").text(hoverText);    }, function() {        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");    });});

 

Кликабельные блоки

 

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см.

пример

):

Создадим список <ul> с классом class=«pane-list» и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента ".pane-list li"; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

 

$(document).ready(function(){    $(".pane-list li").click(function(){        window.location=$(this).find("a").attr("href"); return false;    });});

 

Складывающиеся панельки

 

Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см.

пример

)

 

 

• скрываем все элементы <div class=«message_body»> после первого.
• скрываем все элементы <li> после пятого
• клик по <p class=«message_head»> — вызывает метод slideToggle для следующего элемента <div class=«message_body»>
• клик по <a class=«collpase_all_message»> — вызывает метод slideUp для всех <div class=«message_body»>
• клик по <a class=«show_all_message»> — скрывает элемент, и отображает <a class=«show_recent_only»>, так же вызывается метод slideDown для всех <li> послепятого
• клик по <a class=«show_recent_only»> — скрывает элемент, и отображает <a class=«show_all_message»>, так же вызывается метод slideUp для всех <li> после пятого

 

$(document).ready(function(){    //hide message_body after the first one    $(".message_list .message_body:gt(0)").hide();    //hide message li after the 5th    $(".message_list li:gt(4)").hide();    //toggle message_body    $(".message_head").click(function(){        $(this).next(".message_body").slideToggle(500)        return false;    });    //collapse all messages    $(".collpase_all_message").click(function(){        $(".message_body").slideUp(500)        return false;    });    //show all messages    $(".show_all_message").click(function(){        $(this).hide()        $(".show_recent_only").show()        $(".message_list li:gt(4)").slideDown()        return false;    });    //show recent messages only    $(".show_recent_only").click(function(){        $(this).hide()        $(".show_all_message").show()        $(".message_list li:gt(4)").slideUp()        return false;    });});

 

Имитация Backend'a Wordpress'a

 

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

плагин для jQuery

. (см.

пример

)

• добавим класс «alt» к каждому чётному элементу <div class=«pane»> (данный класс изменяет цвет фона элемента)
• клик по <a class=«btn-delete»> инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=«pane»>
• клик по <a class=«btn-unapprove»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на желтый и обратно) и добавляет класс «spam»
• клик по <a class=«btn-approve»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на зеленый и обратно) и удаляет класс «spam»
• клик по <a class=«btn-spam»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на красный), и изменяет параметр «opacity» на «hide»

 

//don't forget to include the Color Animations plugin$(document).ready(function(){    $(".pane:even").addClass("alt");    $(".pane .btn-delete").click(function(){        alert("This comment will be deleted!");        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")        .animate({ opacity: "hide" }, "slow")        return false;    });    $(".pane .btn-unapprove").click(function(){        $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")        .animate({ backgroundColor: "#ffffff" }, "slow")        .addClass("spam")        return false;    });    $(".pane .btn-approve").click(function(){        $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")        .animate({ backgroundColor: "#ffffff" }, "slow")        .removeClass("spam")        return false;    });    $(".pane .btn-spam").click(function(){        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")        .animate({ opacity: "hide" }, "slow")        return false;    });});

 

Галерея изображений

 

Простейший пример реализации галереи, без перезагрузки страницы. (см.

пример

)

 Для начала добавим тэг <em> в заголовки <h2>

 

 По клику на изображения в <p class=thumbs> выполняем следующие действия:

 

• сохраняем значение атрибута «href» в переменной «largePath»
• сохраняем значение атрибута «title» в переменной «largeAlt»
• заменяем в элементе <img id=«largeImg»> значение атрибута «scr» и «alt» значениями из переменных «largePath» и «largeAlt»
• так же присваиваем элементу «h2 em» значение из «largeAlt»

 

$(document).ready(function(){    $("h2").append('<em></em>')    $(".thumbs a").click(function(){        var largePath = $(this).attr("href");        var largeAlt = $(this).attr("title");        $("#largeImg").attr({ src: largePath, alt: largeAlt });        $("h2 em").html(" (" + largeAlt + ")"); return false;    });  });

 

Стилизируем ссылки

 

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $='.pdf'] {… }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см.

пример

) 

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.

 

Затем выберем все элементы <a> которые не содержат ссылки на "

http://www.webdesignerwall.com

" и не начинающиеся на "#" в «href», затем добавим им класс «external» и устанавливаем target= "_blank".

 

$(document).ready(function(){    $("a[@href$=pdf]").addClass("pdf");    $("a[@href$=zip]").addClass("zip");    $("a[@href$=psd]").addClass("psd");    $("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")  .addClass("external")  .attr({ target: "_blank" });});

 

Так же Вы можете посмотреть

все примеры

или скачать

jQuery tutorial for beginners

.

 

Вольный перевод:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Так же много полезных ссылок по jQuery найдете на следующей странице:

http://blog.termit.name/jquery/

Может кому пригодиться еще библиотека

jQuery-PHP

 

 

источник http://anton.shevchuk.name/javascript/jquery-for-beginners/

 

Что не так с моим блогом?

Stuart Brown, 2 мая 2007

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

Перейти к инструменту

 

В область для ввода Enter hex code #, вводите значение цвета, который Вы хотите использовать в качестве основного и жмите Set. После этого скрипт выдаст Вам все подходящие цвета. Если нажимать по кнопкам Monocromatic, Analogous и т.д., то Вам будут выдаваться цвета в соответствии с тем, что было описано в теории.