Non so come integrare una slideshow di immagini

Frank10 · 30 Giu 2012

Ciao a tutti,
Sto impazzendo per poter trovare una slideshow (sarebbe carina anche quella stabilita di joomla per es) da integrare nel mio sito php/html. Ora ho trovato qualcosa di interessante qui:

Codice:

http://gabrieleromanato.com/2011/11/jquery-slideshow-automatico-con-dissolvenza/

Il fatto è che però non so come si fa ad inserire l'ultimo codice, quello var etc. Ho collegato infatti il css con la pagina html ma l'ultimo codice 1) che estensione gli devo dare? 2) Come lo collego alla pagina principale?

Grazie!

Paperino78 · 1 Lug 2012

Ciao, guarda anche io sono nuovo dell'ambiente, ma credo che il file di cui parli tu devi salvarlo con estensione js. Infatti nel codice ci sono le istruzioni sul FadeOut. Che poi è l'oggetto della discussione su quel sito. Lo inserisci nell'head sel tuo sito come ogni altro file js.

Ciao

Max 1 · 23 Lug 2012

Codice:

<!DOCTYPE html>
<html>
<head>
<title>jQuery: slideshow automatico con dissolvenza</title>
<meta charset="utf-8" />
<style type="text/css">
#slideshow {
	margin: 2em auto;
	width: 380px;
	height: 250px;
	position: relative;
	border: 5px solid #313131;
	overflow: hidden;
}

#slideshow-wrapper {
	width: 1520px;
	height: 250px;
	position: relative;
	background: #666;
}

#slideshow-wrapper img {
	width: 380px;
	height: 250px;
	float: left;
}
</style>
</head>

<body>

<div id="slideshow">
	<div id="slideshow-wrapper">
		<img src="1.jpg" alt="" />
		<img src="2.jpg" alt="" />
		<img src="3.jpg" alt="" />
		<img src="4.jpg" alt="" />
	</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var Slider = new function() {

	var index = -1;
	var wrapper = $('#slideshow-wrapper', '#slideshow');
	var images = $('img', wrapper);
	
	var slide = setInterval(function() {
	
		index++;
		
		if(index == images.length) {
		
			index = 0;
			
			images.fadeIn();
		
		}
		
		images.eq(index).fadeOut(2000);
	
	
	}, 2000);
	
	this.init = function() {
	
		slide();
	
	};

}();

$(function() {

	Slider.init();

});
</script>
</body>
</html>

Cerca

Cerca

Non so come integrare una slideshow di immagini

Frank10

Utente Attivo

Paperino78

Utente Attivo

Max 1

Super Moderatore

Discussioni simili