Вторая программа "Сеньор Помидор" 25/25. Не могу пройти.

Курсы Знакомство с событиями
1

Помогите написать программу, не получается. Можете скинуть код рабочий для изучения?

2

Вроде ничего сложного. Когда писала, пользовалась инструкциями из упражнений 12-24.
Смотрите. Спрашивайте.
var pictures = [
‘gallery-tomato/tomato-red-large.jpg’,
‘gallery-tomato/tomato-yellow-large.jpg’,
‘gallery-tomato/tomato-strange-large.jpg’
];

var thumbnails = document.querySelectorAll(’.gallery__picture-preview’);
var fullPhoto = document.querySelector(’.full-picture’);

var addThumbnailClickHander = function (thumbnail, picture) {
thumbnail.addEventListener (‘click’, function() {
fullPhoto.src = picture
})
}

for (var i = 0; i < thumbnails.length; i++) {
addThumbnailClickHander (thumbnails[i], pictures[i])
}

3

Все понятно, понял теперь что к чему., благодарю

4

Не за что)
Обращайтесь.

5

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

копируйте на здоровье 
var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

var thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPicture = document.querySelector('.full-picture');

var addThumbnailClickHandler = function (thumbnail, photo) {
  thumbnail.addEventListener('click', function () {
    fullPicture.src = photo;
  });
};

for (var i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i], pictures[i]);
}
7

а если в цикле использовать let вместо var, то и замыкание не понадобиться))

через let 
const thumbnails = document.querySelectorAll('.gallery__picture-preview');
const fullPhoto = document.querySelector('.full-picture');

for (let i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = pictures[i];
  });
}
1 лайк
8

День добрый! Ребят, я правильно понимаю, что в цикле мы вызываем функцию addThumbnailClickHandler три раза, которая запоминает каждому Thumbnails[i] свой pictures[i].

В addThumbnailClickHandler мы устанавливаем обработчик событий на Thumbnail (которая равна Thumbnails[0], Thumbnails[1], Thumbnails[2]).

А после того, как мы нажимаем на какую-нибудь картинку в галерее, например, на Thumbnails[2], то большому фото присваивается путь этой же картинки, например, pictures[2].

Поправьте, если я не прав, а то немного трудновато для понимания. Спасибо.:sweat_smile:

var Thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPhoto = document.querySelector('.full-picture');

var addThumbnailClickHandler = function(Thumbnail, picture) {
  Thumbnail.addEventListener("click", function () {
    fullPhoto.src = picture;
  });
};

for (var i = 0; i < Thumbnails.length; i++) {
  addThumbnailClickHandler(Thumbnails[i], pictures[i]);
}
1 лайк
9

Да, всё верно.

1 лайк
10

Еее, спасибо. :grin:

1 лайк
11

Без всяких var’ов и дополнительных функций:

var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

let thumbnails = document.querySelectorAll('.gallery__picture-preview');
let fullPicture = document.querySelector('.full-picture');

thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    fullPicture.src = pictures[index];
  });
});
13

Ну здесь уже стрелочные функции, так-то. И Letы. Почти всё то же самое, только решение не по теории. Там не упоминались стрелочные функции.

14
Сводка 
var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

var galleryPicturePreviews = document.querySelectorAll('.gallery__picture-preview');
var fullPicture = document.querySelector('.full-picture');

var addThumbnailClickHandler = function (thumbnail, photo) {
  thumbnail.addEventListener('click', function () {
    fullPicture.src = photo;
  });
};

for (var i = 0; i < galleryPicturePreviews.length; i++) {
  addThumbnailClickHandler(galleryPicturePreviews[i], pictures[i]);
}
15

let pictures = [
‘gallery-tomato/tomato-red-large.jpg’,
‘gallery-tomato/tomato-yellow-large.jpg’,
‘gallery-tomato/tomato-strange-large.jpg’
];

let miniPictures = document.querySelector(’.gallery__picture-preview’);
let bigPictures = document.querySelector(’.full-picture’);

let openPicture = function (miniPicture, bigPicture) {
miniPicture.addEventListener(‘click’, function () {
bigPictures.src = bigPicture;
});
};

for (let i = 0; i < miniPictures.length; i++){
openPicture(miniPictures[i], pictures[i]);
};

народ подскажите пожалуйста, почему код не работает?

16 
var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

/* Техническое задание

Мяу! Нужно оживить галерею с фотографиями товаров.

В галерее есть миниатюры (элементы с классом 'gallery__picture-preview') и большое изображение (класс 'full-picture').

После клика по превью большая фотография должна поменяться. Большое изображение должно быть таким же, как и в миниатюре, только большего размера.

Пути к полноразмерным фотографиям находятся в массиве pictures. Порядок элементов в массиве такой же, как и порядок миниатюр в разметке.

*/
var preview;
var picture; 

var previews = document.querySelectorAll('.gallery__picture-preview');
console.log(preview);

var full = document.querySelector('.full-picture');
console.log(full);

var addWay = function (preview, picture) {
  preview.addEventListener("click", function() {
    full.src = picture;
    });
  };
  
for (let i =0; i < previews.length; i++)  {
  addWay(previews[i], pictures[i]);
  }
17 
// Получаю список мини изображений
var miniPicture = document.querySelectorAll('.gallery__picture-preview');
//Получаю большое изображние
var bigPicture = document.querySelector('.full-picture');



//Создаем функцию смены картинки
var ChangePic = function (photo, link) {
  //Добавляем слушатель по клику на первью
  photo.addEventListener('click', function() {
  //меняем ссылку большой фотографии
  bigPicture.src = link;
  });
};

//Перебираем все первью
for(let i = 0; i < miniPicture.length; i++) {
  // Передаем номер первью и ссылки
  ChangePic(miniPicture[i], pictures[i]);
  };
18 
let fullPicture = document.querySelector('.full-picture')
let preview = document.querySelectorAll('.gallery__picture-preview')

var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

function fullPictureUpdate (largeImage, smallImage) {
 smallImage.addEventListener('click', () => {
    fullPicture.src = largeImage;
    })
  return;
  }
  
for (let i = 0; i < pictures.length; i++) {
  fullPictureUpdate(pictures[i], preview[i]);
  }
19 
var pictures = [
  'gallery-tomato/tomato-red-large.jpg',
  'gallery-tomato/tomato-yellow-large.jpg',
  'gallery-tomato/tomato-strange-large.jpg'
];

var thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPhoto = document.querySelector('.full-picture');

var addThumbnailClickHandler = function (preview, picture) {
  preview.addEventListener('click', function () {
      fullPhoto.src = picture;
    })

};

for (var i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i], pictures[i])
};
20

Я попробовал через forEach вместо цикла for

var picturePreviews = document.querySelectorAll('.gallery__picture-preview');
var fullPicture = document.querySelector('.full-picture');

picturePreviews.forEach((preview, index) => {
  preview.addEventListener('click', () => {
    fullPicture.src = pictures[index];
  });
});

хотел использовать const вместо легаси var, но так задание не принимается