SEO блог и уеб програмиране » jquery

jQuery галерия за бързо преглеждане на снимки

gan — Thu, 20 Aug 2009 11:48:12 +0000

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

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

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

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

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

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

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

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

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

8. При забранен JavaScript в браузъра снимките се показват като списък – връзките към снимките и описанията им са в обикновен

таг. По този начин търсачките имат достъп до всяка снимка и индексират лесно страницата.

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 и между таговете постави обръщение към JavaScript-овете и към CSS файла.


...


<link rel="stylesheet" href="/css/galleriffic.css" type="text/css" />
...

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

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

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

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

В контейнера div thumbs постави толкова тага

колкото снимки има. Формата е следния:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="път до снимката с голям размер" title="заглавие на снимката">
            <img src="път до умалена картинка" alt="заглавие на снимката" />
        </a>
        <div class="caption">
            (произволен HTML тук например с описание на снимката)
        </div>
    </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>
  
</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:           '» Автоматично разглеждане',
			pauseLinkText:          '# Пауза',
			prevLinkText:           '« Предишна ',
			nextLinkText:           'Следваща »',
			nextPageLinkText:       'Следваща »',
			prevPageLinkText:       '« Предишна',
			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

 

Брой разглеждания на тази статия: 5300
(след дата 20 декември 2009)

Подобни статии:

Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....
Промяна на изображение Нов безплатен уеб инструмент от ganbox.com за обработване на изображения....
Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

Премахване на грешки в сайт и преминаване към XHTML

gan — Tue, 11 Aug 2009 12:17:52 +0000

Тази статия е за често срещани HTML грешки в сайтовете и оправянето им с помощта на HTML валидатора http://validator.w3.org Валидаторът дава доста подробни обяснения, но понякога решението не е очевидно. Тук разглеждам именно такива трудни за отстраняване грешки.

Нямам намерение да убеждавам някой, че трябва да изчисти грешките в своя сайт – приемам, че отдавна е убеден, че това е полезно не само от SEO гледна точка, но и поради улесняване на достъпа на незрящи посетители до сайта.

Изчистването на HTML код от грешки може да бъде непосилна задача за доста хора. Какво ще стане ако напишеш името на твоя домейн във валидатора и видиш резултат „Result: 525 Errors, 226 warning(s)“. Най-важното „Без паника!“, големия брой грешки не трябва да те впечатлява, защото грешките са взаимно свързани – изчистването на една грешка може да премахне много след нея.

Ето често срещани примери за грешки и тяхното отстраняване.

1. Премахване на атрибути на тага body.

Грешка:
Line 14, Column 36: Attribute „leftmargin“ is not a valid attribute
„0″ topmargin=“0″ marginwidth=“0″ marginheight=“0″>
Решение:

Премахват се атрибутите на тага body и се поставя техен аналог в главния CSS файл.

Ако твоя сайт няма CSS файл. Създай в главната уеб директория празен текстов файл style.css и добави в HTML файла между head таговете реда:

след това промени боди тага в HTML файла така:

Във файла style.css се поставят правилата:
body {
text-align: center;
    margin: 0;
    padding: 0;
    background-color: #D9D5D2;
}

2. Заместване на тага embed с object.

Тага embed е остарял таг за включване на Flash анимация в страницата.

Грешка:

Line 136, Column 12: Attribute „SRC“ is not a valid attribute. Did you mean „src“?

„images/bcastr31.swf“ width=880 height=330 quality=“high“ TYPE=“appli

Решение:

Премахване на таг embed разглеждам в отделна статия Флаш анимация без таг embed за валиден XHTML

3. Премахване на атрибута onload на тага img.

Уеб страници създадени с програмата „Web Page Maker“, които съдържат картинки в навигацията, имат атрибут onLoad на img таговете. Той вика JavaScript функцията MM_preloadImages(). Този код е невалиден и дава следната грешка:

Грешка:

Line 96, Column 228: Attribute „ONLOAD“ is not a valid attribute. Did you mean „onload“?
…eria.html“>„MM_preloadImages(‘images/nav1.gif…
HTML кода, който поражда грешката, изглежда като този:
<div id=„nav1″><a onMouseOut=„MM_swapImgRestore()“
onMouseOver=„MM_swapImage(‘nav1′,“,’images/nav1.gif’,1)“ href=„index.html“>
<img name=„nav1″ onLoad=„MM_preloadImages(‘images/nav1.gif’)“
alt=„“ border=0 src=„images/nav1.gif“ width=„180″ height=„26″>a>
div>
Решение:

За да направя кода валиден и да запазя функциалността, просто премествам атрибута в тага body за всички бутони от навигацията.
<body onload=„MM_preloadImages(‘images/nav1.gif’);MM_preloadImages(‘images/nav2.gif’);“>
а горния код се съкращава до:
<div id=„nav1″><a onmouseout=„MM_swapImgRestore()“
onmouseover=„MM_swapImage(‘nav1′,“,’images/nav1.gif’,1)“ href=„index.html“>
<img name=„nav1″ alt=„“ border=0 src=„images/nav1.gif“ width=„180″ height=„26″>a>
div>
Променени са също onmouseout и onmouseover с малки букви. Всичко това води до валиден XHTML код.

4. Заместване на тага marquee с jQuery скролер на текст.

Тага marquee е много остарял таг и не е по XHTML стандарта. При поставяне на текст между тагове marquee текста започва да се движи хоризонтално или вертикално. С използването на този таг браузерът натоварва процесора и движението е насечено, изглежда много грозно и трудно се чете от посетители на сайта. При валидиране на страницата валидатора дава следната грешка:

Грешка:

Line 41, Column 52: Attribute “DIRECTION” is not a valid attribute
„up“ scrollamount=“2″ loop=“true“>
…

Решение:

Най-доброто решение за заместване на този таг безспорно е с използване на JavaScript.

Подробно решение на проблема съм дал в статията Заместване на тага marquee за валиден XHTML

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

5. Ползвай & вместо & при параметри на скрипт.

Грешка:

Line 53, Column 49: cannot generate system identifier for general entity „dropdown_id“
…s=“lang“>dropdown_id=30″ class=“bul“>BG Решение:

Замени всички & с & в параметри на връзките.

Пример:
/page.php?lang=bg&dropdown_id=30
става
/page.php?lang=bg&dropdown_id=30

6. Не ползвай блокови тагове включени в inline тагове.

Грешка:

Line 172, Column 85: document type does not allow element „h1″ here; missing one of „object“, „ins“, „del“, „map“, „button“ start-tag
…“ title=“Начало форум“ id=“logo“>>ganbox.com SEO форум

Решение:

Таг h1 не може да се включва в тага a. Просто размени местата им от:
<a href=„./index.php“ title=„Начало форум“ id=„logo“><h1>ganbox.com SEO форумh1>a>
на:

ganbox.com SEO форум

Тук съм дал само някои от най-често срещаните грешки. Периодично ще допълвам статията, ако измисля още.

Веднъж като схванеш принципа на действие и ще ти става все по лесно да изчистваш грешките от своя сайт.

С безплатния инструмент SEO състояние на сайт можеш да проверяваш началната страница на сайт за HTML грешки, както и много друга полезна SEO информация за сайта.

Брой разглеждания на тази статия: 3543
(след дата 20 декември 2009)

Подобни статии:
Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....

Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

Заместване на тага marquee за валиден XHTML

gan — Tue, 02 Jun 2009 08:28:30 +0000

HTML тага marquee се използва за автоматично скролиране на текст. Текста поставен между тагове marquee се показва от браузъра като движещ се текст, хоризонтално или вертикално. Не използвай тага marquee основно по следните причини: кода на страницата, която съдържа marquee не е валиден XHTML; браузъра натоварва процесора на компютъра; движението не е плавно, а накъсано и като резултат от това изглежда грозно и се чете трудно. Грозни примери има тук.

Да приемем, че имаш страница която съдържа код за превъртане на новини. Подобен на този:

Заглавие 1
Текст новина 1

Заглавие 2
Текст новина 2

Заглавие 3
Текст новина 3

При опит страницата да мине през валидатора се получава грешка подобна на следната:

Line 41, Column 52: Attribute „DIRECTION“ is not a valid attribute
„up“ scrollamount=“2″ loop=“true“>
…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.

Заместване на тага marquee с jQuery

Най-доброто решение на проблема е като тази част от кода за показване на новини се преработи на JavaScript.

Следния пример се базира на кода на Easy Slider 1.5 за скролиране на текстово съдържание и на картинки. Този код от своя страна разчита на библиотеката jQuery.

Копирай файловете:

http://arthuradams.bg/jscripts/jquery.js

http://arthuradams.bg/jscripts/easySlider1.5.js

http://arthuradams.bg/jscripts/slider.js

и ги качи в директория jscripts, която се намира в главната уеб директория.

Файла http://arthuradams.bg/css/slider.css постави в /css

Файловете за бутончета за превъртане (правени от мен)

http://arthuradams.bg/images/btn_prev.gif

http://arthuradams.bg/images/btn_next.gif

постави в директория /images

В страницата която ще показва новините между таговете head включи файловете
<script type=„text/javascript“ src=„jscripts/jquery.js“>script>
<script type=„text/javascript“ src=„jscripts/easySlider1.5.js“>script>
<script type=„text/javascript“ src=„jscripts/slider.js“>script>
<link href=„css/slider.css“ rel=„stylesheet“ type=„text/css“ media=„screen“ />
Замествам целия блок div id=news с:
<div id=„slider“>

Заглавие 1
Текст новина 1

Заглавие 2
Текст новина 2

Заглавие 3
Текст новина 3

div>
Това е. Получения код е валиден XHTML и движението е много по-плавно. Освен това можеш да използваш бутончето стрелка нагоре, за да се върнеш на предната новина при което движението спира, за да може да я прочетеш спокойно. Настройки за движението, като скорост, секунди за които спират новините и др. се задават от файла jscripts/slider.js

Работещ код има във всяка страница на сайта за обучения по мениджмънт и маркетинг arthuradams.bg

Слайдерът може да скролира не само текст, но и картинки.

Брой разглеждания на тази статия: 3658
(след дата 20 декември 2009)

Подобни статии:
Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете...