Тези дни нямах много свободно време, но това не ми пречи да помогна малко на колега с 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');
});
});
Горе долу това е, като само в бъдеще един ефект за появяване и скриване на снимката трябва да се добави
