Galleria con trasizioni effetto dissolvenza

**Cinzy** · 13-04-2012, 16:52

Ho provato questo tutorial dalla rivista di web designer con i css3 e javascript.
Tutto funzionante ma qualcosa non mi è chiaro..
Al clic nella finestra del browser dovrebbe eseguire una transizione tra immagini con una dissolvenza (funzionante con Firefox) in uscita e l'entrata dell'immagine succcessiva.
Ecco cosa succede:
al caricamento della pagina appare la prima foto, al clic dalla prima passa alla successiva ma senza effetto dissolvenza. Successivamente al clic, dalla seconda immagine esegue la transizione con la dissolvenza in uscita e così si comporta per tutte le immagini successive e tutti i cicli successivi.
La mia domanda è: perchè l'effetto dissolvenza compare solo dalla seconda transizione in poi, non dovrebbe essere tutto uguale e inoltrer, ci sarebbe qualche modifica da apportare al codice per renderla uniforme?

Ecco il codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beautiful Food Photos Slideshow</title>
<script src="Slideshow.js"></script>
<link href="Slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="photo">
	<img id="one" >
	<img class="transparent" id="two" >
</div>
<div id="description"></div>
</body>
</html>

// JavaScript Document
var photos = [
	"images/Pears.jpg",
	"images/Salad.jpg",
	"images/Cauliflower.jpg"
];
var descriptions = [
	"Asian Pears",
	"Spinach Salad",
	"Romanesque Cauliflower"
];


var current = "one";
var photoIndex = 0;




function init(){
	var img = document.getElementById("one");
	img.src = photos[photoIndex];
	var div = document.getElementById("description");
	div.innerHTML = descriptions[photoIndex];
	
}

window.onload = init;

function transition() {
	
	photoIndex = photoIndex + 1;
	if (photoIndex >= photos.length) {
		photoIndex = 0;
	}
	var currentImg = document.getElementById(current);
	if (current == "one") {
		current = "two";
	} else {
		current = "one";
	}
	var newImg = document.getElementById(current);
	newImg.src = photos[photoIndex];
	var div = document.getElementById("description");
	div.innerHTML = descriptions [photoIndex];
	currentImg.setAttribute("class", "transparent");
	newImg.setAttribute("class", "");
}
window.onclick = transition;

@charset "utf-8";
/* CSS Document */
html,body,div.photo
{ width:100%; 
height:100%;
 padding:0px;
margin:0px;}
div.photo
{position:relative;}

img
{min-height:100%; 
min-width:100%;
width:auto; 
height:auto; 
position:fixed; 
top:0px; 
left:0px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

img.transparent
{opacity:0;}

div#description
{position:absolute;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:600%;
font-weight:bold;
color:#FFF;
text-shadow:1px 1px 3px #373737;
left:30px;
bottom:30px;}

**m4rko80** · 13-04-2012, 17:43

ciao, perche' initi che chiama su onload carica semplicemente un immagine:
function init(){
var img = document.getElementById("one");
img.src = photos[photoIndex];
var div = document.getElementById("description");
div.innerHTML = descriptions[photoIndex];

}

senza alcun effetto .

Quando clicchi chiama function transition() {... che cambia immagine con effetto

Non ho provato ma potresti provare a richiamare transition() al posto di init nell'onload
Probabilmente ti carica subito con effetto la seconda o prima. Al massimo modifiche il photoIndex = 0; che c'e' all' inizio con l'ultimo valore che hai.

**Cinzy** · 14-04-2012, 11:43

Ok grazie, ho capito
Ecco come ho modificato il codice:

codice:

var photos = [
	"images/Pears.jpg",
	"images/Salad.jpg",
	"images/Cauliflower.jpg"
];
var descriptions = [
	"Asian Pears",
	"Spinach Salad",
	"Romanesque Cauliflower"
];


var current = "one";
var photoIndex = 2;

function transition() {
		photoIndex = photoIndex + 1;
		if (photoIndex >= photos.length) {
		photoIndex = 0;
		}
		var currentImg = document.getElementById(current);
		if (current == "one") {
		current = "two";
		} else {
		current = "one";
		}
		var newImg = document.getElementById(current);
		newImg.src = photos[photoIndex];
		var div = document.getElementById("description");
		div.innerHTML = descriptions [photoIndex];
		currentImg.setAttribute("class", "transparent");
		newImg.setAttribute("class", "");
}
window.onclick = transition;
window.onload = transition;

Discussione: Galleria con trasizioni effetto dissolvenza

Strumenti discussione

Ricerca discussione

Visualizza

Galleria con trasizioni effetto dissolvenza

Permessi di invio