Как изменить значение data-атрибута?
Знаю, эта тема уже обсуждалась на этом форуме, но у меня ничего не получается.
В индексной странице загружается див с атрибутом data-image-src <div class="parallax" id="id1" data-speed="0.5" data-image-src="./images/slide-1.jpg" ></div> При помощи js хочу заменить это изображение на другое var new_img= document.getElementById("id1");
new_img.setAttribute("data-image-src", "./images/slide-2.jpg");
Если проверяю алертом, то получаю новое значение атрибута (slide-2.jpg) но сама картинка на странице не меняется. Почему так происходит? |
arkadii_parovozov,
... наверно потому, что плагину уже до фонаря на ваши манипуляции |
Цитата:
|
Не могу понять как запустить скрипт плагина(файл во вложении).
Сам плагин подключается к странице <script src="./js/parallax.min.js"></script> после чего по клику идет замена фонового изображения var new_img= document.getElementById("id1");
new_img.setAttribute("data-image-src", "./images/slide-2.jpg");
но ничего не получается. Пробовал даже выводить два блока с отдельными значениями data-image-src <div class="parallax" id="id1" data-speed="0.5" data-image-src="./images/slide-1.jpg" ></div> <div class="parallax" id="id1" data-speed="0.5" data-image-src="./images/slide-2.jpg" ></div> и по клику менять свойства display с none на block и обратно, но тоже ничего не выходит, блоки меняются а картинка нет. Не могу понять в чем дело... |
Цитата:
Цитата:
|
Цитата:
скрипт плагина инициализируйте после замены - как инициализировать такую конструкцию !function(t,i,e,s){
function o(i,e){
var h=this;"object"==typeof e&&(delete e.refresh,delete e.r .......
? И почему элемент удаляется при display none а его изображение перекидывается на следующий элемент, если плагину уже пофиг на все манипуляции? |
arkadii_parovozov,
вы бы хоть ссылку дали плагин и обьснили что хотите сделать? Цитата:
|
Плагин брал этот: http://pixelcog.github.io/parallax.js/
Но первый блок хочу сделать в виде слайдера, как здесь: https://livedemo00.template-help.com/joomla_51191/ никак, потому что по клику вы меняите html, а не данные в плагине (плагин всё что ему нужно собрал после своей загрузки) - так если он больше не работает после загрузки, то почему при смене свойства display с none на block и обратно при помощи js $("#id1").css("display","none");
$("#id2").css("display","block");
текст внутри блока меняется а картинка нет?<div class="parallax" id="id1" data-speed="0.5" data-image-src="./images/slide-1.jpg" >Текст 1</div> <div class="parallax" id="id2" data-speed="0.5" data-image-src="./images/slide-2.jpg" >Текст 2</div> |
Цитата:
$('#id1').parallax({imageSrc: './images/slide-2.jpg'});
|
Пробовал. При загрузке подставляется это значение, а при работе скрипта слайдера изображения не меняются
function nextSlide(slide){
currentSlide = slide;
if(currentSlide == 0 || currentSlide == 3)
{
currentSlide = 1;
$('#id1').parallax({imageSrc: 'images/slide-1.jpg'});
setTimeout(nextSlide.bind(null, 1), 4000);
}
else if(currentSlide == 1)
{
currentSlide = 2;
$('#id1').parallax({imageSrc: 'images/slide-2.jpg'});
setTimeout(nextSlide.bind(null, 2), 4000);
}
else
{
currentSlide = 3;
$('#id1').parallax({imageSrc: 'images/slide-3.jpg'});
setTimeout(nextSlide.bind(null, 3), 4000);
}
}
|
arkadii_parovozov,
как вариант добавить jQuery(window).trigger('resize').trigger('scroll');
в строки 9,17,25 |
Не помогло...
|
arkadii_parovozov, скрипт в самый низ страницы , индекс подобрать самостоятельно eq(3).
<script>
function nextSlide(slide){
currentSlide = slide;
if(currentSlide == 0 || currentSlide == 3)
{
currentSlide = 1;
$('.parallax-slider').eq(3).attr({src: 'http://bkpics.com/content/uploads/2016/04/253.jpg'});
setTimeout(nextSlide.bind(null, 1), 4000);
}
else if(currentSlide == 1)
{
currentSlide = 2;
$('.parallax-slider').eq(3).attr({src: 'http://fotooboi-ekb.ru/files/image/fotooboi_priroda_135369737.sm.jpg'});
setTimeout(nextSlide.bind(null, 2), 4000);
}
else
{
currentSlide = 3;
$('.parallax-slider').eq(3).attr({src: 'http://i.ucrazy.ru/files/i/2007.5.14/forestta.jpg'});
setTimeout(nextSlide.bind(null, 3), 4000);
}
}
nextSlide(1)
</script>
</body>
</html>
|
Спасибо большое! Для одного класса работает и без eq(). Я так понимаю что js просто ищет src у элемента и меняет его, или я вообще ничего не понимаю...
|
arkadii_parovozov,
тема и всё что в ней тихий ужас, когда нибудь и вы это поймёте, заработало и хорошо. |
Костыли! куда ж без них! :cray:
|
Цитата:
new_img.attr('data-image-src', './images/slide-2.jpg');
|
| Часовой пояс GMT +3, время: 02:32. |