Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.52/21: Рейтинг темы: голосов - 21, средняя оценка - 4.52
0 / 0 / 0
Регистрация: 16.12.2016
Сообщений: 23
1

Динамическое изменение src у img

10.02.2017, 12:45. Показов 4129. Ответов 5
Метки нет (Все метки)

Имеем: несколько дивов(картинка 1)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="kap-show__list-item">
    <div class="kap-show__list-img">
        <a href="#"><img src="" alt="" class="list-img__foto"></a>
    </div>
    <div class="kap-show__list-text">
        <ul class="list-text__items">
            <li class="list-text__descr">Адрес: <span  class="list-text__items--brown">пл.Заводская д.12</span></li>
            <li class="list-text__descr">Помещение: <span  class="list-text__items--brown">Прихожая</span></li>
            <li class="list-text__descr">Дата: <span  class="list-text__items--brown">22.01.2016</span></li>
        </ul>
    </div>
</div>


Хочется при клике на каждую ссылку - картинку получать popup(картинка 2)



HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="kap-show__hidden-gallery  kap-show__gallery">
    <div class="kap-show__gallery-list">
            <img class="gallery-item" src="" alt="foto"  id="largeImg">
             <div class="gallery-list__review-block">
                  <h4 class="review-block__name">Валентина Фёдоровна Копчикова</h4>
                  <img src="http://fas.gov.ru/upload/structure/IMG_4633.JPG" alt="foto"  class="review-block__foto">
                  <p  class="review-block__text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свой щеке, текст они, правилами рекламных обеспечивает силуэт заглавных. Которой всеми, наш взобравшись взгляд океана, свою агентство вопроса переписали ручеек большой букв продолжил. Текстами продолжил, строчка путь всемогущая имеет это.</p>
             </div>
    <a class="gallery-item__close" href="#">  ✖ </a>
</div>
</div>


у которого динамически изменяется src картинки на тот, на которую я нажал, а так же параграф и заголовок подгружались тоже динамически.
0
Миниатюры
Динамическое изменение src у img   Динамическое изменение src у img  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.02.2017, 12:45
Ответы с готовыми решениями:

Изменения атрибута src при нажатие на img
Пытаюсь сделать чтобы при нажатие на картинку изменялась её путь (src). Вот код &lt;img id=&quot;like&quot;...

Не подгружать одну и ту же картинку (src одинаковый) несколько раз для каждого <img>
На странице есть несколько элементом &lt;img&gt; с одинаковым src. При этом с сервера исходное...

Изменение src у img
Добрый день, уважаемые гуру. У меня следующая проблема. На главной странице есть 9 изображений. У...

Jquery img src меняет значение не полностью
Здравствуйте. Написал свой кривой код для галереи. Но в процессе обнаружил, что, когда jquery...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
5
0 / 0 / 0
Регистрация: 16.12.2016
Сообщений: 23
10.02.2017, 12:46  [ТС] 2
Перепробовал всё, что можно)
Видимо, я совсем дуб.
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
10.02.2017, 13:14 3
Цитата Сообщение от slavaavals Посмотреть сообщение
Хочется при клике на каждую ссылку - картинку получать popup(картинка 2)
Javascript
1
2
3
4
document.addEventListener('click', function(e){
if(e.target.tagName !== 'IMG') return false;
alert(e.target.src)
})
0
0 / 0 / 0
Регистрация: 16.12.2016
Сообщений: 23
10.02.2017, 14:34  [ТС] 4
В смысле, чтобы src дива, точней картинки в диве, что выплывает - менялся на нужный.
0
28 / 28 / 23
Регистрация: 18.04.2015
Сообщений: 81
10.02.2017, 21:23 5
Присвойте элементам id, с помощью document.getElementById получите к ним доступ в коде, а затем с помощью setAttribute и innerText задавайте необходимые параметры. Пример:

CSS
1
2
3
4
img {
  width: 70px;
  height: 70px;
}
HTML5
1
2
3
4
5
6
7
8
<img class='clickable' src="http://5thdimension.org/magazine-files/009/dice-sm.jpg" title="Первая картинка"/>
<img class='clickable' src="http://www.stihi.ru/pics/2016/08/15/4531.jpg" title="Вторая картинка"/>
<img class='clickable' src="https://im3-tub-ru.yandex.net/i?id=311381baf539ca307c5da1cf425d4994&n=33&h=215&w=323" title="Третья картинка"/>
<br><br>
<div>
<h4 id='text'>Какой-то текст</h4>
<img id='image' src=""/>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
var imgClass = document.getElementsByClassName("clickable");
 
for (var i = 0; i < imgClass.length; i++) {
    imgClass[i].addEventListener('click', imageClick, false);
}
 
function imageClick(e) {
        document.getElementById('image').setAttribute('src', e.target.src);
      document.getElementById('text').innerText = e.target.title;
};
Пример на jsfiddle (нужно кликать по изображениям)
0
0 / 0 / 0
Регистрация: 16.12.2016
Сообщений: 23
14.02.2017, 09:53  [ТС] 6
А можно ли в этой же функции "подхватить" параграф скрытого отзыва, и заголовок с фото?


Допустим та же история +

HTML5
1
2
3
4
5
<div class="review">
   <img src="foto.jpg">
   <h2 class="name">Валентин Пельмешкин</h2>
   <p class="text">Отзыв</p>
</div>
Т.е. забрать src у изображения из галереи, поместив его во всплювающий блок + все вышележащие блоки?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.02.2017, 09:53

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Узнать значения атребута src всех тегов img со страници
Доброго времени суток форумчане, столкнулся я с очередной проблемой! Задача такая, нужно найти...

Как поменять <img src="https:// .jpg"> чтобы вместо картинки по ссылке отображался текст?
Как сделать чтобы по ссылке отображался текст, или пост, или блок с текстом не нажимая на ссылку? ...

Img src
хотел вставить картинку в html-документ и проблема появилась юзаю phpstorm проект user в папке...

Поменять src в img
Привет! В тексте есть строки вида &lt;img ... src=&quot;/images/image.png&quot; ... &gt; Нужно их преобразовать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.