Lightbox моя версия
 

Здравствуйте!
Решил написать свою версию Lightbox'а. Если будут замечания всегда рад.
Тестировал на IE6 IE7 FF2 FF3 Opera9.27 Opera AC.
Принцип работы. Метод setup применяется тольк один раз (при первом вызове эффекта) для создания всех элементов эффекта. Далее при последующих выховах, элементы уже готовы (т.е. не создаются заново) и опять применяются к эффекту.
Конструктор HelpeR я не стал нагружать, что бы при его вызове объект не был нагружен.
Очень хочется отработать ее до полной и четкой работоспособности. Поэтому мне нужны ваши замечания и советы.
Заранее большое спасибо за помощь!

this.browserVersion.indexOf('MSIE 6.0') != -1

и так выдаст true или false, для чего это записывать в виде

(this.browserVersion.indexOf('MSIE 6.0') != -1) ? true : false;

и скобки можно убрать.


Чтобы не писать много раз:

HelpeR.prototype…

можно использовать такую конструкцию:

HelpeR.prototype = {
  method1: function(…) {
   …
  },
  method2: function(…) {
   …
  },
  method3: function(…) {
   …
  }
};

Удобнее было бы, если скрипт обрабатывал только ссылки с указанным классом, например:

<a href="image.png" class="lightbox">Image</a>

а не все ссылки на странице.

А так же способ назначения обработчика событий, который вы используете сейчас:

HelpeR.prototype.processing = function(obj) 
{
…
    obj.onclick = function() 
	{
…
	  return false;
	}
  }
}

Лучше переписать с использованием addEventListener/attachEvent.

И совет: ставь точку с запятой там, где это возможно:

… = function(…) {
    …
}; <—

Octane, большое спасибо сейчас же займусь доработками.
Хотел уточнить почему именно класс должен обрабатываться, а не id?
this.browserVersion.indexOf('MSIE 6.0') != -1 а здесь в конце ; ставить следует или нет?

Потому что id только один может быть на странице.

Вашу конструкицию

HelpeR.prototype.setup = function() 
{
…
  this.ie                          = (this.browserName == 'Microsoft Internet Explorer') ? true : false;
  this.ie6                         = (this.browserVersion.indexOf('MSIE 6.0') != -1)     ? true : false;
  this.ie7                         = (this.browserVersion.indexOf('MSIE 7.0') != -1)     ? true : false;
  this.opera                       = (this.browserName == 'Opera')                       ? true : false;
  this.netscape                    = (this.browserName == 'Netscape')                    ? true : false;
…

можно заменить на

HelpeR.prototype.setup = function() 
{
…
  this.ie                          = this.browserName == 'Microsoft Internet Explorer';
  this.ie6                         = this.browserVersion.indexOf('MSIE 6.0') != -1;
  this.ie7                         = this.browserVersion.indexOf('MSIE 7.0') != -1;
  this.opera                       = this.browserName == 'Opera';
  this.netscape                    = this.browserName == 'Netscape';
…

будет абсолютно тоже самое :)

Про использование класса уже Kolyaj объяснил.

ок большое спасибо!
что то я уже сам с ума схожу )))

Только не забудьте, что у элемента может быть несколько классов.

да Kolyaj, думаю я применю твой скрипт (если не ошибаюсь он был твой) по определению класса

все попытался исправить но выводится ошибка,т.е. не прекручивается функция для обработки события. FF2 выводит следующую ошибку.
Скрипт

HelpeR.prototype = {
...

processing : function(obj) {
	var str = obj.href.lastIndexOf("/");
	var getURL = obj.href.substring(str+1);
	if(obj.className == "HR") {
	  if(obj.attachEvent) {
		obj.attachEvent('onclick',function() {
		  effect.gogogo(getURL);								   
		});  
	  }
      else if(obj.addEventListener) {
    	obj.addEventListener('click',function() {
		  effect.gogogo(getURL);									  
		});
	  }
    } 
  },

...
}

var effect;
window.onload = function() {
  effect = new HelpeR();
  var a = document.getElementsByTagName('a');
  for(var i=0; i<a.length; i++) {
	effect.processing(a[i]);
  }
};

сорри скрипт оказывается был Octane'a

В метод

addEventListener

передается 3 параметра, последний из которых должен быть false, т.к. в IE невозможно включить другой порядок всплывания событий. И функцию лучше сделать одну, но универсальную, чтобы она использовала ссылку на контекст вызова (this) для получения значения атрибута href, т.е. например было что-то типа такого:

function viewImage() {
  effect.gogogo(this.href);
  // и тут же предотвращение стандартного события перехода по ссылке
  var e = arguments[0] || window.event;
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
…addEventListener('click', viewImage, false);
…attachEvent('onclick', viewImage);

Для attachEvent еще надо не забыть запомнить контекст вызова, т.к. this внутри функции viewImage будет указывать на window. :)