[HTML][JavaScript]Płynne przejście zdjęć Opcje

[Kloc]

Siemanko, jak mogę uzyskać efekt płynnego przejścia pomiędzy obrazkami w galerii na stronie, bo po wgraniu na serwer ma efekt "przycinania" się?
Za zmianę odpowiada js, po wywołaniu funkcji onclick="change()".

[HTML] pobierz, plaintext 
background = new Array();
background[0] = 'obrazek.jpg';
background[1] = 'obrazek2.jpg'';
background[2] = 'obrazek3.jpg'';
background[3] = 'obrazek4.jpg'';
 
function change() {
	val = document.getElementById('ksztalt6');
	value = val.getAttribute('data-value');
	if(value < background.length - 1){
		id = ++value
		document.getElementById("ksztalt6").setAttribute('data-value', id);
	}
 
	else{
		document.getElementById("ksztalt6").setAttribute('data-value', 0);
	}
}
 
function show() {
	val = document.getElementById('ksztalt6');
	id = val.getAttribute('data-value');
	document.getElementById("top").style.backgroundImage  = 'url('+background[id]+')';
	document.getElementById("top").style.transition  = 'background-image 2s 0s';
}
[HTML] pobierz, plaintext 

Ten post edytował Kloc 25.06.2014, 13:01:22

[PrinceOfPersia]

możesz na początku dla każdego obrazka w background stworzyć nowy obiekt Image, cos takiego:

[JAVASCRIPT] pobierz, plaintext 
background.forEach(function(src) {
  var img = new Image;
  img.src = src;
});
[JAVASCRIPT] pobierz, plaintext 

to powinno ci załadować do cache przeglądarki dany obrazek, i tym sposobem szybciej będzie się ładował pozniej (ale zobacz, czy to jest o co ci chodzi)

edit:
tam dwa apostrofy masz niepotrzebnie:

[JAVASCRIPT] pobierz, plaintext 
background[3] = 'obrazek4.jpg''
[JAVASCRIPT] pobierz, plaintext 

az dziwne, że ci to działa, bo powinien krzyknąć błąd składni

Ten post edytował PrinceOfPersia 25.06.2014, 14:04:42

[Kloc]

Rozwiązałem to szybciej dodając opóźnienie w przejściu na 500ms. Mogłem sobie na to pozwolić bo to są backgroundy

[HTML] pobierz, plaintext 
document.getElementById("top").style.transition  = 'background-image 2s 500s';
[HTML] pobierz, plaintext 

Ale co innego z img. Jak można zrobić aby po kliknięciu img dostało opacity:0 i za chwilę przeskoczyło na 1 (przyciemniło się i za chwilę rozjaśniło) efekt na ok 2s
onclick wywołuje funkcję show()

[HTML] pobierz, plaintext 
 
function show(){
 
	document.getElementById("img1").style.opacity  = '0';
	document.getElementById("img1").src = img_gallery[id1];
        document.getElementById("img1").style.opacity  = '1';
 
}
[HTML] pobierz, plaintext 

w stylach mam zagnieżdżone

[HTML] pobierz, plaintext 
    #img1{
        transition:opacity 2s 0s;
    }
[HTML] pobierz, plaintext 

Efekt jest taki, że po kliknięciu nic się nie dzieje, a gdy usunę

[HTML] pobierz, plaintext 
document.getElementById("img1").style.opacity  = '1';
[HTML] pobierz, plaintext 

to znika i już się nie pojawia

Ten post edytował Kloc 25.06.2014, 18:29:07

[PrinceOfPersia]

lepiej zrób w CSS klasy, a potem dodawaj/zeruj klasy:

[CSS] pobierz, plaintext 
.klasa1 {
.....
}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
element.className = "klasa1"
...
element.className = "klasa2"
[JAVASCRIPT] pobierz, plaintext 

Ale co innego z img. Jak można zrobić aby po kliknięciu img dostało opacity:0 i za chwilę przeskoczyło na 1 (przyciemniło się i za chwilę rozjaśniło) efekt na ok 2s

możesz zamiast z tranzycji skorzystać z animacji CSS3 (google: animations CSS3), tam możesz ustawić ileś klatek kluczowych, zamiast tylko dwóch (jak przy transition)

[Kloc]

spróbuje z tym dodawaniem klas, a animacje już testowałem i wykonuje się ona tylko raz, a po ponownym kliknięciu już nie działa.

Z tymi klasami też coś nie działa :/ bo zawszę liczy się ostatnia dodana klasa.
Mógłby ktoś pokazać mniej więcej ja wykonać to przejście?

[HTML] pobierz, plaintext 
function show(){
 
	document.getElementById("img1").src = img_gallery[id1];
 
}
[HTML] pobierz, plaintext 

tu mam przykład- demo 6, ale nie potrafię go wdrożyć.
Musi to działać co kliknięcie i wywołanie funkcji, bez odświeżania strony.