Div con immagini a tempo?

03-08-2012, 23.14.56

Ciao ragazzi..

è da un po che cerco in giro come creare uno slideshow di immagini fatto da ZERO da me.. ma è un po un casino.. volevo scaricare flash.. fino a ieri ero convinto a scaricarlo ma ho letto che creando slide in flash , questi ultimi non vengono letti dagli iphone e dagli ipad.

ARRIVIAMO AL DUNQUE

volevo realizzare qualcosa di molto semplice e cioè:

-creare un div su foglio CSS da posizionare dove lo si vuole
-all'interno del div inserire un immagine che viene visualizzata che però dopo un tot di tempo (esempio 2 secondi) svanisce e appare un altra, oppure l'immagine n.1 va a sinistra e da destra entra l'immagine n.2 ...

però mi rendo conto che dovrei fare una gallery.. ma vorrei fare una cosa molto semplice con un div centrale e le immagini che cambiano ogni 2 secondi.. quindi ci vuole il javascript dove non sono molto pratico di comandi e codici..

che codice dovrei usare?? se magari mi fate un esempio.. potrebbe tornare utile a molti utenti..

una bella cosa semplice, leggera e leggibile dalla maggior parte dei browser o forse tutti :)

sotto a chi tocca :)

04-08-2012, 08.27.57

Tornerebbe molto utile anche a me, la cosa...
Io non ci capisco niente di javascript e sinceramente mi sarebbe sufficiente un semplice contatore ciclico (1, 2, ..., 10, 1, 2, ...) temporizzato (che richiamerà l'n-esima immagine) e possibilmente una funzione di preload dell'immagine n+1.
Per voi che mangiate js e jquery come niente dovrebbe essere un giochino...
Grazie se ci date una mano.

04-08-2012, 09.03.31

fatemi capire
io ho usato lo slideshow di altersito e sembra molto carino e sedmplice
ma quando lo vedo ....mi fa cliccare solo sulla prima immagine e poi si blocca
sapete per caso cosa succede?

04-08-2012, 11.35.24

Io più che scaricare cose.. volevo crearmelo DA ME.. una cosa molto semplice e veloce da leggere dal browser.. io fino a fare div con le immagini dentro.. (di tutti i tipi e in qualsiasi posizione) ci riesco.. ma vorrei farne 1 dove le immagini cambiano.. in pratica io dovrei creare sicuramente una cartella in altervista con le immagini da mettere nello slide.. e nel div dovrei dargli qualche comando in html e javascript dove richiama quelle immagini a tempo (ogni 2 secondi pesca un immagine diversa) solo che di javascript non ne capisco molto per questo volevo qualche consiglio..

In giro per i vari forum e siti ho controllato (ne ho controllati parecchi ma è un po un casino.. ho provato una procedura proprio ieri ma non funge) ve la ricopio.. forse sbaglio qualcosa io

__________________________________________________ ___________
CODICE HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PROVA SLIDESHOW IMMAGINI</title>

<link href="styleslideshow.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js_slideshow/jquery.scrollTo.js"></script>
<script src="js_slideshow/jquery.localscroll.js"></script>
<script src="js_slideshow/script_slideshow.js"></script>

</head>

<body>
<div id="slider">
<ul>
<li id="foto1"><img src="img1.jpg" width="800" height="533" alt="DSC_0641"></li>
<li id="foto2"><img src="img2.jpg" width="800" height="533" alt="DSC_0076"></li>
<li id="foto3"><img src="img3.jpg" width="800" height="533" alt="DSC_0616"></li>
<li id="foto4"><img src="img4.jpg" width="800" height="533" alt="DSC_0513"></li>
<li id="foto5"><img src="img5.jpg" widht="800" height="533" alt="DSC_0480"></li>
</ul>
</div>

<div id="slider-menu">
<ul>
<li><a href="#foto1">Sky ULURU</a></li>
<li><a href="#foto2">My teddy bear</a></li>
<li><a href="#foto3">Sidney Opera House</a></li>
<li><a href="#foto4">A motore e a vela</a></li>
<li><a href="#foto5">Il vento gonfia le vele</a></li>
</ul>
</div>
</body>
</html>
__________________________________________________ _____
CODICE CSS

#slider {
width: 800px; height: 533px;
overflow-x: scroll; overflow-y: hidden;
margin: 75px auto 50px auto;
-moz-box-shadow:0px 0px 33px #000000;
-webkit-box-shadow: 0px 0px 33px #000000;
box-shadow: 0px 0px 33px #000000;
}

#slider ul {
width: 4000px; list-style: none;
}

#slider ul li {
float: left;
}

#slider-menu {
width: 185px; margin: 0 auto 100px auto; visibility: hidden;
}

#slider-menu ul {
list-style:none;
}
#slider-menu ul li {
float: left;
}
#slider-menu ul li a {
display: block; width: 15px; height: 15px;
border:solid 1px #000000;
float: left; margin: 0 10px;
background-color: #fff; text-indent: -9999px;
}
#slider-menu ul li a:hover, #slider-menu ul li a.active {
background-color:#000000;
}

a {
outline: none;
}
a:focus {
background-color: #000000;
}
__________________________________________________ _________
CODICE JAVASCRIPT

$(document).ready(function() {
$("#slider").css("overflow", "hidden");
$("#slider-menu").css("visibility", "visible");
$("#slider-menu a[href=#foto1]").addClass("active");

$("#slider-menu").localScroll({
target:'#slider', axis: 'x'
});

$("#slider-menu a").click(function(){
$("#slider-menu a").removeClass("active");
$(this).addClass("active");
});

});
__________________________________________________ ________

non so provate voi e ditemi se vi funge.. forse avrò fatto un casino io a richiamare i fogli CSS e JAVASCRIPT esterni.. mi conviene forse fare un unico foglio e richiamare tutto li.. provate e fatemi sapere :)

04-08-2012, 11.47.03

Originalmente inviato da coreyx

Tornerebbe molto utile anche a me, la cosa...
Io non ci capisco niente di javascript e sinceramente mi sarebbe sufficiente un semplice contatore ciclico (1, 2, ..., 10, 1, 2, ...) temporizzato (che richiamerà l'n-esima immagine) e possibilmente una funzione di preload dell'immagine n+1.
Per voi che mangiate js e jquery come niente dovrebbe essere un giochino...
Grazie se ci date una mano.

Io una volta provai un codice per testo scorrevole e mi era venuta l'idea di provare quel codice applicandolo alle immagini.. in pratica ho ottenute delle immagini scorrevoli, che puoi farle anche a link.. (clicchi e ti entra in una nuova pagina) SOLO CHE visibilmente non è il massimo xD fa un po pena quell'effeto. è studiato per il testo non per le immagini..

se vuoi fare una prova il codice è questo:

<html>
<head>
</head>

<body>

<center>
<marquee bgcolor="#000000" loop=2 behavior=scroll direction=left height=15 width=700 scrollamount=3 scrolldelay=20>

<font color="#ffffff">TESTO</font>
</marquee>
</center>

</body>
</html>
__________________________________________________ ______
Ovviamente al posto di <font> metti <img src="LINK IMMAGINE">

o se non funge forse si fa con le liste
<ul>
<li><img src="LINK IMMAGINE 1"></li>
<li><img src="LINK IMMAGINE 2"></li>
ecc ecc
</ul>

forse fungeva in questo modo non ricordo perchè non lo faccio da mesi e mesi

era una cavolata che provai tempo fa xD il risultato però è pessimo.. però potrebbe essere utile per delle piccole pubblicità o delle scritte o link PICCOLI in posizioni strategiche della pagina :)

05-08-2012, 08.38.48

Grazie per la risposta, ma un'immagine scorrevole è un po' pochino come slideshow :-)
Ripeto: a me basterebbe un contatore temporizzabile ... Una cosa che parta da 1, dopo x secondi risponda 2, dopo x secondi risponda 3 e così via fino a un numero N. Se poi dopo x secondi torna al numero di partenza (1) meglio.
Poi sta uscita me la faccio diventare una variabile in php, la associo ad un'immagine dentro una cartella contenente le immagini e sono più che a posto. Mi va bene anche usare la libreria jquery anche se mi sembra -forse- un'esagerazione.

______________________________________

Ho trovato sta cosa qua...

Per comodità ricopio il codice corretto:

Codice:

<div style="text-align:center;"><img src="percorsoprimaimmagine.jpg" id="img"></div>
<script language="Javascript" type="text/javascript">
var secondi=1;
var num=0;
function CambiaImmagine() {
	var immagini=new Array();
	immagini[0]="percorsoprimaimmagine.jpg";
	immagini[1]="percorsosecondaimmagine.jpg";
	
	document.getElementById("img").src=immagini[num];
	num=(num+1>=immagini.length)?0:num+1;
	setTimeout("CambiaImmagine()",secondi*1000);
}	
CambiaImmagine();
</script>

Autore: funcool

Non l'ho testato...

05-08-2012, 17.50.13

Originalmente inviato da coreyx

Grazie per la risposta, ma un'immagine scorrevole è un po' pochino come slideshow :-)
Ripeto: a me basterebbe un contatore temporizzabile ... Una cosa che parta da 1, dopo x secondi risponda 2, dopo x secondi risponda 3 e così via fino a un numero N. Se poi dopo x secondi torna al numero di partenza (1) meglio.
Poi sta uscita me la faccio diventare una variabile in php, la associo ad un'immagine dentro una cartella contenente le immagini e sono più che a posto. Mi va bene anche usare la libreria jquery anche se mi sembra -forse- un'esagerazione.

______________________________________

Ho trovato sta cosa qua...

Per comodità ricopio il codice corretto:

Codice:

<div style="text-align:center;"><img src="percorsoprimaimmagine.jpg" id="img"></div>
<script language="Javascript" type="text/javascript">
var secondi=1;
var num=0;
function CambiaImmagine() {
	var immagini=new Array();
	immagini[0]="percorsoprimaimmagine.jpg";
	immagini[1]="percorsosecondaimmagine.jpg";
	
	document.getElementById("img").src=immagini[num];
	num=(num+1>=immagini.length)?0:num+1;
	setTimeout("CambiaImmagine()",secondi*1000);
}	
CambiaImmagine();
</script>

Autore: funcool

Non l'ho testato...

Quando trovo 1 minuto vedo se funge..

Se qualcuno ha già provato questo o altro lo dicaaaaaaaaaaaa almeno ci aiutiamo un po tutti :)

05-08-2012, 19.33.59

Originalmente inviato da coreyx

Grazie per la risposta, ma un'immagine scorrevole è un po' pochino come slideshow :-)
Ripeto: a me basterebbe un contatore temporizzabile ... Una cosa che parta da 1, dopo x secondi risponda 2, dopo x secondi risponda 3 e così via fino a un numero N. Se poi dopo x secondi torna al numero di partenza (1) meglio.
Poi sta uscita me la faccio diventare una variabile in php, la associo ad un'immagine dentro una cartella contenente le immagini e sono più che a posto. Mi va bene anche usare la libreria jquery anche se mi sembra -forse- un'esagerazione.

______________________________________

Ho trovato sta cosa qua...

Per comodità ricopio il codice corretto:

Codice:

<div style="text-align:center;"><img src="percorsoprimaimmagine.jpg" id="img"></div>
<script language="Javascript" type="text/javascript">
var secondi=1;
var num=0;
function CambiaImmagine() {
	var immagini=new Array();
	immagini[0]="percorsoprimaimmagine.jpg";
	immagini[1]="percorsosecondaimmagine.jpg";
	
	document.getElementById("img").src=immagini[num];
	num=(num+1>=immagini.length)?0:num+1;
	setTimeout("CambiaImmagine()",secondi*1000);
}	
CambiaImmagine();
</script>

Autore: funcool

Non l'ho testato...

L'ho appena provato in questo modo ma non mi funge... si vede solo la prima immagine senza passare alla seconda.. FORSE SBAGLIO QUALCOSA. copio il codice

<html>
<head>
<title>slideshow con javascript</title>
</head>

<body>

<div style="text-align:center;"><img src="C:\Documents and Settings\home\Desktop\slideshow\immagini\immagine1 .jpg" id="immagine1"></div>
<script language="Javascript" type="text/javascript">
var secondi=1;
var num=0;
function CambiaImmagine() {
var immagini=new Array();
immagini[0]="C:\Documents and Settings\home\Desktop\slideshow\immagini\immagine1 .jpg";
immagini[1]="C:\Documents and Settings\home\Desktop\slideshow\immagini\immagine2 .jpg";

document.getElementById("img").src=immagini[num];
num=(num+1>=immagini.length)?0:num+1;
setTimeout("CambiaImmagine()",secondi*1000);
}
CambiaImmagine();
</script>

</body>
</html>

05-08-2012, 20.02.11

provato (quello sopra, non il tuo) e funziona.
Nel tuo esempio non funziona sucuramente perché hai cambiato id="imm" con id="immagine1" e probabilmente anche perché nel nome dei file, prima del punto dell'estensione c'è uno spazio.

Discussione: Div con immagini a tempo?

LinkBack

Strumenti discussione

Display

Div con immagini a tempo?

slideshow di altersito

Regole di scrittura