diff --git a/js/main.js b/js/main.js
index 50f9477..02af6f3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,15 @@
 import './util.js';
 import {createPhotoList} from './data.js';
-import {renderThumbnails} from './render-thumbnails.js';
+import {renderThumbnails, pictures} from './render-thumbnails.js';
+import {openFullPicture} from './open-full-picture.js';
 
-console.log(createPhotoList());
-console.log(renderThumbnails());
+pictures.addEventListener('click', (evt) => {
+  const currentPicture = evt.target.closest('picture');
+
+  if (currentPicture) {
+    openFullPicture(currentPicture.dataset.pictureId);
+  }
+});
+
+console.log(createPhotoList);
+console.log(renderThumbnails);
diff --git a/js/open-full-picture.js b/js/open-full-picture.js
new file mode 100644
index 0000000..b75db79
--- /dev/null
+++ b/js/open-full-picture.js
@@ -0,0 +1,44 @@
+import {isEscapeKey} from './util.js';
+import {pictures} from './render-thumbnails.js';
+import {createComment} from './data.js';
+
+const closeButton = document.querySelector('.big-picture__cancel');
+const commentsList = document.querySelector('.social__comments');
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeFullPicture();
+  }
+};
+
+const onClickButtonClose = (evt) => {
+  evt.preventDefault();
+  closeFullPicture();
+};
+
+
+const openFullPicture = (pictureId) => {
+  const currentPhoto = pictures.find((photo)) => photo.id === Number(pictureId);
+
+  document.querySelector('body').classList.add('modal-open');
+    document.querySelector('.big-picture').classList.remove('hidden');
+    document.querySelector('.big-picture .big-picture__img img').src = photo.url;
+    document.querySelector('.likes-count').textContent = photo.likes;
+    document.querySelector('.social__comment-shown-count').textContent = photo.comments.length;
+    document.querySelector('.social__caption').textContent = photo.description;
+    document.addEventListener('keydown', onDocumentKeydown);
+    closeButton.addEventListener('click', onClickButtonClose);
+  };
+
+
+function closeFullPicture() {
+  document.querySelector('.big-picture').classList.add('hidden');
+  document.querySelector('.social__comment-count').classList.add('hidden');
+  document.querySelector('.comments-loader').classList.add('hidden');
+  document.querySelector('body').classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+export {openFullPicture, closeFullPicture};
+
diff --git a/js/render-thumbnails.js b/js/render-thumbnails.js
index 95ed049..533c61b 100644
--- a/js/render-thumbnails.js
+++ b/js/render-thumbnails.js
@@ -12,10 +12,11 @@ const renderThumbnails = () => {
 
   usersThumbnails.forEach((photo) => {
     const usersElement = thumbnailsTemplate.cloneNode(true);
+    usersElement.dataset.pictureId = photo.id;
     usersElement.querySelector('.picture__img').src = photo.url;
     usersElement.querySelector('.picture__img').alt = photo.description;
     usersElement.querySelector('.picture__likes').textContent = photo.likes;
-    usersElement.querySelector('.picture__comments').textContent = photo.comments.length;
+    usersElement.querySelector('.picture__comments').textContent = photo.comments;
     usersThumbnailsFragment.appendChild(usersElement);
   });
 
@@ -24,3 +25,4 @@ const renderThumbnails = () => {
 };
 
 export {renderThumbnails};
+export {pictures};
diff --git a/js/util.js b/js/util.js
index a6ae866..fb60e19 100644
--- a/js/util.js
+++ b/js/util.js
@@ -12,4 +12,7 @@ const getRandomInteger = (a, b) => {
   };
 };
 
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
 export {getRandomInteger};
+export {isEscapeKey};