jQuery (jQuery UI) базирана администрация на галерия

Бях решил да не пиша повече в този блог (и не съм го правил от 09.2008 насам), но тъй като от един месец си работя вече само от вкъщи като web developer freelancer, имам малко повече свободно време. Вкл. смятам да отделя такова и да вдигна отново този блог на крака (само че на този адрес: www.vlkomarov.info/post/), както и въобще да се погрижа за личния си сайт.

Темата днес е jQuery и защо това е един прекрасен javascript framework (www.jquery.com):

1. Лесен за усвояване (изучаване) основен синтаксис: в сравнение с други библиотеки, върху които имам поглед (mooTools, YUI), синтаксисът на jQuery е много по-лесен за изучаване, четивен е и спестява - както и другите библиотеки - време и усилия на разработчиците.
2. Наистина пести време: в сравнение с обема на кода, времето за debug-ване и обема на вложеното време и усилия, писането на jQuery, сравнено с native javascript или native Ajax (а не ползването на методи $.load, $.get, $.post, $.ajax via jQuery) e просто като забавна игра.
3. Има десетки и стотици вече разработени от jQuery общността плъгини, които без или с леко модване на кода могат да влязат веднага в употреба и да спестят още повече време, осигурявайки обаче добра функционалност за вашия сайт.

Например, в демото, което можете да видите ползвам два стандартни плъгина:

1. Единият осигурява lightBox ефектa, който мисля всички помним в първоначалния му prototype (+ scriptaculous) вариант: jQuery lightBox plugin (сега има много и най-различни варианти).
2. Вторият осигурява една изключително полезна функционалност, а именно crop = изрязване на снимки (вижте демото): jQuery Image Cropping Plugin.

Освен тези два основни jQuery плъгина в употреба влиза и функционалността, която jQuery UI (=User Interface) предлага за лесно създаване и манипулация на диалогови прозорци, както и за такива неща като sortable списъци: www.jqueryui.com.

През юли 2008, когато кодвах back-end-а за сайта на XGround Models (www.xgroundmodels.com) все още не знаех за jQuery и jQuery UI. Ползвах javascript библиотека от 2005 (jQuery стана на 3 години през януари 2009, т.е е от началото на 2006) за sortable функционалност, стана страхотно; а за crop-ването, заедно с колега Flash developer, писахме едни чудесии, комуникация PHP <-> Flash, XML <-> PHP (целият сайт е Flash и XML базиран, но във втората версия, която ще разработвам т.г. това вече няма да е така), всичко стана много добре, работи прекрасно, беше забавно, научих нови неща.. и загубих една седмица!

След това, през ноември 2008, когато кандидатствах за работа в ICDSoft писах едно домашно, което ако трябва да пиша сега (с използване на jQuery) щеше да е много по-добро: Demo.

През декември 2008 започнах наистина сериозно да следя за всичко около jQuery и мисля, че това беше крачка в правилна посока. Ако все още не сте я направили и вие, съветвам ви да побързате: това е неоценима помощ за всеки web developer.

Така, и в края, ето едно демо. Става дума за администрация на галерия - всеки 2-3-4 сайт има такава, нали? Сега, с помощта на jQuery (вкл. Ajax via jQuery), jQuery UI, плъгините, нещата стават в пъти по-бързо, с по-малко и по-чист код..

Функционалност:
- проверка за тип, разширение, размер на файла и т.н.
- предварително автоматично оразмеряване на всяка качена снимка
- добавяне на max на брой нови снимки
- смяна на всяка една снимка
- изрязване на thumbnail чрез Jcrop от всяка снимка, при качване и във всеки един момент след това
- изтриване на снимки
- преподреждане на снимките
- преглед на снимките (lightBox)

jQuery (jQuery UI) базирана администрация на галерия

Препоръчително е да го гледате на Full Screen, HD, иначе не се вижда май май нищо особено.

И един скрийншот от подобна галерия:

Владимир Комаров, PHP | MySQL | XML | jQuery web developer, Freelancer