Смаляване на снимка

Инструментът се използва най-често при обработване на снимки свалени от фотоапарат преди да бъдат качени в уеб сайт. Снимките от фотоапарат имат много голям размер. Например 2272×1704 (това означава 2272 точки ширина и 1704 точки височина) и размер на файла около 1 MB. По-новите апарати с много мегапиксели могат да създават още по-големи снимки. Такива снимки са изключително неподходящи за уеб сайт и трябва да се обработят преди да бъдат качени в уеб галерия.

Ако искаш да поставиш в една уеб страница няколко снимки така, че те да бъдат една под друга, като между тях може да има текст, например при написване на статия, тогава снимките трябва да имат еднаква ширина, за да изглеждат добре в страницата. Използвай инструмента „Промяна на снимка“, за да промениш ширината на няколко снимки например на 700 точки. Височината на снимката също автоматично ще бъде намалена, за да се запази пропорцията на снимката.

Ако снимките трябва да бъдат една до друга на един ред в страницата, например при създаване на иконки на изображенията (thumbnails) за уеб галерия, тогава може да промениш само височината на снимките да кажем на 80 точки. Ширината автоматично ще се смали и дори различните иконки да имат различна ширина, те ще стоят добре на един ред.

Може да изглежда сложно, но всъщност е елементарно и става много бързо. Можеш за минути да промениш размера на десетки снимки. Има много програми с много повече функции, които можеш да използваш за обработване на изображения, но хубавото на този уеб инструмент е, че може да го ползваш на всеки компютър с Интернет, дори да няма инсталирана такава програма.

Завъртане на снимка

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

Предупреждение: Някои от модерните фотоапарати включват директно в снимката мета информация, в която е описано на коя страна е завъртяна снимката, затова когато гледаш такива снимки с програма за преглед на изображения снимките автоматично се изправят. Ако качиш такава снимка в сайт тя ще изглежда легнала на една страна и затова има нужда от завъртане и презапис.

Уеб инструментът първо смалява размера и едва тогава прави завъртане на снимката. Затова ако имаш снимка с размер 800×600 на която има сниман човек, който изглежда наклонен надясно и избереш смаляване на ширината на 400 точки и завъртане наляво, то резултата ще бъде снимка на човека изправен, но размера ще бъде 300×400, защото първо ширината става на 400 точки, височината автоматично става 300 точки и в този момент снимката е 400×300, но след това снимката се завърта наляво и вече имаме 300 точки ширина и 400 височина – изправена снимка (portrait).

Ако искаш само да завъртиш снимката без да променяш размера и, въведи максималната височина от 2000 пиксела и завъртане в желаната посока. Ако височината на оригиналната снимка е била под 2000 точки снимката само ще бъде завъртяна.

Ограничаване на отговорността

Използвай тази уеб форма свободно и безплатно на твоя отговорност – ganbox.com не поема никаква отговорност, ако при използване на формата презапишеш важна за теб снимка с умалено копие и по този начин загубиш оригинала на снимката.

Коментари

За всякакви коментари, идеи и предложения за нови версии и нови функции пиши коментари по тази статия.

Възможностите на плъгина галерия са наистина впечатляващи.

1. След зареждане на страницата освен първата снимка, която гледаш в момента, започват предварително да се зареждат следващите снимки и при натискане на връзката „Следваща снимка“, снимката която следва се зарежда моментално;

2.  Навигацията между снимките се представя с умалени изображения на снимките (thumbnails) и може лесно да прескачаш от една снимка на друга с натискане на мишката. Малките снимки се разделят на страници, когато са много.

3. Всяка снимка има отделна котва, като това ти дава възможност да направиш отметка (bookmark) на отделна снимка;

4. Автоматично преглеждане на снимките (slideshow). През няколко секунди снимките се сменят.

5. Под всяка снимка може да се слага описателен текст;

6. Гъвкава конфигурация на настройките. Може да задаваш през колко секунди да се сменят снимките, колко снимки да се зареждат предваритело и др.

7. Управление на изгледа с CSS файл;

8. При забранен JavaScript в браузъра снимките се показват като списък – връзките към снимките и описанията им са в обикновен <li>  таг. По този начин търсачките имат достъп до всяка снимка и индексират лесно страницата.

9. За по-напредналите има възможност да се дописват JavaScript функции, които създават интересни ефекти при превключване от една снимка към друга.

10. Възможност за повече от една галерия в една и съща страница.

11. Галерията има валиден XHTML код по стандартите на W3C.

Галерията е много бърза, а точки 5, 8  и 11 правят галерията чудесен избор за един SEO оптимизиран сайт.

Работещ пример има в страница снимки от фирмени обучения от Arthur Adams.

Как се инсталира галерията?

Плъгинът работи с jQuery версия 1.2.6 или по-нова. Ако вече имаш jquery в твоя сайт провери коя версия е и ако е по-стара от 1.2.6 ще трябва да я подмениш. Ако имаш по-нова версия, която ползваш за нещо друго, тогава не е нужно да я променяш. В момента последната версия е 1.3.2, но аз ти препоръчвам да ползваш възможно по-стара версия на jQuery. Причината е бързодействието на сайта. Не ти трябват излишни 20-30K във всяка страница. Също така ползвай съкратената версия, тази която има в името си min. Това е същия файл, но без излишни интервали в него. Получения js файл се чете много трудно, но се зарежда значително по-бързо.

1. Изтегли файловете.

http://arthuradams.bg/jscripts/jquery-1.2.6.min.js или директно от официалния сайт на jQuery http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

и файла с плъгина от тук http://arthuradams.bg/jscripts/jquery.galleriffic.min.js и ги постави в директория /js,  която трябва да е в главната уеб директория (ако нямаш такава директория на сървъра първо я създай).

Изтегли още файловете http://arthuradams.bg/css/galleriffic.css и http://arthuradams.bg/css/loader.gif и ги постави в директория /css в главната ти уеб директория.

За удобство всичките файлове съм ги включил в този архив ganbox.com_gallery.

2. Създай страницата на галерията.

Например gallery.html и между таговете <head> постави обръщение към JavaScript-овете и към CSS файла.

<head>
...
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.min.js"></script>
<link rel="stylesheet" href="/css/galleriffic.css" type="text/css" />
...
</head>

3. Създай div контейнерите на галерията.

<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
    ... списък с тагове <li> които описват снимките даден е по-долу ...
</div>

Всеки от тези div е незадължителен. Може да премахнеш например реда с div caption и така под снимките няма да има описания.

4. Добави списък със снимки.

В контейнера div thumbs постави толкова тага <li> колкото снимки има. Формата е следния:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="път до снимката с голям размер" title="заглавие на снимката">
            <img src="път до умалена картинка" alt="заглавие на снимката" />
        </a>
        <div class="caption">
            (произволен HTML тук например с описание на снимката)
        </div>
    </li>
    ... (тук постави списък с останалите елементи <li> за всяка снимка)
</ul>

Галерията изисква за всяка снимка да има освен оригиналната снимка и умалено копие (thumbnail). Да предположим, че имаш 3 снимки в папка /img в главната уеб директория с имена на файловете 1.jpg, 2.jpg, 3.jpg с големина примерно 800×800 пиксела и техни умалени копия с имена 1s.jpg, 2s.jpg и 3s.jpg и големина 40×40 пиксела. Тогава списъкът със снимки ще изглежда по този начин:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="/img/1.jpg" title="заглавие на снимка 1">
            <img src="/img/1s.jpg" alt="заглавие на снимка 1" />
        </a>
        <div class="caption">
            (описание на снимка 1)
        </div>
    </li>

    <li>
        <a class="thumb" href="/img/2.jpg" title="заглавие на снимка 2">
            <img src="/img/2s.jpg" alt="заглавие на снимка 2" />
        </a>
        <div class="caption">
            (описание на снимка 2)
        </div>
    </li>

    <li>
        <a class="thumb" href="/img/3.jpg" title="заглавие на снимка 3">
            <img src="/img/3s.jpg" alt="заглавие на снимка 3" />
        </a>
        <div class="caption">
            (описание на снимка 3)
        </div>
    </li>
  <!-- ... (тук постави списък с останалите елементи <li> за всяка снимка) -->
</ul>

Ако нямаш умалени копия използвай специална програма за създаването им, например уеб инструмента Промяна на снимка или безплатната програма от irfanview.com. В краен случай ако нямаш малки снимки може да зададеш пътя до големите снимки, но това ще бави зареждането на страницата. Разбира се за създаване на списъка може да се ползва цикъл  foreach на php.

5. Стартирай галерията.

Извикай следния JavaScript код:

<script type="text/javascript">
	// Тези стилове се активират само ако браузъра има включен JavaScript
	// Ширината 300px е за полето с малките снимки
	$('div.navigation').css({'width' : '300px', 'float' : 'left'});
	$('div.content').css('display', 'block');

	// Първоначално задава opacity на малките картинки и
	// допълнителни стилове за hover ефект
	var onMouseOutOpacity = 0.67;
	$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
		.hover(
			function () {
				$(this).not('.selected').fadeTo('fast', 1.0);
			},
			function () {
				$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
			}
		);

	$(document).ready(function() {
		// Инициализиране на галерията
		var galleryAdv = $('#gallery').galleriffic('#thumbs', {
			delay:                  3000, /* това са 3 секунди */
			numThumbs:              12,
			preloadAhead:           10, /* задай -1, за да зареди всички */
			enableTopPager:         true,
			enableBottomPager:      true,
			imageContainerSel:      '#slideshow',
			controlsContainerSel:   '#controls',
			captionContainerSel:    '#caption',
			loadingContainerSel:    '#loading',
			renderSSControls:       true,
			renderNavControls:      true,
			playLinkText:           '&raquo; Автоматично разглеждане',
			pauseLinkText:          '# Пауза',
			prevLinkText:           '&laquo; Предишна ',
			nextLinkText:           'Следваща &raquo;',
			nextPageLinkText:       'Следваща &raquo;',
			prevPageLinkText:       '&laquo; Предишна',
			enableHistory:          true,
			autoStart:              false,
			onChange:               function(prevIndex, nextIndex) {
				$('#thumbs ul.thumbs').children()
				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onTransitionOut:        function(callback) {
				$('#caption').fadeTo('fast', 0.0);
				$('#slideshow').fadeTo('fast', 0.0, callback);
			},
			onTransitionIn:         function() {
				$('#slideshow').fadeTo('fast', 1.0);
				$('#caption').fadeTo('fast', 1.0);
			},
			onPageTransitionOut:    function(callback) {
				$('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:     function() {
				$('#thumbs ul.thumbs').fadeTo('fast', 1.0);
			}
		});
	});
</script>

Ако има въпроси или нещо не тръгва пишѝ коментар, като сложиш връзка към кода.

Много добра галерия, бърза, удобна и SEO приятелски ориентирана. Ако някой иска да му инсталирам тази галерия в сайта може да се свърже с мен за оферта.

В статията са ползвани материали от сайта на автора на плъгина http://www.twospy.com

1. Заместване разширението на файлове.
for x in *.html; do mv „$x“ „${x%.html}.php“; done
- сменя разширението на всички файлове .html на .php в текущата директория

2. Заместване на една дума с друга дума в много файлове.
sed -i ‘s/comment/коментар/g’ *.php
- замества всички срещания на думата „comment“ с думата „коментар“ във всички .php файлове на текущата директория.
Внимание! Ако някъде в текста се съдържа думата „comments“ тя ще стане на „коментарs“, затова е добра идея първо да се потърси с командата:
grep comment *
- тази команда ще покаже не само в кои файлове, а и къде и как по-точно се среща търсената дума.

3. Създаване на малки картинки за галерия.
for i in `ls *.jpg`; do convert -resize 120×120 $i ${i%.jpg}.gif; done
- от файлове *.jpg прави малки картинки *.gif
За всеки един jpg файл от текущата директория, създава малка gif картинка, като по-дългата страна е 120 точки. Сега вече може да поставиш gif картинките в една страница и те да са връзки към по-големите jpg снимки. И не забравяй да сложиш правилните alt атрибути на тага img
Заб. Команда convert е част от библиотеката ImageMagick.