Slyweb
На разработку сайта! Скидки 50%!

Lightbox без фреймовика

Lightbox - название популярно плагина, написанного с использованием фреймовика, основным назначением которого является удобная работа с изображениями и информацией о них.

Комментарий к первому изображению Комментарий ко второму изображению Комментарий к третьему изображению Комментарий к четвёртому изображению

На сегодняшний день в интернете существует несколько разновидностей Lightbox, которые можно классифицировать по нескольким основаниям:

По типу фреймовика:

  • Lightbox на jQuery;
  • Lightbox на Mootools;
  • Lightbox на Prototype;
  • Lightbox на Dojo;
  • Lightbox на Toolkit;
  • и другие.

По характеру предзагрузки изображений:

  • Lightbox, загружающий полностью все изображения после полной загрузки DOM, смена изображений происходит в результате замены атрибута src;
  • Lightbox, загружающий только миниизображения, увеличенные копии загружаются путём создания нового объекта Image;
  • Lightbox, использующий ajax предзагрузку изображений, и последующее их добавление в процессе использования элементов управления галереи.

По использованию эффектов:

  • Lightbox, использующий эффекты, как правило, созданные jQuery и др. подобными библиотеками;
  • Lightbox, не использующий эффекты.

Lightbox популярен в последнее время, как популярны и сами фреймовики, на которых он пишется, но не всякий способен написать Lightbox сразу, к примеру на jQuery, проще понять работу Lightbox на чистом javascript, где по возможности упрощен весь код и функции, а после чего заменить некоторые из них аналогами фреймовиков.

В данной статье я расскажу Вам как создать собственный Lightbox на javscript, который Вы сможете использовать в качестве шаблона для создания собственных версий Lightbox. В результате изучения данной статьи Вы сможете создать собственный Lightbox или использовать данный шаблон для нужных Вам целей, не сомневаясь в правильности кода.

Прежде чем я начну объяснять каждую функцию Lightbox на javscript, сделаю предупреждение, что данный шаблон является каркасом вполне работоспособным и кроссбраузерным, но всё же не полностью доработанным, в следствие отсутствия таковой надобности, поскольку автор предполагает, что многие функции будут изменяться и дополняться пользователями данного шаблона, с целью приспособления к собственным нуждам. В конце концов, чужие знания использовать хорошо, но лучше уметь применять их самому.

Для правильного и быстрого усвоения материала читателю необходимы следующие знания в javascript:

  • Умение работать с управляющими структурами, циклами в javascript.
  • Понимание структуры DOM документа, умением работать с элементами данной структуры;
  • Умение обращаться к элементам их создавать, изменять, удалять, то есть знать методы getElemntsByTagName, getElemntById createElement, removeChild, createTextNode;
  • Кроссбраузерное пониманме функций обработчиков, знание событий onload, onclick, onmouseover, onmouseout;

Шаблон Lightbox на javscript состоит из следующих файлов:

Скачать весь архив - здесь

Первая функция - ready(), функция позволяет отложить использование javascript до полной загрузки DOM (структура документа, содержащая все элементы на странице), поскольку в ином случае свойства и методы объектов javascript, применяемых в данном скрипте, по меньшей мере, не будут работать.

  • Код
  • Чистый код
  1.// функция ready проверяет возникновение события загрузки документа кроссбраузерно
  2. var called = false
  3. function ready(){
  4. if(called) return
  5. called = true
  6. lightbox()
  7. }
  8.

        

В функции ready() проверяется была ли она запущена хотя бы раз, если была, то повторно она не будет запущена. Сделано это для того, чтобы предотвратить повторный запуск функции ready(). В теле функции проверяется переменная called

  • Код
  • Чистый код
  1.var called = false
  2. ...
  3. if(called) return
  4. called = true
  5. ...
  6. }
  7.

        

Если в первые функция запущена, то переменная called меняет значение на true, поэтому если в дальнейшем нащ обработчик попытается вызвать функцию ещё раз, то не пойдёт дальше строчки if(called) return и соответственно не запустит функцию lightbox

Следующий код необходим для Internet Explorer. В нём происходит проверка готовности загрузки DOM:

  • Код
  • Чистый код
  1. if(document.documentElement.doScroll && window == window.top)
  2. {
  3. function tryScroll(){
  4. if(called) return
  5. if(!document.body) return
  6. try{
  7. document.documentElement.doScroll("left")
  8. ready()
  9. }
10. catch(e)
11. {
12. setTimeout(tryScroll, 0)
13. }
14. }
15. tryScroll()
16. }
17.

        

Я думаю, данный код не вызовет затруднений у читателя.

Следующий код так же прост - он необходим, например для правильной работы обработчика события DOMContentLoaded в FireFox, событие DOMContentLoaded срабатывает после загрзки 99% всего кода на странице и DOM соответственно, и поддерживается большинством современных браузеров. Тем не менее, устаревшие версии браузеров не поддерживаются событие DOMContentLoaded, поэтому для объекта window создаётся дополнительный обработчик но для более старого события load. Таким образом, наш код стал более работоспособным для большинства браузеров, основанных на движке Mozila.

  • Код
  • Чистый код
  1.// для mozila
  2. if(window.addEventListener){
  3. window.addEventListener('DOMContentLoaded',ready,false)
  4. window.addEventListener('load',ready,false)
  5. }
  6.

        

За ним следует код, выполняющий аналогичные функцию в Internet Explorer:

  • Код
  • Чистый код
  1. document.attachEvent("onreadystatechange", function(){
  2. if(document.readyState === "complete")
  3. {
  4. ready()
  5. }
  6. })
  7.

        

Функция attevent содержит в себе обработчик hendler для события onload(load), срабатывающего при загрузке изображения:

  • Код
  • Чистый код
  1. //внутри функции attevent - содержится обработчик hendler события onload(load) для изображения
  2. // она принимает два параметра - newim - объект нового изображения и параметр e - объект содержащий
  3. // информацию об изображении превью (комментарий, src максимального изображения)
  4. function attevent(newim,e){
  5. // обработчик события onload(load)
  6. function hendler(){
  7. nim = document.createElement("img");
  8. nim.src = newim.src;
  9. nim.id = "bigimg";
10. document.getElementById("conteiner").appendChild(nim);
11. //эффект затемнения - эффект сокрытия элементов страницы при показе увеличенного изображения
12. var shadow = document.createElement('div');
13. shadow.id = 'shadow';
14. //Получаем высоту всей старницы для установления свойства height элемента
15. // создающего эффект затемнения
16. function getDocumentHeight() {
17. return Math.max(document.compatMode != 'CSS1Compat' \
18. ? document.body.scrollHeight : document.documentElement.scrollHeight);
19. }
20. //Получаем ширину всей старницы для установления свойства width элемента
21. // создающего эффект затемнения
22. function getDocumentWidth() {
23. return Math.max(document.compatMode != 'CSS1Compat' \
24. ? document.body.scrollWidth : document.documentElement.scrollWidth);
25. }
26. bh = getDocumentHeight()
27. bw = getDocumentWidth()
28. shadow.style.height = bh +'px';
29. shadow.style.width = bw +'px';
30. document.body.appendChild(shadow)
31. // Прогрессбар - скрываем его так как изображения полностью загрузилось
32. // Прогрессбар является элементом div, содержащим изображение, изменить его можно
33. // изменив параметр background:url('ajax-loader.gif');
34. var loader = document.getElementById("loader");
35. loader.style.display = "none";
36. // центрирование изображения по высоте и по ширине body
37. var imt = document.getElementById("conteiner").clientHeight;
38. var iml = document.getElementById("conteiner").clientWidth;
39. var imb = document.documentElement.clientWidth;
40. var imbt = document.documentElement.clientHeight;
41. // кроссбраузерное определение вьюпорта
42. var offset = document.scrollY || document.documentElement.scrollTop || document.body.scrollTop
43. var centerimg = (imb/2) - (iml/2);
44. var centerimgh = (imbt/2) - (imt/2);
45. document.getElementById("conteiner").style.left = centerimg+"px";
46. document.getElementById("conteiner").style.top = document.documentElement.scrollTop + centerimgh+"px";
47. //создание комментария, путём получения значения аттрибута alt тега img, по которому был произведён щелчок
48. var ctn = document.createTextNode(e.alt);
49. document.getElementById("comment").appendChild(ctn);
50. // выравнивание комментария
51. document.getElementById("comment").style.top= imt-50+"px";
52. document.getElementById("comment").style.width= iml-20+"px";
53. document.getElementById("comment").style.display = "block";
54. //выравнивание кнопки close
55. var close = document.getElementById("close");
56. close.style.left = iml-76+"px";
57. close.style.top = 0+"px";
58. close.style.display = "block";
59. }
60. // кроссбраузерный обработчик addEventListener для Mozila остальное для ie
61. if(newim.addEventListener){
62. newim.addEventListener('load', hendler, false)
63. }
64. else{
65. newim.attachEvent('onload', hendler)
66. }
67. }
68.

        

Основной код функции hendler:

  • Код
  • Чистый код
  1. ...
  2. nim = document.createElement("img");
  3. nim.src = newim.src;
  4. nim.id = "bigimg";
  5. document.getElementById("conteiner").appendChild(nim);
  6. ...
  7.

        

отвечает за создание нового изображение (nim = document.createElement("img")) и присоединение его к элементу с id conteiner(document.getElementById("conteiner").appendChild(nim)), так создаётся увеличенное изображение

Следующие строчки могут вызвать затруднение в понимании функции getDocumentHeight()

  • Код
  • Чистый код
  1. //эффект затемнения - эффект сокрытия элементов страницы при показе увеличенного изображения
  2. var shadow = document.createElement('div');
  3. shadow.id = 'shadow';
  4. //Получаем высоту всей старницы для установления свойства height элемента
  5. // создающего эффект затемнения
  6. function getDocumentHeight() {
  7. return Math.max(document.compatMode != 'CSS1Compat' ? \
  8. document.body.scrollHeight : document.documentElement.scrollHeight);
  9. }
10. //Получаем ширину всей старницы для установления свойства width элемента
11. // создающего эффект затемнения
12. function getDocumentWidth() {
13. return Math.max(document.compatMode != 'CSS1Compat' ? \
14. document.body.scrollWidth : document.documentElement.scrollWidth);
15. }
16. bh = getDocumentHeight()
17. bw = getDocumentWidth()
18. shadow.style.height = bh +'px';
19. shadow.style.width = bw +'px';
20. document.body.appendChild(shadow)
21.

        

Функция getDocumentHeight() проверяет соответствие браузера стандартам CSS и возвращает высоту страницы, которую мы будем использовать для установления высоты элемента, создающего эффект затемнения второстепенной информации на странице:

  • Код
  • Чистый код
  1. ...
  2. bh = getDocumentHeight()
  3. shadow.style.height = bh +'px';
  4. document.body.appendChild(shadow)
  5. ...
  6.

        

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

  • Код
  • Чистый код
  1. ...
  2. // Прогрессбар - скрываем его так как изображения полностью загрузилось
  3. // Прогрессбар является элементом div, содержащим изображение, изменить его можно
  4. // изменив параметр background:url('ajax-loader.gif');
  5. var loader = document.getElementById("loader");
  6. loader.style.display = "none";
  7. // центрирование изображения по высоте и по ширине body
  8. var imt = document.getElementById("conteiner").clientHeight;
  9. var iml = document.getElementById("conteiner").clientWidth;
10. var imb = document.documentElement.clientWidth;
11. var imbt = document.documentElement.clientHeight;
12. // кроссбраузерное определение вьюпорта
13. var offset = document.documentElement.scrollTop || document.body.scrollTop || document.scrollY
14. var centerimg = (imb/2) - (iml/2);
15. var centerimgh = (imbt/2) - (imt/2);
16. document.getElementById("conteiner").style.left = centerimg+"px";
17. document.getElementById("conteiner").style.top = offset + centerimgh+"px";
18. //создание комментария, путём получения значения атрибута alt тега img, по которому был произведён щелчок
19. var ctn = document.createTextNode(e.alt);
20. document.getElementById("comment").appendChild(ctn);
21. // выравнивание комментария
22. document.getElementById("comment").style.top= imt-50+"px";
23. document.getElementById("comment").style.width= iml-20+"px";
24. document.getElementById("comment").style.display = "block";
25. //выравнивание кнопки close
26. var close = document.getElementById("close");
27. close.style.left = iml-76+"px";
28. close.style.top = 0+"px";
29. close.style.display = "block";
30. }
31.

        

Для неопытных пользователей трудность может представлять код:

  • Код
  • Чистый код
  1. ...
  2. // кроссбраузерный обработчик addEventListener для Mozila остальное для ie
  3. if(newim.addEventListener){
  4. newim.addEventListener('load', hendler, false)
  5. }
  6. else{
  7. newim.attachEvent('onload', hendler)
  8. }
  9. }
10.

        

Метод addEventListener поддерживатеся браузерами Mozia, а метод attachEvent поддерживается браузером Inernet Explorer, таким образом, у нас плучился кроссбраузерный код вызывающий функцию hendler, при возникновении события load(onload). Следует быть только особо внимательным при использовании attevent, её необходимо устанавливать после создания нового объекта изображения(new Image) и до указания свойства src объекта, иначе браузер Inernet Explorer не сможет перехватить событие onload. Далее в коде Вы увидите и поймёте, как нужно размещать функцию attevent.

Далее будет очень много пояснений относительно основных функций - lightbox() и bigimg(). Наиболее важной функций я считаю функцию bigimg(), так как она ответственна за получение объекта минизображения, хранящего необходимую информацию для создания увеличенной копии изображения и его центрирования и за само создание увеличенного изображения. Функция lightbox() важна в плане загрузки DOM, для того чтобы скрипт не начал обращаться к свойствам и методам объектов, расположенных на странице, до их загрузки.

Полный код функции bigimg:

  • Код
  • Чистый код
  1. ...
  2. function bigimg(e){
  3. // сокрытие элементов управления
  4. document.getElementById("next").style.display = "none";
  5. document.getElementById("prev").style.display = "none";
  6. document.getElementById("conteiner").style.display = "block";
  7. document.getElementById("comment").style.display = "none";
  8. document.getElementById("close").style.display = "none";
  9. // получение параметров для позициирования элементов управления внутри элемента с id = loader
10. var imb = document.documentElement.clientWidth;
11. var imbt = document.documentElement.clientHeight;
12. offset = document.scrollY || document.documentElement.scrollTop || document.body.scrollTop
13. var iml = document.body.clientWidth;
14. var centerimg = (imb/2) - (24/2);
15. var centerimgt = (imbt/2) - (24/2);
16. document.getElementById("loader").style.left = centerimg-12+"px";
17. document.getElementById("loader").style.top= offset + centerimgt-12+"px";
18. // отображение прогрессбара по центру body
19. document.getElementById("loader").style.display = "block";
20. // получение количества комментариев, находящихся внутри элемента div с целью их удаления
21. var comlen = document.getElementById("comment").childNodes.length;
22. for(i=0; i<comlen;i++)
23. {
24. document.getElementById("comment").removeChild(document.getElementById("comment").childNodes[i])
25. }
26. var setclass = document.getElementById("imgindex").childNodes.length;
27. for(i=0;i<setclass;i++)
28. {
29. if(document.getElementById("imgindex").childNodes[i].nodeType==1)
30. {
31. document.getElementById("imgindex").childNodes[i].removeAttribute("active");
32. }
33. }
34. e.setAttribute("active","active");
35. //удаление максимального изображения вместе с тенью
36. if(document.getElementById("shadow")){
37. document.body.removeChild(document.getElementById("shadow"))
38. document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))
39. }
40. // создание атрибута src для максимального изображения
41. // регулярное изображение удаляет символы _s из аттрибута src миниизображения
42. var regxp = /_s/i;
43. var esrc = e.src.replace(regxp,"");
44. // проверка существования максимального изображения
45. // если false, то просто создаём новое максимальное изображение
46. if(!document.getElementById('bigimg')){
47. var newim = new Image();
48. // обработчик загрузки изображения
49. attevent(newim,e)
50. newim.src = esrc;
51. }
52. // на всякий случай - если true, то создаём новое максимальное изображение и удаляем старое максимальное изображение
53. else {
54. document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))
55. var newim = new Image();
56. attevent(newim)
57. newim.src = esrc;
58. }
59. }
60.

        

Изначально следует код скрывающий элементы управления, но делающий видимым элемент div с id conteiner:

  • Код
  • Чистый код
  1. ...
  2. // сокрытие элементов управления
  3. document.getElementById("next").style.display = "none";
  4. document.getElementById("prev").style.display = "none";
  5. document.getElementById("conteiner").style.display = "block";
  6. document.getElementById("comment").style.display = "none";
  7. document.getElementById("close").style.display = "none";
  8.

        

После него следует код ответственный за центрирование прогрессбара, центрирование происходит за счёт вычислений его положения на основе параметров высоты и ширины элемента body и установления соответсвующих свойств (document.getElementById("loader").style.left и document.getElementById("loader").style.top).

  • Код
  • Чистый код
  1. ...
  2. // получение параметров для позициирования элементов управления внутри элемента с id = loader
  3. var imb = document.documentElement.clientWidth;
  4. var imbt = document.documentElement.clientHeight;
  5. offset = document.scrollY || document.documentElement.scrollTop || document.body.scrollTop
  6. var iml = document.body.clientWidth;
  7. var centerimg = (imb/2) - (24/2);
  8. var centerimgt = (imbt/2) - (24/2);
  9. document.getElementById("loader").style.left = centerimg-12+"px";
10. document.getElementById("loader").style.top= offset + centerimgt-12+"px";
11. // отображение прогрессбара по центру body
12. document.getElementById("loader").style.display = "block";
13.

        

Предыдущие комментарии должны быть удалены при переходе к новому изображению:

  • Код
  • Чистый код
  1. // получение количества коментариев, находящихся внутри элемента div с целью их удаления
  2. var comlen = document.getElementById("comment").childNodes.length;
  3. for(i=0;<comlen;i++)
  4. {
  5. document.getElementById("comment").removeChild(document.getElementById("comment").childNodes[i])
  6. }
  7.

        

Переменная setclass харнит количество миниизображений на странице, данное значение необходимо для установления цикла отыскивающего минизображение с атрибутом active, который тут же удаляется из данного минизображения. Данный атрибут необходим для определения минизображения на котором произошло событие click с тем, чтобы перемещаться от него к слеующему или предыдущему изображениям, с помощью элементов управления (кнопок next и prev).

  • Код
  • Чистый код
  1.var setclass = document.getElementById("imgindex").childNodes.length;
  2. for(i=0;i<setclass;i++)
  3. {
  4. if(document.getElementById("imgindex").childNodes[i].nodeType==1)
  5. {
  6. document.getElementById("imgindex").childNodes[i].removeAttribute("active");
  7. }
  8. }
  9. e.setAttribute("active","active");
10.

        

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

  • Код
  • Чистый код
  1. //удаление максимального изображения вместе с тенью
  2. if(document.getElementById("shadow")){
  3. document.body.removeChild(document.getElementById("shadow"))
  4. document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))
  5. }
  6.

        

"Сердце" Lightbox - из ранее переданного в функцию bigimg объекта минизображения мы извлекаем нужную нам для создания нового изображения информацию. С помщью регулярного выражения мы получаем аттрибут src увеличенного изображения, недостаток и приемущетсво такокого метода в необходимости создавать миниизображение с добавлением символов "_s" и увеличиваемое изображение без этого символа, но src должен остаться таким же. Например минизображение mini_s.jpg, тогда увеличиваемое изображение должно быть mini.jpg

  • Код
  • Чистый код
  1.// создание аттрибута src для максимального изображения
  2. // регулярное изображение удаляет символы _s из аттрибута src миниизображения
  3. var regxp = /_s/i;
  4. var esrc = e.src.replace(regxp,"");
  5. // проверка существования максимального изображения
  6. // если false, то просто создаём новое максимальное изображение
  7. if(!document.getElementById('bigimg')){
  8. var newim = new Image();
  9. // обработчик загрузки изображения
10. attevent(newim,e)
11. newim.src = esrc;
12. }
13. // на всякий случай - если true, то создаём новое максимальное изображение и удаляем старое максимальное изображение
14. else {
15. document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))
16. var newim = new Image();
17. attevent(newim)
18. newim.src = esrc;
19. }
20. }
21.

        

Вот мы и добрались до тех строчек о котрых я предупреждал Вас ранее, о том, что функция attevent долна вызываться именно до установления атрибута src, если вы хотит чтобы событе правильно обрабатывалось в Internet Explorer, в Mozila это не принципиально, но не в Internet Explorer.

  • Код
  • Чистый код
  1....
  2. var newim = new Image();
  3. // обработчик загрузки изображения
  4. attevent(newim,e)
  5. newim.src = esrc;
  6. ...
  7.

        

Немаловыжным является следующий код:

  • Код
  • Чистый код
  1. ...
  2.// для миниизображений необходим следующий цикл, привязывающий событие onclick к каждому
  3.// из миниизображений и запускающий при его возникновении оснвоную функцию - bigimg
  4. for(i=0;<document.getElementsByTagName("IMG").length;i++)
  5. {
  6. if(document.getElementsByTagName("IMG")[i].className=='mini')
  7. {
  8. document.getElementsByTagName("IMG")[i].onclick=function(){
  9. bigimg(this)
10. }
11. }
12. }
13. ...
14.

        

В нём мы спомощью цикла привязываем к событию onclick функцию обработчик, выполняющий функцию bigimg(this), таким образом для всех мини изображений мы создали обработчик события onclick.

Следующий код не влияет на функциональность, он лишь добавляет стиль к минизображениям.

  • Код
  • Чистый код
  1. // дополнение, которое не является обязательным, а создаёт лишь стиль для миниизображений
  2. for(i=0;i<document.getElementsByTagName("IMG").length;i++)
  3. {
  4. if(document.getElementsByTagName("IMG")[i].className="mini")
  5. {
  6. document.getElementsByTagName("IMG")[i].style.border="white solid 5px";
  7. }
  8. }
  9.

        

Функции mouseoverhandler() и mouseouthandler() отображают и скрывают элементы управления - кнопки next и prev

  • Код
  • Чистый код
  1. // функция обработчик запускаемая при возникновении события mouseout
  2. // функция необходима для отображения элементов управления - кнопок next (prev)
  3. function mouseoverhandler(){
  4. var next = document.getElementById("next");
  5. var cont = document.getElementById("conteiner");
  6. next.style.display = "block";
  7. next.style.left=cont.clientWidth-65+"px";
  8. next.style.top=(cont.clientHeight/2)-16+"px";
  9. var prev = document.getElementById("prev");
10. prev.style.display = "block";
11. prev.style.left="0px";
12. prev.style.top=(cont.clientHeight/2)-16+"px";
13. }
14. // функция обработчик запускаемая при возникновении события mouseover
15. // функция необходима для сокрытия элементов управления - кнопок next (prev)
16. function mouseouthandler(){
17. var next = document.getElementById("next");
18. next.style.display = "none";
19. var prev = document.getElementById("prev");
20. prev.style.display = "none";
21. }
22.

        

Остальной код создаёт элементы lightbox на странице:

  • Код
  • Чистый код
  1. divconteiner = document.createElement("div");
  2. divconteiner.id = 'conteiner';
  3. document.body.appendChild(divconteiner);
  4. divcomment = document.createElement("div");
  5. divcomment.id = 'comment';
  6. document.getElementById("conteiner").appendChild(divcomment);
  7. divclose = document.createElement("div");
  8. divclose.id = 'close';
  9. document.getElementById("conteiner").appendChild(divclose);
10. document.getElementById("close").onclick=delshadow;
11. divprev = document.createElement("div");
12. divprev.id = 'prev';
13. document.getElementById("conteiner").appendChild(divprev);
14. document.getElementById("prev").onclick=previmg;
15. divnext = document.createElement("div");
16. divnext.id = 'next';
17. document.getElementById("conteiner").appendChild(divnext);
18. document.getElementById("next").onclick=nextimg;
19. divloader = document.createElement("div");
20. divloader.id = 'loader';
21. document.body.appendChild(divloader);
22.

        

Мы уже встречались ранее с кроссбраузерным обработчиком событий, они позволяет при наведении отображать элементы управления, а при удалении за пределы элемента скрывают те же элементв:

  • Код
  • Чистый код
  1. var elem = document.getElementById("conteiner");
  2. if (elem.addEventListener){
  3. elem.addEventListener("mouseout", mouseouthandler, false)
  4. elem.addEventListener("mouseover", mouseoverhandler, false)
  5. } else {
  6. elem.attachEvent("onmouseout", mouseouthandler)
  7. elem.attachEvent("onmouseover", mouseoverhandler)
  8. }
  9.

        

С помощью функций nextimg() и previmg() происходит перемещение при нажатии на кнопки next и prev. Основной принцип такой с помощью цикла мы отыскиваем текущее миниизображение и, далее, с помощью методов nextSibling и previousSibling определяем есть ли далее или сзади в структуре DOM минизображения, если есть то переходим к соответсвующему минизображению:

  • Код
  • Чистый код
  1.function nextimg()
  2. {
  3. var setclass = document.getElementById("imgindex").childNodes.length;
  4. for(i=0;i<setclass;i++)
  5. {
  6. if(document.getElementById("imgindex").childNodes[i].nodeType==1)
  7. {
  8. if(document.getElementById("imgindex").childNodes[i].getAttribute("active"))
  9. {
10. var e = document.getElementById("imgindex").childNodes[i];
11. }
12. }
13. }
14. if(e.nextSibling!==null && e.nextSibling.nodeType==1)
15. {
16. bigimg(e.nextSibling)
17. }
18. else if(e.nextSibling.nextSibling!==null && e.nextSibling.nextSibling.nodeType==1)
19. {
20. bigimg(e.nextSibling.nextSibling)
21. }
22. }
23. function previmg()
24. {
25. var setclass = document.getElementById("imgindex").childNodes.length;
26. for(i=0;i<setclass;i++)
27. {
28. if(document.getElementById("imgindex").childNodes[i].nodeType==1)
29. {
30. if(document.getElementById("imgindex").childNodes[i].getAttribute("active"))
31. {
32. var e = document.getElementById("imgindex").childNodes[i];
33. var index = i;
34. }
35. }
36. }
37. if(e.previousSibling!==null && e.previousSibling.nodeType==1)
38. {
39. bigimg(e.previousSibling)
40. }
41. else if(index !==0 && e.previousSibling.previousSibling!==null && e.previousSibling.previousSibling.nodeType==1)
42. {
43. bigimg(e.previousSibling.previousSibling)
44. }
45. }
46.

        

На этом функция lightbox завершена. Остальной код определяет функцию delshadow():

  • Код
  • Чистый код
  1. function delshadow(){
  2. if(document.getElementById("shadow")){
  3. document.getElementById("next").style.display = "none";
  4. document.getElementById("prev").style.display = "none";
  5. document.body.removeChild(document.getElementById("shadow"))
  6. //удаление максимального изображения вместе с тенью
  7. document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))
  8. // получение количества коментариев, находящихся внутри элемента div с целью их удаления
  9. var comlen = document.getElementById("comment").childNodes.length;
10. for(i=0;i<comlen;i++)
11. {
12. document.getElementById("comment").removeChild(document.getElementById("comment").childNodes[i])
13. }
14. // сокрытие элементов управления
15. document.getElementById("comment").style.display = "none";
16. var close = document.getElementById("close");
17. close.style.display = "none";
18. document.getElementById("conteiner").style.display = "none";
19. }
20. else return false
21. }
22.

        

Ранее были описаны аналогичные методы в функции bigimg(), основное отличие данной функции в том, что не происходит появление нового изображения, при нажатии кнопки close элементы управления скрываются (style.display = "none"), а само изображение удаляется(document.getElementById("conteiner").removeChild(document.getElementById('bigimg'))).

На этом описание Lightbox без фреймовика завершено, полный код вы можете получить здесь.


Александр Ермаков