Как изменить значение data-атрибута?

[arkadii_parovozov]

Знаю, эта тема уже обсуждалась на этом форуме, но у меня ничего не получается.

В индексной странице загружается див с атрибутом 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,
... наверно потому, что плагину уже до фонаря на ваши манипуляции

[j0hnik]

arkadii_parovozov,
... наверно потому, что плагину уже до фонаря на ваши манипуляции
Он говорит скрипт плагина инициализируйте после замены!

[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 и обратно, но тоже ничего не выходит, блоки меняются а картинка нет. Не могу понять в чем дело...

[рони]

Пробовал даже выводить два блока
id уникально!!!
Не могу понять в чем дело... вам пробовали это обьяснить выше.

[arkadii_parovozov]

id уникально!!!
вам пробовали это обьяснить выше.

id уникально, там id2

скрипт плагина инициализируйте после замены - как инициализировать такую конструкцию !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,
вы бы хоть ссылку дали плагин и обьснили что хотите сделать?
как инициализировать такую конструкцию никак, потому что по клику вы меняите html, а не данные в плагине (плагин всё что ему нужно собрал после своей загрузки) , если у него есть api, то что то можно изменить через него.

[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>

[рони]

var new_img= document.getElementById("id1"); new_img.setAttribute("data-image-src", "./images/slide-2.jpg");
вместо этого попробуйте
$('#id1').parallax({imageSrc: './images/slide-2.jpg'});

[arkadii_parovozov]

Пробовал. При загрузке подставляется это значение, а при работе скрипта слайдера изображения не меняются 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]

Не помогло...

[рони]

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>

[arkadii_parovozov]

Спасибо большое! Для одного класса работает и без eq(). Я так понимаю что js просто ищет src у элемента и меняет его, или я вообще ничего не понимаю...

[рони]

arkadii_parovozov,
тема и всё что в ней тихий ужас, когда нибудь и вы это поймёте, заработало и хорошо.

[j0hnik]

Костыли! куда ж без них! :cray:

[StartGames]

new_img.setAttribute("data-image-src", "./images/slide-2.jpg");

просто нужно было сделать так:

new_img.attr('data-image-src', './images/slide-2.jpg');