Дублирование картинки!
Добрый день! Нужна ваша помощь, подскажите пожалуйста, нужно сделать ряд картинок, при нажатии на которые, крупные их копии появляются в новом 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? :help: |
Aleksandr Chirkov,
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
});
|
Блин Рони спасибо! Я на это пол дня убил!! Буду читать мат часть!
|
А можно ещё вопрос. Допустим я сделаю ещё один 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...и.т.д
};
Правильно я двигаюсь или есть вариант лучше? |
<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 |
| Часовой пояс GMT +3, время: 13:11. |