JavaScript для инфоблока Битрикс

[lena vereschagina]

Я правда вовсе не уверена, что битрикс тут играет хоть какую роль, т.к. по мне дело в том, что я до этого с джаваСкрипт вообще не виделась.

Имеются 2 пхп файла, призванные выводить на экран линию фоток с прокруткой (она как раз на JS).

Скрипты там идентичные (громоздско конечно, но здесь я так понимаю, файлы прикрепить низя):

<STYLE type="text/css">
	TABLE#ftl{
	  height:auto;
	  width:auto;
	  border:0 none;
	}
	TABLE#ftl TD.ftl_left, TABLE#ftl TD.ftl_right{
	  width:9px;
	  color:#000;
	  cursor:pointer;
	  vertical-align: top!important;
	  text-align: center!important;

	}
   TABLE#ftl TD.ftl_left DIV{height:83px;background: #922b25;vertical-align:top; padding-top: 74px;}
   TABLE#ftl TD.ftl_right DIV{height:83px;background: #922b25;vertical-align:top; padding-top: 74px;}

  TABLE#ftl TD.ftlspace{font-size:4px; width:4px;}

	DIV#fotoline{height:auto; vertical-align:top!important; width:<?=$WIDTH?>px; background-color:#000; text-align:left!important;}
	DIV#fotoline2{ cursor:pointer; vertical-align:top!important;  height:auto; width:<?=$WIDTH?>px; overflow:hidden;}
	TABLE#fototable{width:auto; vertical-align:top!important; height:auto; border:0;}
	TABLE#fototable TR TD.m{vertical-align:middle!important; width:auto; height:auto; text-align:center; color:#fff;}
	DIV.bgline{ vertical-align:middle!important; line-height:0; font-size:0; height:135px; width:3px; background:url(<?=$IMGPATH?>/bgline.gif) repeat-y left top; margin-left:4px; margin-right:4px;}
</STYLE>
<SCRIPT type="text/javascript">
	var moving = false;
	var currentPicture = 1;
	var startScroll = 0;
	var endScroll = 0;
	var scrollInterval = null;
	var stepScroll = <?=$SPEED?>; //это поменять, чем больше число, тем больше скорость, не должно быть меньше единицы!

	function moveScroll(){
		moving = true;
		var cv = document.getElementById("fototable").clientWidth-<?=$WIDTH?>;
		for (i=1; i<=stepScroll; i++){
			if (startScroll>=endScroll){ clearInterval(scrollInterval);moving = false;	return};
			startScroll++; 
			if (startScroll>=cv){
				endScroll=startScroll;
				clearInterval(scrollInterval);
				moving = false;	
				return;
			}			
			document.getElementById("fotoline2").scrollLeft = startScroll;
		}
	}

	function moveScrollBack(){
		moving = true;
		var cv = document.getElementById("fototable").clientWidth-<?=$WIDTH?>;
		for (i=1; i<=stepScroll; i++){

			if (startScroll<=endScroll){ clearInterval(scrollInterval);moving = false;return};
			startScroll--; 

			document.getElementById("fotoline2").scrollLeft = startScroll;
		}
	}

	function prevPicture(){
		if (moving) return;	

		var TDnodes = document.getElementById("fototable").getElementsByTagName("td");
		var elementScroll = 0;
		var ImgCounter = 0;

		if (currentPicture>1)
			currentPicture--;

		for (var td=0, TDlength = TDnodes.length; td<TDlength; td++){
			var IMGnodes = TDnodes[td].getElementsByTagName("img");
			elementScroll += TDnodes[td].clientWidth;
			if (IMGnodes.length>0){
				ImgCounter++;
				if (ImgCounter==currentPicture){

						endScroll = elementScroll-<?=$WIDTH?>/2-IMGnodes[0].clientWidth*0.5;
						if (endScroll<0) endScroll = 0;

						scrollInterval = setInterval("moveScrollBack()", 1);
						break;

				}

			}

		}



	}

	function nextPicture(){
		if (moving) return;

		if ((startScroll+stepScroll)>=(document.getElementById("fototable").clientWidth-<?=$WIDTH?>) )
			return;



		var TDnodes = document.getElementById("fototable").getElementsByTagName("td");
		var elementScroll = 0;
		var ImgCounter = 0;

		for (var td=0, TDlength = TDnodes.length; td<TDlength; td++){
			var IMGnodes = TDnodes[td].getElementsByTagName("img");
			if (IMGnodes.length>0){
				if (ImgCounter>=currentPicture){

					if (elementScroll>(<?=$WIDTH?>/2-IMGnodes[0].clientWidth/2)){
						endScroll = 
parseInt(elementScroll-<?=$WIDTH?>/2+IMGnodes[0].clientWidth/2);
						scrollInterval = setInterval("moveScroll()", 1);
						break;
					}					
				}
				ImgCounter++;
			}
			elementScroll += TDnodes[td].clientWidth;
		}

		if ((document.getElementById("fotoline2").scrollLeft)>=(document.getElementById("fototable").
clientWidth-<?=$WIDTH?>) )
		{
			currentPicture = 0; 
			document.getElementById("fotoline2").scrollLeft=0;
			startScroll=0; 
			endScroll=0;
		}

		currentPicture++;	


	}

</SCRIPT>

Далее очень странно, пишем вывод фоток на экран, используя инфоблок фотогалерея:

<?
	$items = GetIBlockElementList($IBLOCK_ID, $SECTION_ID, $arOrder, $COUNT);
?>

<?foreach($arResult["SECTIONS"] as $arSection):?>
	<h3><?=$arSection["NAME"]?></h3>


<!--Вставка-->
<table cellspacing="0" cellpadding="0" id="ftl">
	<tr>
		<td class="ftl_left" onClick="prevPicture();"><div><img src="<?=$IMGPATH?>/aleft.gif" alt="">
</div></td>
		<td class="ftlspace"> </td>
		<td>
	<!-- !!!!!!!!!!!!Вот ЗДЕСЬ<div id="fotoline">
		<div id="fotoline2" onClick="nextPicture();">ВС?!!!!!!!!!!!!!!-->
<table border="0" cellpadding="0" cellspacing="0" id="fototable">
<?foreach($arSection["ROWS"] as $arItems):?>
<tr>

<?foreach($arItems as $arItem):?>
<?if(is_array($arItem)):?>
<?if(is_array($arItem["PICTURE"])):?>



<TD class="m"><DIV class="bgline"> </DIV></TD>
<TD class="m"><img border="0" src="<?=$arItem["PICTURE"]["SRC"]?>" width="<?=$arItem["PICTURE"]["WIDTH"]?>"
 height="<?=$arItem["PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["PICTURE"]["DESCRIPTION"]?>" 
title="<?=$arItem["NAME"]?>" />




</td>

<?endif?>
<?endif?>

<?endforeach?>
<TD class="m"><DIV class="bgline"> </DIV></TD>
</tr>
<?endforeach?>

</table>

</div>
</div>

</td>

<td class="ftlspace"> </td>
<td class="ftl_right" onClick="nextPicture();"><div>
<img src="<?=$IMGPATH?>/aright.gif" alt=""></div></td></tr></table>

<?endforeach?>

Ну вот, если эти два ДИВа убрать, фотки показываются, но не прокручиваются (это понятно, ДИВы нужны скриптам), но если дивы НЕ УБИРАТЬ, то фотки показываться НЕ БУДУТ!!! почему?..... вопрос мне совершенно не понятен, но помоему дело не в битриксе и не в инфоблоках, т.к. в скриптах об них и не говорится (я могу ошибаться т.к. полный в этом чайник, но судя по коду-так.

на сайте есть страница, где не используются никакие инфоблоки, адреса фоток задаются на прямую и все работает:

http://www.osobastudio.ru/about/sorevnovan...ery+03+2008.php

наша же многострадальная страница выглядит так:

http://www.osobastudio.ru/about/sorevnovaniya/test.php

Если не сильно будете смеяться, а чем поможете, буду оч. благодарна

[ZoNT]

у меня все фотки показываются... Только прокручивать там нечего - они все вмещаются на экран вместе...

[homm]

Ужасный скроллер

[Иван Шумов]

1) поместите код в bb код форума

2) ZoNT есть что прокручивать.. если заметишь - без прокручивания страница не влазит на 1024

[ZoNT]

дык... Да, не догадался посмотреть на 1024...

[lena vereschagina]

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

А вот что мне с ним делать, это вопрос ...