Мини-курс по jQuery для дизайнеров. Урок 6. Галерея. Иконки файлов

Сегодня у нас заключительный урок из мини-курса по jQuery для дизайнеров. А создавать мы сегодня будем мини галерею. Так же будем стилизовать ссылки на файлы, добавляя определенному типу файла свою иконку. Код как всегда будет достаточно прост. А все примеры по JavaScript можно посмотреть на демо сайте http://www.jsdemos.rusdigi.org.

[adsense]

Галерея с использованием jQuery

Каждый рано или поздно сталкивается с проблемой создания портфолио. Чаще всего портфолио это набор изображений, показывать которые надо на одной странице. Мы будем использовать библиотеку jQuery и будем загружать изображения в формате jpg в элемент target.

Сначала добавим пустой элемент em к h2. Когда будет нажата ссылка в блоке p class=thumbs:

• запомним атрибут ссылки href в переменной largePath
• запомним атрибут title в переменной largeAlt
• заменим scr атрибут у img id="largeImg" значением переменной largePath и атрибут alt значением переменной largeAlt
• установим содержание em (внутри h2) равным значению переменной largeAlt.

А вот собственно и сам код:

$(document).ready(function(){

	$("h2").append('')

	$(".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;
	});

});

Стилизация ссылок на файлы различных типов

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

Первые три строки напрямую связаны с CSS. Они добавляют к элементу a класс, значение которого исходит из атрибута href.
Во второй части кода мы получаем все элементы a, которые не содержат http://www.rusdigi.org и/или не начинаются с "#" в атрибуте href. Далее с помощью функции addClass добавим 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 для дизайнеров подошел к концу. Это были основы работы с библиотекой jQuery. Другие интересные статьи по JavaScript, jQuery, AJAX вы можете прочесть в разделе JavaScript.

Если разработка сайтов является для вас непосильной задачей, то доверьте это дело профессионалам из компании Serenity, которая входит в пятерку лучших веб-студий Петербурга.