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

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, то что то можно изменить через него.

Плагин брал этот: 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);
	}
}