Эффект фото ленты 2 (разбор HR_PhotoLine.js) продолжение

Продолжим разбор остальных методов объекта HelpeR.
Следующий метод это lenta. Он отвечает за создание ленты с фото и их описаниями а так же за подключение эффекта HR_Blackout к фотографиям ленты.
Сначала создается сама лента это элемент div. Далее устанавливаются все его свойства.

this.lenta_DIV = document.createElement('div');
this.lenta_DIV.setAttribute('id','HR_lenta_DIV');
var i,c,z,pic_len = this.pics_array.length;
this.lenta_DIV.style.overflow = 'hidden';
this.lenta_DIV.style.width = (this.lenta_pics * parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * this.lenta_pics * 2 + 2) + 'px';

Помните про свойство overflow и ширину ленты, про которые я описывал в html версии фото ленты.
Далее в цикле создаются рисунки которые имею ссылки на большой вариант с массива ln_big_photos, а внутри объекта это массив this.pics_big_array.
Обратите внимание, что при создании ряда фотографий, учитывается сколько фото должно быть в ленте (свойство this.lenta_pics), как только количество достигает этой цифры, остальные фото получают значение margin-right с минусовым показателем, что бы фото ушло за ленту и ее не было видно. После проверяется подключен ли эффект HR_Blackout если да, то ссылка получает класс HR (это требуется для этого эффекта). И в конце цикла в ссылку вставляется рисунок как дочерний узел, а замет уже ссылка вставляется в див ленты. После полного окончания проверяется если включен эффект HR_Blackout, то он подгружаются и под конец весь этот див вставляется в центральную ячейку таблицы.

for(z=0; z < pic_len; z++) {
	  
	  (img = new Image()).src = this.pic_dir + this.pics_array[z];
	  for(var c in this.pic_params) {
	    eval("img.style." + c + " = '" + this.pic_params[c] + "';");
	  }
	  
	  if(z > this.lenta_pics - 1) {
	    img.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
	  }
	  
	  var ahref = document.createElement('a');
	  ahref.setAttribute('title',this.pics_title[z]);
	  ahref.setAttribute('target','_blank');
	  ahref.href = this.pic_dir + this.pics_big_array[z];
	    /* HR Blackout */
	  if(this.HR_Blackout) {
	    ahref.className = 'HR';
      }
	  /* HR Blackout */
	  ahref.appendChild(img);
	  this.lenta_DIV.appendChild(ahref);
	}
	
	if(this.HR_Blackout) {
	    document.write("<script language='javascript' src='" + this.HR_Blackout_src + "'><\/script>");
    }
	document.getElementById('HR_lenta_table').rows[0].cells[1].appendChild(this.lenta_DIV);

И в конце таким же образом создается див с описаниями фото. Каждое описание обрамляется дивом который получает свойства из объекта this.desc_params. Помните про свойство float для браузеров Mozilla и IE. И этот див тоже вставляется в центральную ячейку таблицы.
Теперь перейдем к разбору метода next и previous.
Next
Метод next начинается с проверки возможен ли еще клик по левой стрелки, т.е. имеются ли еще фото в ленте для прокрутки. Имеется переменная, которая изначально равна нулю this.pic_pos = 0; b и к ней прибавляется число которое должно присутствовать в ленте и это число должно быть меньше или равно числу всех имеющихся рисунков в ленте. Далее значение href ссылки присваивается пустота, что бы не возникали глюки если пользовательно начнет сто раз автоматной очередью кликать по стрелочке. Далее увеличение this.pic_pos происходит в методе move, т.к. это требуется вот для этой строки this.last_pic = this.pic_pos + this.lenta_pics; Здесь определяется тот рисунок, который должен появиться с правой стороны ленты. Далее определяется массив с рисунками которые существую в ленте и массив с описаниями рисунков для использования в методе move. И под конец вызывается сам метод move с аргументом left. И тоже самое касательно метода previous, только в ней идет все наоборот.

next : function() {
    if(this.pic_pos + this.lenta_pics <= this.pics_array.length - 1) {
	  document.getElementById('HR_link_left').href  = 'javascript:;';
	  document.getElementById('HR_link_right').href = 'javascript:;';
      this.last_pic = this.pic_pos + this.lenta_pics;
      this.lenta_imgs = document.getElementById('HR_lenta_DIV').getElementsByTagName('img');
	  this.titles = document.getElementById('HR_desc_DIV').getElementsByTagName('div');
	  this.timer = setTimeout("HR_lenta.move('left');", 1);
	}
  },
  
  previous : function() {
    if(this.pic_pos > 0) {
	  document.getElementById('HR_link_left').href  = 'javascript:;';
	  document.getElementById('HR_link_right').href = 'javascript:;';
	  this.pic_pos--;
      this.last_pic = this.pic_pos + this.lenta_pics;
      this.lenta_imgs = document.getElementById('HR_lenta_DIV').getElementsByTagName('img');
	  this.timer = setTimeout("HR_lenta.move('right');", 1);
	}
  },

А теперь перейдем к рассмотрению метода move. В первую очередь функция получает аргумент, который указывает в которую сторону должно происходить пролистывание. Затем для удобства я создал ссылки с короткими названиями для массивов. После проверяется которое направление задано аргументом и начинается увеличение margin'ов рисунков и описаний. Увеличение или уменьшение происходит со значением переменной this.step, которую определяет пользователь. Для эффекта движения функция вызывает сама себя до тех пор то пока рисунки не достигнут нужной позиции, а после таймер останавливается.

move : function(dir) {
  var first_pic   = this.lenta_imgs[this.pic_pos];
  var last_pic    = this.lenta_imgs[this.last_pic];
  var first_title = this.titles[this.pic_pos];
  var last_title  = this.titles[this.last_pic];
  
    if(dir == 'left') {
	  if(this.lenta_imgs[this.pic_pos].style.marginLeft) {
	    first_pic.style.marginLeft = (parseInt(first_pic.style.marginLeft) - this.step) + 'px';
		last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) + this.step) + 'px';
		
		first_title.style.marginLeft = (parseInt(first_title.style.marginLeft) - this.step) + 'px';
		last_title.style.marginRight = (parseInt(last_title.style.marginRight) + this.step) + 'px';
		
		if(Math.abs(parseInt(first_pic.style.marginLeft)) >= (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2)) {
		  first_pic.style.marginLeft = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
		  last_pic.style.marginRight = '0px';
		  
		  first_title.style.marginLeft = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
		  last_title.style.marginRight = '0px';
		  clearTimeout(this.timer);
		  this.pic_pos++;
		  document.getElementById('HR_link_left').href  = 'javascript:HR_lenta.next();';
	      document.getElementById('HR_link_right').href = 'javascript:HR_lenta.previous();';
		}
		else {
		  this.timer = setTimeout("HR_lenta.move('left')", this.speed);
		}
	  }
	  else {
	    first_pic.style.marginLeft = '-' + (this.step) + 'px';
		last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) + this.step) + 'px';
		
		first_title.style.marginLeft = '-' + (this.step) + 'px';
		last_title.style.marginRight = (parseInt(last_title.style.marginRight) + this.step) + 'px';
		this.timer = setTimeout("HR_lenta.move('left')", this.speed);
	  }
	}
	else if(dir == 'right') {
	  if(last_pic.style.marginRight) {
	    first_pic.style.marginLeft = (parseInt(first_pic.style.marginLeft) + this.step) + 'px';
		last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) - this.step) + 'px';
		
		first_title.style.marginLeft = (parseInt(first_title.style.marginLeft) + this.step) + 'px';
		last_title.style.marginRight   = (parseInt(last_pic.style.marginRight) - this.step) + 'px';
		
		if(Math.abs(parseInt(last_pic.style.marginRight)) >= (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2)) {
		  first_pic.style.marginLeft = '0px';
		  last_pic.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
		  
		  first_title.style.marginLeft = '0px';
		  last_title.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
		  clearTimeout(this.timer);
		  document.getElementById('HR_link_left').href  = 'javascript:HR_lenta.next();';
	      document.getElementById('HR_link_right').href = 'javascript:HR_lenta.previous();';
		}
		else {
		  this.timer = setTimeout("HR_lenta.move('right')", this.speed);
		}
	  }
	}
	else {
	  alert("Ошибка!\nДиректория не определена!");
	}
  }

Финал. Для старта всего того, что мы создали нам следует объявить объект HelpeR, далее при успешном создании самой таблицы вызвать создание ленты и эффект готов!

var HR_lenta = new HelpeR();
if(HR_lenta.table()) {
  HR_lenta.lenta();
}

Надеюсь, что эффект окажется полезным для вас. И если вы его решите использовать, всегда буду рад вашим отзывам!