Phatfusion: MultiBox

[maza]

http://www.phatfusion.net/multibox/

классная штука. Скачали. Разархивировали. Запускаем (..\MultiBox\multibox\index.htm)

Упс, не работает. Смотрим исходный код, видим:

<script type="text/javascript" src="../utils/overlay.js"></script>

понимаем, что файл этот лежит в этой же папке, меняем на:

<script type="text/javascript" src="overlay.js"></script>

обновляем стр. Опа, работает!! Чудесно!!!!

Опа, а как же ш разбить проигрываемые файлы на группы, к примеру, хотим отделить картинки от других файлов:

Чтобы при нажатии на картинку мы видели на экране "1 of 3" и стрелки "назад, вперед" чтобы ходили только по картинкам, а при нажатии, на другие файлы, соответственно, видели "1 of 9" и по стрелкам переходили к просмотру этих файлов. Как?

Открываем форум, ищем. О, нашли:

http://forum.phatfusion.net/viewtopic.php?...8775c74c7289f99

к сожалению ответа нет, ищем дальше....

находим:

http://forum.phatfusion.net/viewtopic.php?...8775c74c7289f99 (ответ №1)

и

http://forum.phatfusion.net/viewtopic.php?...8775c74c7289f99 (ответ №2)

Ну хорошо, попробовали эти советы\ответы как разгруппировать файлы.

Меняем:

		<script type="text/javascript">
			var box = {};
			window.addEvent('domready', function(){
				box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
			});
		</script>

на

		<script type="text/javascript">
			var box, box2 = {};
			window.addEvent('domready', function(){
				box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
				box2 = new MultiBox('bm', {descClassName: 'multiBoxDesc', useOverlay: true});
			});
		</script>

и разгруппируем как мы хотели, картинки отдельно, видео, музыка, хтмл - отдельно. Меняем:

  <a href="files/IMG_8966.jpg" id="mb1" class="mb" title="Image Title 1 (jpg)"><img src="files/tIMG_8966.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb1">This is my descrition text 1. It can support html.</div>

  <a href="files/IMG_6608.jpg" id="mb2" class="mb" title="Image Title 2 (jpg)"><img src="files/tIMG_6608.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb2">This is my descrition text 2. It can support html.</div>

  <a href="files/IMG_7210.jpg" id="mb3" class="mb" title="Image Title 3 (jpg)"><img src="files/tIMG_7210.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb3">This is my descrition text 3. It can support html.</div><br />

на

  <a href="files/IMG_8966.jpg" id="mb1" class="bm" title="Image Title 1 (jpg)"><img src="files/tIMG_8966.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb1">This is my descrition text 1. It can support html.</div>

  <a href="files/IMG_6608.jpg" id="mb2" class="bm" title="Image Title 2 (jpg)"><img src="files/tIMG_6608.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb2">This is my descrition text 2. It can support html.</div>

  <a href="files/IMG_7210.jpg" id="mb3" class="bm" title="Image Title 3 (jpg)"><img src="files/tIMG_7210.jpg" alt="" border="0" /></a>
  <div class="multiBoxDesc mb3">This is my descrition text 3. It can support html.</div><br />

(мы поменяли у тега <a> аттрибут class)

Вау! разгруппировалось! вроде бы все классно, а ннет!!! Смотрим в firebug какой код добавил на страницу java script:

а выходит, что при включенном этом overlay от Samuel Birch (пишу так, потому что мне в другой теме доказывали, что Самуель не мог такой скрипт написать и виноват только я) MultiBox создает div-слоя с одинаковыми id, что не есть хорошо.. + обратите внимание на высоту! правда проблемы с высотой это уже другой вопрос.

Больше всего волнует как избежать этого повторения слоёв. Тем более код абсолютно одинаковый генерируется: