iStock Grabber v0.1

Историята е следната. В офиса и в ежедневната ми работа ползвам най-вече iStockphoto като източник на stock фотографии. Честно казано с времето сайтът ми допада все по-малко и по-малко и затова от скоро търся алтернативи, но това е отделен въпрос.

Тъй като особено в работата ми се налага да показвам доста често различни mockups, за мен е важно да не разполагам само с умалена версия на дадено изображение, а с такава, която мога да модифицирам по-лесно и бързо.

Едно време когато ползвах Firefox към него задължително инсталирах stock zoom. Приятен, но и малко бъгав add-on, който позволява да вземете по-голям размер на харесаното от вас изображение, така че да ви свърши работа, а не да мажете хамалската отгоре.

Случи се така, че аз спрях да ползвам Firefox, а отделно и stock zoom спря да функционира малко преди това. Причините май бяха във самите iStock, но кой знае. Все пак алтернатива за Chrome нямаше (или поне аз не знам за съществуваща) и едва наскоро реших да си напиша такава.

Реших да е нещо абсолютно елементарно и по-долу ще видите, че всъщност по-голямата част от кода е стайлинг. И така след 2 часа работа, версия 0.1 на iStock Grabber беше готова. Веднага започна тест и вече спокойно мога да кажа, че всичко е OK и работи така, както искам.

Кодът

// ==UserScript==
// @name       		iStock Grabber
// @namespace  		http://joro.me/
// @version    		0.1
// @description  	Opens a larger copy of the photo/illustration in a new window.
// @match      		http://www.istockphoto.com/stock-p*
// @match      		http://www.istockphoto.com/stock-i*
// @copyright  		2012+, Georgi Kalaydzhiev
// @require    		http://code.jquery.com/jquery-latest.js
// ==/UserScript==

jQuery.noConflict();
jQuery(document).ready( function() {
    var userScriptBarHTML = '<div id="istockgrabber"><p>Zoom, select size and...</p><a href="javascript:();">Grab Image</a></div>';

    var userScriptBarCSS = {
        'opacity' : '0',
        'margin' : '15px 0 0',
        'padding' : '10px 10px 12px',
        'border' : '1px solid #ccc',
        'font' : '700 16px/33px Arial, Tahoma, sans-serif',
        'background' : '#eee',
        'height' : '0',
        'width' : '360px'
    };

    var userScriptBarTextCSS = {
        'float' : 'left',
        'margin' : '0',
        'font' : '700 19px/37px Arial, Tahoma, sans-serif'
    }

    var userScriptBarButtonCSS = {
		'float' : 'right',
        'width' : '125px',
        'height' : '32px',
        'margin' : '0',
		'background' : '#2a98ed',
        'color' : '#fafafa',
        'text-shadow' : '0 1px 0 rgba(0, 0, 0, .3)',
        'font-weight' : 'bold',
        'text-align' : 'center',
        'text-decoration' : 'none',
        'border' : '1px solid #2473b0',
        'border-radius' : '4px',
        'box-shadow' : '0 1px 2px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .25)'
    };

    var userScriptBarButtonHoverCSS = {
		'background' : '#4fabf3'
    };

    jQuery(userScriptBarHTML).appendTo('#file-preview').css(userScriptBarCSS).not(':animated').animate({opacity: '1', height: '32px'}, 300);
    jQuery("#istockgrabber > p").css(userScriptBarTextCSS);
    jQuery("#istockgrabber > a").css(userScriptBarButtonCSS);
    jQuery("#istockgrabber > a").hover( function() {
        jQuery(this).css(userScriptBarButtonHoverCSS);
    }, function() {
        jQuery(this).css(userScriptBarButtonCSS);
    });

    var iStockBaseURL = 'http://www.istockphoto.com';

    jQuery("#istockgrabber > a").on('click', function(){
        if (jQuery('#ZoomDraggableDiv > div[id^="s"]:visible').size() > 0) {
			var generatedURL = jQuery('#ZoomDraggableDiv > div[id^="s"]:visible > div:first-child img').attr('src');
            window.open(iStockBaseURL + generatedURL, '_blank');
        }
        else
            alert('Click on the image and select size!');
    });

});

Инсталация

Направих скриптът съвместим с най-популярните Userscript приложения – Greasemonkey и Tapermonkey. Това означава, че ако ползвате FF, трябва да свалите Greasemonkey, след това да дойдете на страницата на iStock Grabber в Userscripts.org и да цъкнете бутона Install. При Chrome процедурата е същата, но трябва да имате инсталиран Tapermonkey.

Пускам и един по-голям линк, ако случайно не сте видяли този горе – iStock Grabber v0.1.

Употреба

Идеята е проста. Вече инсталиран скриптът се активира само и единствено когато сте в iStockphoto и по-точно когато сте на страница тип: http://www.istockphoto.com/stock-photo-17437975-first-and-goal-american-football.php?st=0d6ba3c или http://www.istockphoto.com/stock-illustration-1949958-flaming-football.php?st=9f32a71, т.е. Photo/Illustration страници, тъй като само те имат опция за zoom.

Както казах, когато сте на една от тези страници, скриптът става активен и под снимката ще видите един голям бутон, гласящ “Grab Image”. Натискайки го преди да изберете големина на снимката ще излезе грешка. От вас се иска да кликнете на изображението, да изберете един от трите размера и след това да натиснете бутона. В нов таб на браузъра ви ще се отвори желаното изображение.

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

Между другото от няколко дни насам stock zoom отново функционира, но честно казано аз смятам да се придържам към моето доста по-елементарно скриптче.

По-лесно и удобно навигиране чрез Animated Scroll и jQuery

Ако не съм ви го казвал досега – обичам простичките неща. Защо? Защото, колкото по-просто е направено дадено нещо, то вероятността да се развали/счупи/спре да работи е по-малка. Другата причина е, че обикновено сложните неща са съставени от прости, т.е. за да схванете логиката трябва да се почне от А и Б. Днешният урок е типичен пример за това как с един наглед простичък метод, може да се постигне доста приятен краен резултат.

Както всички добре знаем, без HTML нищо от това, което четете в момена няма да бъде реалност. Всичко от най-семплия до най-препълнения с модерни технологии сайт е зависимо от HTML. “Бащата” на езика, британският физик Тим Бърнърс-Лий, днес е директор на консорциума W3C. По времето, когато е работил в ЦЕРН той е получил задача да улесни работата на своите колеги, като измисли по-лесен начин за достъп и обработка на информацията от провеждащите се научни изследвания. Един вид трябвало им страхотна документация, за да извличат максимума от работата си. Така се ражда и HTML (HyperText Markup Language), който първоначално имал доста ограничени възможности, но заради лесната употреба и възможността да бъде четен от множество потребители той свършил прекрасна работа.

И след този кратък урок по история предполагам вече сте се досетили, че днес ще си говорим за това как да направим една документация, една книга или защо не един цял сайт – по-удобни. А удобството обикновено в голяма степен се дължи на навигацията.

прочети нататък »

Simple Drop Down Menu w/ CSS & jQuery

Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.

Менюто е тествано и работи на всички по-популярни браузъри – Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко – не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!

Стъпка 1: HTML

Той представлява един съвсем прост и елементарен списък с няколко поднива, които символизират подменютата. За всеки случай съм копирал и целия работен документ за тези, които не знаят къде да го поставят.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/simple-dropdown-menu.js"></script>
<title>Simple Drop Down Menu w/ CSS & jQuery by RIP</title>
</head>
<body>

	<div id="menu">
		<div id="menu_r">
			<div id="menu_l">
				<ul class="main">
					<li><a id="home" href="#">Начало</a></li>
					<li>
						<a href="#">Новини</a>
						<ul class="sub">
							<li><a href="#">Свят</a></li>
							<li>
								<a href="#">България</a>
								<ul class="sub">
									<li><a href="#">София</a></li>
									<li><a href="#">Пловдив</a></li>
									<li><a href="#">Варна</a></li>
									<li>
										<a href="#">Бургас</a>
										<ul class="sub">
											<li><a href="#">Риби</a></li>
											<li><a href="#">Жълъди</a></li>
											<li><a href="#">Кифли</a></li>
											<li><a href="#">Патладжан</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Наука</a>
								<ul class="sub">
									<li><a href="#">Космос</a></li>
									<li><a href="#">Клониране</a></li>
								</ul>
							</li>
							<li><a href="#">Спорт</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Статии</a>
						<ul class="sub">
							<li><a href="#">Кратки</a></li>
							<li><a href="#">Дълги</a></li>
						</ul>
					</li>
					<li><a href="#">Каталог</a></li>
					<li><a href="#">Архив</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Блог</a></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>

На какво трябва да се обърне внимание тук? Като за начало погледнете си пътищата към javascript, image и css файловете. Ако ги местите и се чудите защо не работят, вероятно това е причината.

Стъпка 2: CSS

Тъй като целта ни е да направим едно безкрайно меню, CSS-а е малко по-дълъг от обикновено. Разбира се ако му накичите още някоя глезотийка редовете ще скочат, но това в крайна сметка няма значение… просто не се заблуждавайте, че е нещо много сложно. За урока съм го стилизирал по-семпличко и без много изображения, за да схванете логиката, а всеки, който иска може да си добави картинки и в подменютата. Между другото за по-голяма оптимизация съм направил sprite от картинките на менюто. Sprite с две думи, освен популярната напитка, представлява една огромна картинка (например хвърлете едно око на YouTube-ската тук), която се зарежда веднъж и впоследствие с помощта на CSS и background-position, ние позиционираме необходимата ни част на необходимото място. Прави се предимно с цел оптимизация, но много трябва да се внимава, защото е малко пипкава работа, особено под по-старите браузъри.

body { margin: 0; padding: 0; font: 11px/1.3em Tahoma, Arial, Verdana, sans-serif; background: #FFF; color: #666; }

#menu { background: url(../img/menu.png) repeat-x left -72px; width: 800px; margin: 100px auto; }
#menu_r { background: url(../img/menu.png) no-repeat right -36px; }
#menu_l { background: url(../img/menu.png) no-repeat left 0; height: 36px; }
#menu ul { margin: 0; padding: 0; list-style: none; }

ul.main li {
	position: relative;
	float: left;
	background: url(../img/menu_li.png) no-repeat right top;
	padding: 0 3px 0 0;
}

ul.main li a, ul.main li a:link, ul.main li a:visited {
	float: left;
	padding: 0 25px;
	color: #666;
	font-size: 12px;
	height: 36px;
	line-height: 36px;
	font-weight: 700;
	outline: none;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
}

ul.main li a:hover { color: #00b2fc; background: url(../img/menu.png) repeat-x left -108px; }
ul.main li a span.arrow { color: #999; }
ul.main li a#home:hover { background: url(../img/home_hover.png) no-repeat left top; }

ul.main li ul.sub {
	display: none;
	position: absolute;
	top: 36px;
	left: -2px;
	width: 200px;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}

ul.main li ul.sub li {
	position: relative;
	padding: 0;
	background: none;
}

ul.main li ul.sub li a, ul.main li ul.sub li a:link, ul.main li ul.sub li a:visited  {
	float: none;
	display: block;
	width: 180px;
	border-bottom: 1px solid #d9d9d9;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 11px;
	background: #f8f8f8;
}

ul.main li ul.sub li a:hover {
	color: #666;
	background: #efefef;
}

ul.main li ul.sub li ul.sub {
	position: absolute;
	top: -1px;
	left: 200px;
	border-top: 1px solid #d9d9d9;
}

Тук е трудно, а и безсмислено да се коментира кой ред какво прави, защото нещата са навързани. За това пак – ако има въпроси и предложения, насреща съм.

Стъпка 3: jQuery

Тъй като jQuery е една от най-добрите Javascript библиотеки, аз съм я използвал с актуалната й версия 1.4.2. Приложил съм всички файлове в архива за сваляне, но ако имате желание да го свалите отделно, ето линк за компресираната версия или за отворения файл, по който може да човъркате.

Тук JQ се ползва много малко и буквално, както виждате са 10 реда, но създава приятен ефект.

$(document).ready(function ()
	{
		$('.main li:has(ul) > a').addClass('more');
		$('a.more').append('<span class="arrow">&nbsp;&nbsp;&raquo;</span>');
		$('.main li').hover(function () {
			$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
		}, function () {
			$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
		});
	});

Идеята тук е да търсим всяко LI, което е родителски елемент на A и съдържа в себе си UL. Така ако е изпълнено условието на линка се добавя клас “more”, на който клас на следващия ред добавяме стрелкички до името на бутона. Това го правим с цел да се разбере, че този бутон съдържа в себе си информация и подтиква юзъра да провери каква е тя.

След това създаваме плавния ефект на Slide Up & Down. Търсим всеки първи списък и му пускаме анимация, която го слайдва надолу и му добавя клас “active_list”. След това търсим списък с вече добавения клас “active_list” и поставяме условие, ако мишока не е върху него да се изпълни анимацията за затваряне или иначе казано прибиране нагоре. След това просто изтриваме класа “active_list” и всичко е готово.

Накратко е това. В javascript файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.

Плюсовете на менюто са, че може лесно да се интегрира, а с готовата структура бързо се преправя, така, че да пасне за нуждите на всеки.

Contact
captcha