Малко Javascript coderewrite

Тези дни нямах много свободно време, но това не ми пречи да помогна малко на колега с JavaScript -а .
Така, основния проблем на моя колега беше че има списък със малки снимки и като се натисне някоя от тях, тя трябва да се покаже в цял размер. И както карам колегите в офиса, от доста време, JavaScript-a трябва да е unobtrusive и цялата страница да е функционална дори и с изключен от браузарът JavaScript. HTML кода ще изглежда горе-долу така:

<div id="big_image"><img src="{$picUrl}" alt="" /></div>
// ... code
<ul>
{foreach from=$pictures item=pic}
	<li><a href="{$pic.url}" target="_blank" rel="gallery"><img src="{$pic.thumb}" alt="" /></a></li>
{/foreach}
</ul>

Идеята е ако няма JavaScript просто снимката ще се отвори в нов прозорец, допълнителен плюс е и че ще имаме пътя за оригиналната снимката, достъпен чрез атрибута href на линковете.
Та колегата написъл следното:

Event.observe(window, 'load', function(){
	$$('a').each(function(a){
		a.observe('click', function(e){
			if (a.getAttribute('rel') == 'gallery') {
				$$('#big_image img').setAttribute('src', a.getAttribute('href'));
				e.stop();
			}
		});
	});
});

На пръв поглед не изглежда зле, но само на пръв поглед. Като за начало под много неуважавания IE6 снимката няма се сменя. А и  трябва и да се добави class=”selected” на избраната картинка.

Така че реших първо да пефасонирам кода и се получи това (сложих id=”thumb” на ul-то с малките снимка за по-бързо намиране на елементите):

document.observe('dom:loaded', function(){
	$$('#thumb a[rel=gallery]').invoke('observe', 'click', function(e){
		e.stop();
		$('big_image').down('img').setAttribute('src', this.getAttribute('href'));
	});
});

После добавих кръпката за IE6, за опресняване на снимка защото само със смяна на атрибута src няма да се промени снимката(поне в повечето случай).  И най-сигуния начин, който знам (ако някой знае по-добър, нека сподели) е изцяло да заменям img таг-а с нов img таг и така кода става такъв ( + това за class=”selected” )

document.observe('dom:loaded', function(){
	$$('#thumb a[rel=gallery]').invoke('observe', 'click', function(e){
		e.stop();
		$('big_image').innerHTML = '<img src="' + this.getAttribute('href') + '" />';
		this.up('ul').select('.selected').invoke('removeClassName', 'selected');
		this.addClassName('selected');
	});
});

Горе долу това е, като само в бъдеще един ефект за появяване и скриване на снимката трябва да се добави