Создание собственной галлереи
Часть II
Подключаем JavaScript
Лайтбокс
Мы создали галерею, но не выполнили все пункты требований к программе, которые определили в процессе планирования. Будем их выполнять.
Начнём с просмотра изображений в формате "на весь экран". Для этого используется функционал, именуемый лайтбоксом. В настоящее время лайтбоксы весьма распространены, и многие из них поддерживают весьма сложную функциональность: анимации, переходы, а также возможность воспроизводить видео и загружать содержимое посредством Ajax.
Наш лайтбокс будет крайне прост: при щелчке кнопкой мыши на любой ссылке, которая обладает классовым именем class в виде lightbox, на экране в том же окне будет появляться изображение, на файл с которым указывает ссылка. Данное изображение будет располагаться по центру экрана, а окружающие его области окажутся деактивированы и затемнены, что послужит визуальным индикатором.
Начнем с HTML-ссылок. Они будут обычными тегами, указывающими на файлы с изображениями, которые имеют классовое имя class в виде lightbox:
<а href "images/large/<?php echo $mainImage;?>" class="lightbox">pic</a>
Мы хотим, чтобы при выводе изображения остальной экран темнел. Как это сделать? Наиболее простой способ заключается в добавлении на веб-страницу большого элемента div, который по высоте и ширине будет таким же, как экран монитора. Это так называемый "оверлей", "поверхлежащий", если перевести с английского. Внутри этого элемента мы разместим еще один элемент div, в который загрузим изображение.
Стилистика оверлея довольно проста: 100 % в качестве значения для высоты и ширины, а также черный цвет для фона. Позднее мы изменим непрозрачность элемента с целью придания ему некоторой призрачности. Для position мы зададим значение fixed, чтобы зафиксировать элемент div на месте, если пользователь, к примеру, изменит размеры окна. Это прописывается в CSS-свойствах.
#lightbox_overlay {
position:fixed:
top:0:
left:0:
height:100%:
width:100%:
background:black url(loader.gif) no-repeat scroll center center:
}
#lightbox {
position:fixed;
}
Затем мы добавляем обработчик событий click к лайтбокс-ссылкам. На них, т.е. на лайтбокс-ссылки, необходимо будет щелкать кнопкой мыши. При этом мы добавим темный оверлейный элемент overlay, контейнер изображения и само изображение. Наличие контейнера для простого лайтбокса необязательно, однако он окажется кстати, когда вы захотите расширить функциональность лайтбокса, например добавить рамки, описания или кнопки Next (Далее) и Previous (Назад).
$('a.lightbox').click(function(e) {
// Скрыть полосы прокрутки!
$(’body'),css('overflow-y'. 'hidden');
$('<div id="overlay"></div>')
.css('top', '0')
.css('opacity', '0')
.animate({'opacity': '0.7'}, 'slow')
.appendTo('body');
$('<div id="lightbox"></div>')
.hide()
.appendTo('body');
function positionLightboxImage() {
var top = ($(document.body).height() - $('#lightbox').height()) / 4;
var left = ($(document.body).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top,
'left': left
})
.fadeIn();
} // конец функции positionLightboxImage()
$('<img>')
,attr('src'. $(this),attr('href'))
.load(function() {
positionLightboxImage();
})
.cliск(functiоп() {
removeLightbox();
})
.appendTo('#1ightbox');
return false;
});
Положение изображения в лайтбоксе расчитывает функция positionLightboxImage(). Здесь всё ясно, но необходимо сделать одно замечание. При расчёте значения переменной top я разделил разность между высотой доступного пространства в браузере и высотой картинки не на 2, что, казалось бы, было вполне логичным, а на 4 и изображение приподнялось. С позиционированием изображения в лайтбоксе разобрались, теперь следует определиться с размерами самого изображения. Примем во внимание, что дисплеи у всех разные, у кого-то современные большие, а у кого-то и не очень большие, и всё равно изображение на нём должно разместиться. Поэтому необходимо определить ширину и высоту свободного пространства в браузере пользователя. Затем нужно определить фактические размеры изображения. Для этого служит функция get_largeImgDimensions(). Свободным пространством в браузере займёмся несколько позже.
function get_largeImgDimensions(largeImg) {
// Браузер с поддержкой naturalWidth/naturalHeight
if (largeImg.naturalWidth!=undefined) {
return { 'real_width':largeImg.naturalWidth, // ширина изображения
'real_height':largeImg.naturalHeight, // высота изображения
'client_width':largeImg.width,
'client_height':largeImg.height
};
} // конец if
} // конец функции
Комментировать я её не буду, ибо здесь всё ясно: функция возвращает фактическую ширину и высоту большого изображения. А вот теперь требуется разместить без искажений наше изображение в прокрустовом ложе свободного пространства в браузере. Здесь нужно ясно представлять себе разницу между пространством на экране дисплея и пространством в окне браузера. Нас интересует пространство в окне браузера. Необходимо определить соотношение "ширина - высота" в окне браузера пользователя и сравнивать его с соотношением "ширина - высота" того изображения, которое мы намереваемся в браузере пользователя разместить, и сравнивать эти соотношения. Если соотношение "ширина - высота" нашего изображения меньше такового в браузере пользователя, значит это портретная ориентация, в противном случае – пейзажная. Для этого служит функция adjustLargeImg().
function adjustLargeImg() {
/* функция масштабирует выбранную картинку так, чтобы картинка
разместилась без искажений в отведённом для неё пространстве
1. определяет фактические размеры загружаемого изоображения
2. определяет ориентацию "портрет-пейзаж"
3. вычисляет соотношение "ширина - высота"загружаемого изоображения
4. вычисляет клиентские размеры изображения */
var screenWidth=document.documentElement.clientWidth; // ширина экрана
var screenHeight=document.documentElement.clientHeight; // высота экрана
var largeImg = document.getElementById('large_img');
var largeImgDim = get_largeImgDimensions(largeImg);
var screenRatio = screenWidth/screenHeight;
var rw = largeImgDim.real_width; // ширина загружаемого изображения
var rh = largeImgDim.real_height; // высота загружаемого изображения
var ratio = rw/rh;
if(ratio < screenRatio){ //портретная ориентация
largeImg.height = screenHeight*0.96; // устанавливается фиксированная высота
var height = parseInt(largeImg.height);
var width = parseInt(height*ratio); // вычисляется требуемая ширина
largeImg.width = width.toString();
largeImg.height = height.toString();
return { 'clientWidth':largeImg.width, // высота изображения
'clientHeight':largeImg.height // ширина изображения
};
}
else //пейзаж
{
largeImg.width = screenWidth*0.96;; // устанавливается фиксированная ширина
var width = parseInt(largeImg.width);
var height = width/ratio; // вычисляется требуемая высота
largeImg.width = width.toString();
largeImg.height = height.toString();
return { 'clientWidth':largeImg.width, // высота изображения
'clientHeight':largeImg.height
};
}
}// конец функции adjustLargeImg
Каждая строка прокомментирована, всё должно быть ясно. Я чуть уменьшил размеры изображения для размещения в окне браузера, чтобы видно было, что ничего не подрезается. Вы можете этого не делать.
Навигация средствами Java Script
Реализовано это следующим образом. Всё, что касается выбранного для просмотра для просмотра комплекта изображений (пути к изображениям, заголовки, описания) сохраняется в браузере. Но для такого сохранения всё это нужно передать из РНР в Java Script. За это отвечает следующий ниже фрагмент кода.
<!--передача переменных в javascript-->
<script type="text/javascript">
var currentPage = '<?php echo $curPage; ?>';
var totalPictures = '<?php echo $totalPix; ?>';
var totalDesc = '<?php echo json_encode($row_total); ?>';
var mainImCapt = '<?php echo json_encode($total_caption); ?>';
var selpicture = '<?php echo substr($mainImage, 0,8); ?>';
selpicture = selpicture+"\.jpg";
var largeImage = '\./large/'+selpicture;
var mainImage = 'images/medium/'+selpicture;
</script>
Этот код должен размещаться в файле gallary.php.
Я разместил его перед закрывающим тегом body.
Переменные в этом фрагменте имеют следующий смысл
currentPage – текущая страница изображений;
totalPictures – общее количество изображений на текущей странице;
totalDesc – все описания изображений на текущей странице;
mainImCapt– заголовок главного изображения, которое отображается в настоящий момент ;
selpicture – имя выбранного для просмотра изображения;
largeImage – путь к большому изображению, которое будет отображаться в лайтбоксе;
mainImage – путь к выбранному для просмотра изображению.
Значения переменных в браузер переданы. Теперь следует вернуться в файл gallary.js и заняться функционалом навигационных стрелок справа и слева от основного изображения.
// функционал правой стрелки
$('#rightarraw img, #leftarraw img').fadeOut( 0); //скрываем обе стрелки
if(index!=index_final) {$('#rightarraw img').fadeIn( 0);} //показываем правую стрелку
if(index!=index_primary) {$('#leftarraw img').fadeIn( 0);} //показываем левую стрелку
$('#rightarraw img').click(function(e) { //клик на правую стрелку
e.preventDefault();//отменяем поведение по умолчанию
if('selectedPicture') {//если это выбранное изображение, рисуем рамочку
$('.imgborder').removeClass("imgborder");
('#gallery td').eq(index+1).addClass('imgborder');
}
$('#mainpicture p img').animate({'opacity' : '0'}, speed); //скрываем текущее изо-
бражение
$('#leftarraw img').fadeIn(speed); //показываеем левую стрелку
if(index+1==index_final) {$('#rightarraw img').fadeOut( 0);} //скрываем правую стрелку,
//если последний элемент
setTimeout(function() {
var new_src = $('#thumbs a img').eq(index+1).attr('src'); //получаем путь для
следующей миниатюры картинки
var newPicture = new Array();
newPicture = new_src.split('/');
var newSrc = newPicture[1]; //новый путь для главного изображения правой стрелки
newSrc = "images/medium/"+newSrc; //новый путь для следующей картинки сформирован
var newHref = "images/large/"+newPicture[1]; //новый путь для следующей картинкки
в lightbox сформирован
var newAlt = $('#thumbs a img').eq(index+1).attr('alt'); //получаем атрибут alt для следующей
картинки
var new_figcaption = new_totalDesc[index+1][0].photo_desc; //формируем новое описание
var new_caption = new_mainImCapt[index+1][0].photo_name; //формируем новый заголовок
$('#mainpicture>a').attr('href', newHref).animate({'opacity' : '1'}, speed);
//подставляем новый путь в lihgtbox
$('#mainpicture p img').attr('src', newSrc).animate({'opacity' : '1'}, speed);
//подставляем новый путь и делаем картинку видимой
//изменяем get параметры url
var arUrl = window.location.search.split('&');
arUrl[0] = arUrl[0].slice(1);
var arr=[];
$.each(arUrl,function(i,elem){ arr[i] = elem.split('=');});
var newUrl = arr[0][0]+'='+newPicture[1]+'&'+arUrl[1];
newUrl = window.location.pathname+'?'+newUrl;
history.pushState('', '', newUrl); //конец "изменяем get параметры"
var el = document.getElementById('main_img');
if (el.complete) {adjustImg(el);
}
// Ожидаем загрузки изображения
else {
el.onload=function(event) {
event=event || window.event;
var el=event.target || event.srcElement;
adjustImg(el);
};
}
$('#mainpicture p img').attr('alt', newAlt).animate({'opacity' : '1'}, speed);
//подставляем новый alt
$('#main_image figcaption').html(new_caption); //подставляем новый заголовок
$('#main_image #figdesc').html(new_figcaption); //подставляем новое описание
index = index+1;}, speed); //меняем index на номер следующей картинки
}) //конец функионала правой стрелки
Строк получилось много. Но это ещё полбеды. Беда в том, что всё это нужно повторить для левой стрелки. И всё из-за индекса: ведь его для левой стрелки нужно уменьшать. Я долго думал о том, как здесь можно было бы сократить код, и ни до чего хорошего не додумался.
Почти каждая строка прокомментирована, так что трудностей быть не должно. Но возникает вопрос, зачем нужно менять get-параметры в url?
Как упоминалось ранее, всё необходимое для смены главного изображения, было сохранено в браузере, и при смене главного изображения с помощью боковых стрелок обращения к серверу не происходит. Мы перемещаемся по сохранённым в браузере данным и выбираем нужные по мере надобности. В адресной строке при этом никаких изменений не происходит, и если мы захотим обновить отображение галереи, то браузер вернёт нас к тому состоянию, которое существовало в момент последней передачи get-параметров, т.е. к тому url, который записан в адресной строке. Для того, чтобы этого не происходило, get-параметры необходимо привести в актуальное состояние.
Ниже приводится полный код файла gallary.js.
Файл gallery.js
window.onload = function(e){
// Это функционал лайтбокса
$(document).ready(function(){
$('a.lightbox').click(function(e){
$('body').css('overflow-y', 'hidden'); // скрыть полосы прокрутки !
$('<div id="overlay"></div>') //оверлей
.css('top', '0')
.css('opacity', '0')
.animate({'opacity': '0.7'}, 'slow')
.appendTo('body');
$('<div id="lightbox"></div>')
.hide()
.appendTo('body');
function positionLightboxImage() {
var top = ($(document.body).height() - $('#lightbox').height()) / 14;
var left = ($(document.body).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top,
'left': left
})
.fadeIn();
} // конец функции positionLightboxImage
$('<img id = "large_img">') //Это собственно лайтбокс
.attr('src', $(this).attr('href'))
.load(function() { //загрузка большой картинки
var largeImg = document.getElementById('large_img');
var largeImgDim=get_largeImgDimensions(largeImg); //сохраняем размеры
var ImgWidth = largeImgDim.real_width; // ширина большого изображения
var ImgHeight = largeImgDim.real_height; // высота большого изображения
adjustLargeImg(largeImg);
positionLightboxImage(largeImg);
})
.click(function() {
removeLightbox();//выход из лайтбокса
})
.appendTo('#lightbox');
return false;
}); //конец функционала клика
}); //конец лайтбокса
function get_largeImgDimensions(largeImg) {
// Браузер с поддержкой naturalWidth/naturalHeight
if (largeImg.naturalWidth!=undefined) {
return { 'real_width':largeImg.naturalWidth, // ширина изображения
'real_height':largeImg.naturalHeight, // высота изображения
};
} // конец if
} // конец функции
function adjustLargeImg() {
/* функция масштабирует выбранную картинку так, чтобы картинка
разместилась без искажений в отведённом для неё пространстве
1. определяет фактические размеры загружаемого изоображения
2. определяет ориентацию "портрет-пейзаж"
3. вычисляет соотношение "ширина - высота"
4. вычичляет клиентские размеры изображения */
var screenWidth=document.documentElement.clientWidth; // ширина экрана
var screenHeight=document.documentElement.clientHeight; // высота экрана
var largeImg = document.getElementById('large_img');
var largeImgDim = get_largeImgDimensions(largeImg);
var screenRatio = screenWidth/screenHeight;
var rw = largeImgDim.real_width; // ширина загружаемого изображения
var rh = largeImgDim.real_height; // высота загружаемого изображения
var screenRatio = screenWidth/screenHeight;
var ratio = rw/rh;
if(ratio < screenRatio){ //портретная ориентация
largeImg.height = screenHeight*0.96; // устанавливается фиксированная высота
var height = parseInt(largeImg.height);
var width = parseInt(height*ratio); // вычисляется требуемая ширина
largeImg.width = width.toString();
largeImg.height = height.toString();
return { 'clientWidth':largeImg.width, // высота изображения
'clientHeight':largeImg.height // ширина изображения
};
}
else //пейзаж
{
largeImg.width = screenWidth*0.96; // устанавливается фиксированная
ширина
var width = parseInt(largeImg.width);
var height = width/ratio; // вычисляется требуемая высота
largeImg.width = width.toString();
largeImg.height = height.toString();
return { 'clientWidth':largeImg.width, // высота изображения
'clientHeight':largeImg.height // ширина изображения
};
}
}// конец функции adjustLargeImg
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
$('body').css('overflow-y', 'auto'); // отобразить полосы прокрутки!
});
}
// Это отображение стрелок
$(document).ready(function(){
$('#leftarraw img').mouseover(function() {
$('#leftarraw img').animate({'opacity' : '1'}, 250);});
$('#leftarraw img').mouseout(function()
{$('#leftarraw img').animate({'opacity' : '0.3'}, 150);});
$('#rightarraw img').mouseover(function()
{$('#rightarraw img').animate({'opacity' : '1'}, 250);});
$('#rightarraw img').mouseout(function()
{$('#rightarraw img').animate({'opacity' : '0.3'}, 150);});
// определяем вспомогательные переменные
var speed = 0; //задержка при смене изображений
var index = $('#gallery #thumbs .imgborder').index('td');//получаем индекс те-
кущего элемента
var index_primary = 0; //назначаем индекс первого элемента - эта строка, если
отсчёт с нуля
var index_final = $('#gallery #thumbs .picture').size()-1; //получаем индекс
последнего элемента
var total_index_final = totalPictures-1; //получаем индекс последнего элемента
var oldImg = $("#mainpicture p img");//запоминаем отображаемую картинку
var clickedImg = $(".imgborder>a").attr('href');
var selectedImg = new Array();
selectedImg = clickedImg.split('?');
var selectedPicture = selectedImg[1];
var selPicture = selectedPicture.split('&');
var selectedPre = selPicture[0].split('=');
var selected = './images/medium/'+selectedPre[1]; //Выбранная картинка
var new_totalDesc = JSON.parse(totalDesc);//Получаем массив с описаниями
var new_mainImCapt = JSON.parse(mainImCapt); //Получаем массив с заголовками
//Функция для получения размеров изображения
function get_dimensions(el) {
// Браузер с поддержкой naturalWidth/naturalHeight
if (el.naturalWidth!=undefined) {
return { 'real_width':el.naturalWidth, // ширина изображения
'real_height':el.naturalHeight, // высота изображения
'client_width':el.width,
'client_height':el.height };
}
}; // конец функции get_dimensions
function adjustImg(el) {
/* функция масштабирует выбранную картинку так, чтобы картинка
разместилась без искажений в отведённом для неё пространстве
1. определяет фактические размеры загружаемого изоображения
2. определяет ориентацию "портрет-пейзаж"
3. вычисляет соотношение "ширина - высота"
4. вычичляет клиентские размеры изображения */
var tmp=get_dimensions(el);
var rw = tmp.real_width; // ширина загружаемого изображения
var rh = tmp.real_height; // высота загружаемого изображения
var ratio = rw/rh;
if(ratio > 2.1){
el.width = "910"; // устанавливается фиксированная ширина
var width = parseInt(el.width);
var height = width/ratio; // вычисляется требуемая высота
el.height = height.toString();
}
else {
el.height = "450"; // устанавливается фиксированная высота
var height = parseInt(el.height);
var width = parseInt(height*ratio); // вычисляется требуемая ширина
el.width = width.toString();
}
};// конец функции adjustImg
//это функционал правой стрелки
$('#rightarraw img, #leftarraw img').fadeOut( 0); //скрываем обе стрелки
if(index!=index_final) {$('#rightarraw img').fadeIn( 0);} //показываем правую стрелку
if(index!=index_primary) {$('#leftarraw img').fadeIn( 0);} //показываем левую стрелку
$('#rightarraw img').click(function(e) { //клик по правой стрелке
e.preventDefault();
if('selectedPicture') {
$('.imgborder').removeClass("imgborder");
$('#gallery td').eq(index+1).addClass('imgborder');
}
$('#mainpicture p img').animate({'opacity' : '0'}, speed); //скрываем текущее изображение
$('#leftarraw img').fadeIn(speed); //показываеем левую стрелку
if(index+1==index_final) {$('#rightarraw img').fadeOut( 0);} //скрываем правую стрелку,
//если элемент последний
setTimeout(function() {
var new_src = $('#thumbs a img').eq(index+1).attr('src'); //получаем путь для
//следующей миниатюры картинки
var newPicture = new Array();
newPicture = new_src.split('/');
var newSrc = newPicture[1]; //новый путь для главного изображения правой стрелки
newSrc = "images/medium/"+newSrc; //новый путь для следующей картинки сформирован
var newHref = "images/large/"+newPicture[1]; //новый путь для следующей
//картинки lightbox сформирован
var newAlt = $('#thumbs a img').eq(index+1).attr('alt'); //получаем атрибут alt
//для следующей картинки
var new_figcaption = new_totalDesc[index+1][0].photo_desc; //формируем новое описание
var new_caption = new_mainImCapt[index+1][0].photo_name; //формируем новый заголовок
$('#mainpicture>a').attr('href', newHref).animate({'opacity' : '1'}, speed);
//подставляем новый путь в lihgtbox
$('#mainpicture p img').attr('src', newSrc).animate({'opacity' : '1'}, speed);
//подставляем новый путь и делаем картинку видимой
//изменяем get параметры url
var arUrl = window.location.search.split('&');
arUrl[0] = arUrl[0].slice(1);
var arr=[];
$.each(arUrl,function(i,elem){
arr[i] = elem.split('=');
});
var newUrl = arr[0][0]+'='+newPicture[1]+'&'+arUrl[1];
newUrl = window.location.pathname+'?'+newUrl;
history.pushState('', '', newUrl);
var el = document.getElementById('main_img');
if (el.complete) {
adjustImg(el);
}
// Ожидаем загрузки изображения
else {
el.onload=function(event) {
event=event || window.event;
var el=event.target || event.srcElement;
adjustImg(el);
};
}
$('#mainpicture p img').attr('alt', newAlt).animate({'opacity' : '1'}, speed);
//подставляем новый alt
$('#main_image figcaption').html(new_caption); //подставляем новый заголовок
$('#main_image #figdesc').html(new_figcaption); //подставляем новое описание
index = index+1;}, speed); //меняем index на номер следующей картинки
}) //конец функионала правой стрелки
//это функционал левой стрелки
$('#leftarraw img').click(function(e) { //клик по левой стрелке
e.preventDefault();
if('selectedPicture') {
$('.imgborder').removeClass("imgborder");
$('#gallery td').eq(index-1).addClass('imgborder');
}
$('#mainpicture p img').animate({'opacity' : '0'}, speed); //скрываем текущее изображение
$('#rightarraw img').fadeIn(speed); //показываеем правую стрелку
if(index-1==index_primary) {$('#leftarraw img').fadeOut( 0);} //скрываем левую
стрелку, если первый элемент
setTimeout(function() {
var new_src = $('#thumbs a img').eq(index-1).attr('src'); //получаем путь для
предыдущей картинки
var newPicture = new Array();
newPicture = new_src.split('/');
newSrc = newPicture[1];
newSrc = "images/medium/"+newSrc; //новый путь для предыдующей картинки сформирован
newHref = "images/large/"+newPicture[1]; //новый путь для предыдующей картинки
lightbox сформирован
var newAlt = $('#thumbs a img').eq(index-1).attr('alt'); //получаем атрибут alt
для предыдующей картинки
var new_figcaption = new_totalDesc[index-1][0].photo_desc; //формируем новое описание
var new_caption = new_mainImCapt[index-1][0].photo_name; //формируем новый заголовок
$('#mainpicture>a').attr('href', newHref).animate({'opacity' : '1'}, speed);
//подставляем новый путь в lihgtbox
$('#mainpicture p img').attr('src', newSrc).animate({'opacity' : '1'}, speed);
//подставляем новый путь и делаем картинку видимой
//изменяем get параметры url
var arUrl = window.location.search.split('&');
arUrl[0] = arUrl[0].slice(1);
var arr=[];
$.each(arUrl,function(i,elem){
arr[i] = elem.split('=');
});
var newUrl = arr[0][0]+'='+newPicture[1]+'&'+arUrl[1];
newUrl = window.location.pathname+'?'+newUrl;
history.pushState('', '', newUrl);
var el = document.getElementById('main_img');
if (el.complete) {
adjustImg(el);
}
// Ожидаем загрузки изображения
else {
el.onload=function(event) {
event=event || window.event;
var el=event.target || event.srcElement;
adjustImg(el);
};
}
$('#mainpicture p img').attr('alt', newAlt).animate({'opacity' : '1'}, speed);
//подставляем новый alt
$('#main_image figcaption').html(new_caption); //подставляем новый заголовок
$('#main_image #figdesc').html(new_figcaption); //подставляем новое описание
index = index-1;}, speed); //меняем index на номер предыдующей картинки
}) //конец функионала левой стрелки
});
}
Всё. А ведь получилось! Есть повод сплясать качучу, выпить чашечку кофе, а то и стаканчик-другой пива. Более крепкие напитки не рекомендую.
Резюме
Не боги горшки обжигают. Дерзайте, и пусть вам всегда сопутствует удача!
Комментарии
Форма для добавления комментария отображается только авторизованным пользователям. Для того, чтобы добавить комментарий, необходимо авторизоваться.