Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.07.2017, 20:12
Интересующийся
Отправить личное сообщение для Aleksandr Chirkov Посмотреть профиль Найти все сообщения от Aleksandr Chirkov
 
Регистрация: 24.06.2017
Сообщений: 14

Дублирование картинки!
Добрый день! Нужна ваша помощь, подскажите пожалуйста, нужно сделать ряд картинок, при нажатии на которые, крупные их копии появляются в новом DIV.

Вот есть такой код;
<div class="window">
<img src="images/pictures/special1.jpg" alt="новая акция" id="newPic">
</div>


<div class="footerMain">
<img src="images/pictures/special1.jpg" alt="новая акция" id="special1" class="specialsPictures">
<img src="images/pictures/special2.jpg" alt="новая акция" id="special2" class="specialsPictures">
<img src="images/pictures/special3.jpg" alt="новая акция" id="special3" class="specialsPictures">
<img src="images/pictures/special4.jpg" alt="новая акция" id="special4" class="specialsPictures">
<img src="images/pictures/special5.jpg" alt="новая акция" id="special5" class="specialsPictures">
<img src="images/pictures/special6.jpg" alt="новая акция" id="special6" class="specialsPictures">
<img src="images/pictures/special7.jpg" alt="новая акция" class="specialsPictures">
<img src="images/pictures/special8.jpg" alt="новая акция" class="specialsPictures">
</div>


и есть обработчик:
$(".specialsPictures").click(function(){ 
$(".window").empty();
  ??
});


Я когда кликаю на одну из картинок, у меня срабатывает функция, которая убирает мою текущую картинку, как сделать так, чтобы подставлялась новая? Я хотел сделать что-то типо:
document.getElementById("window").scr = this.
Потому что, перед этим, я проверяю this (alertom) и у меня показывает, что передаётся HTML image, но только когда передаю this для src...он заменяется конечно, но на пустую картинку и я не могу понять, что конкретно передаёт this?
Ответить с цитированием
  #2 (permalink)  
Старый 25.07.2017, 20:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Aleksandr Chirkov,
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
});
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2017, 20:21
Интересующийся
Отправить личное сообщение для Aleksandr Chirkov Посмотреть профиль Найти все сообщения от Aleksandr Chirkov
 
Регистрация: 24.06.2017
Сообщений: 14

Блин Рони спасибо! Я на это пол дня убил!! Буду читать мат часть!
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2017, 14:12
Интересующийся
Отправить личное сообщение для Aleksandr Chirkov Посмотреть профиль Найти все сообщения от Aleksandr Chirkov
 
Регистрация: 24.06.2017
Сообщений: 14

А можно ещё вопрос. Допустим я сделаю ещё один div-элемент и в него добавлю описание. То как мне сделать, чтобы по клику, у меня изменялось сразу 2 элемента div. то есть для нужной картинки, добавлялось нужное описание? Я вообще не очень понимаю, как через JavaScript можно связывать элементы. Я понимаю, что есть параметр Id, но как сказать программе, что если выбрана такая картинка, то изменить остальные div-элементы с нужным содержимым, не знаю.

Предположу, что-то типо этого
<img src="путь/файл.jpg" id="первый">


var картинка = document.getElementById("первый").onclick = newFunc();

function newFunc(){
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
});
$(".описание1").append("<p>Описание</p><нужные тэги></нужные тэги>")
else if...и.т.д 
};

Правильно я двигаюсь или есть вариант лучше?

Последний раз редактировалось Aleksandr Chirkov, 29.07.2017 в 14:22.
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2017, 15:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
<head>
</head>
<body>
<div class="window">
<img src="images/pictures/special1.jpg" alt="новая акция" id="newPic">
<p>Описание</p>
</div>


<div class="footerMain">
<img src="images/pictures/special1.jpg" alt="новая акция" id="special1" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special2.jpg" alt="новая акция" id="special2" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special3.jpg" alt="новая акция" id="special3" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special4.jpg" alt="новая акция" id="special4" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special5.jpg" alt="новая акция" id="special5" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special6.jpg" alt="новая акция" id="special6" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special7.jpg" alt="новая акция" class="specialsPictures">
<img src="images/pictures/special8.jpg" alt="новая акция" class="specialsPictures">
</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
$(".window p").html(this.title);
});
	</script>
</body>
</html>
</body>
</html>


или же можно брать описание из alt или создать data-title
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Идентифицировать картинки MellDixX Общие вопросы Javascript 8 04.08.2013 18:16
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42