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. :)

аа спасибо сек будте исправлено, и я использую ваш скрипт для нахождения классов для старых браузеров

Да не важно чей скрипт, главное чтоб Вы понимали, что он делает, ну или хотябы хотели понять :-)

http://fuzaylov.net/asdf.html (кликать по ссылкам после полной загрузки страницы) Еще возник какой то глюк
1) почему то рис не грузиться в IE7, а в FF2 and Opera они грузятся но не вставляются в див, а браузер перекидывает меня на адрес рисунка.
2) почему то рисунки loading.gif и x.jpg не подгружаются.
хотя в методе setup src указывается.

this.xPic                     = new Image();
this.xPic.src                = 'x.jpg';
this.loadingPic             = new Image();
this.loadingPic.src        = 'loading.gif';

Нужно предотвратить стандартное событие перехода по ссылке

объект_событие.preventDefault(); // для W3C совместимых браузеров
event.returnValue = false; // для Internet Explorer

Просто «return false» в функции где-то не срабатывает, не помню уже где, вроде с addEventListener.

А изображения, чтобы они были подгружены заранее, должны находится в дереве, а не просто созданы через new Image().src… чтобы они не мешались, можно, например, задать для них абсолютные координаты и visibility: hidden; в CSS, но не display: none;.

Кстати, JavaScript очень «гибкий» язык и вместо:

this.xPic                     = new Image();
this.xPic.src                = 'x.jpg';
this.loadingPic             = new Image();
this.loadingPic.src        = 'loading.gif';

можно записать так:

(this.xPic = new Image()).src = 'x.jpg';
(this.loadingPic = new Image()).src = 'loading.gif';

хоть пусть меня кто-нибудь и упрекнет в не читаемости такой конструкции, но я предпочитаю использовать подобные возможности языка для сокращения кода :-)

Здравствуйте всем!
Доделал скрипт до конца. Пожалуйста если найдутся еще замечания всегда буду только рад.
Еще есть вопрос. Мой скрипт начинает работать после полной загрузки страницы. Т.е. страница грузиться и цикл проходит по всем ссылкам и прикручивает к ним обработчики. Как вы думаете, будет лучше прикручивать обработчики после полной загрузки страницы или вставить тэг <script src="my.js"></script> в самый низ страницы и проходиться по всем ссылкам не дожидаясь полной загрузки страницы. Т.е. в первом случае скрипт не работает до полной загрузки страницы, а во втором случает он может применяться еще к не загрузившимся рисункам!

Есть еще вариант обработать ссылки по событию «DOMContentLoaded» и в то же время оставить возможность вызвать скрипт в ручную в любое время.

Смотрел в Firefox 3.0.5
1. Первое изображение не открывается (индикатор загрузки вечно висит), второе показывает первое :-)
2. Загрузку нельзя прервать.
3. На большом мониторе плавное изменение прозрачности черного блока тормозит.
4. Черный блок не достает справа и снизу на границ рабочей области браузера.

Т.е. во время загрузки рисунка прикрутить кнопку "закрыть" или есть еще какой нибудь выход?
У меня 17' и все нормально, а от чего может зависеть это торможение на большом маниторе?

Закрывать по клику на черный блок
Браузер не успевает плавно перерисовывать такие большие прозрачные области, по экрану начинают бегать широкие горизонтальные полосы разной прозрачности. На маленьком мониторе так же, только эффект не настолько заметен. Это не проблема компьютера. Уже много раз с таким сталкивался. Может быть стоит попробовать подобрать более оптимальные значения вместо того, чтобы прибавлять по 0.02 до 0.9 с задержкой 100мс, в это время браузер успевает перерисовать весь экран аж 45 раз.

Я в подобном скрипте, чтобы избавится от этого мерцания, растягивал темный блок до размеров окна, а не страницы, делал его position: fixed; и изменял прозрачность не так плавно.

Octane, большое спасибо за помощь, буду исправлять. И еще хотел спросить, у меня уже статут Аспиранта, у вас так же как и в других форумах, статус зависит от количества постов?

HelpeR,
Да, статус зависит только от количества постов.