Visualizzazione risultati 1 fino 9 di 9

Discussione: Div con immagini a tempo?

  1. #1
    Guest

    Question Div con immagini a tempo?

    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 :)

  2. #2
    Guest

    Predefinito

    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.

  3. #3
    Guest

    Predefinito slideshow di altersito

    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?

  4. #4
    Guest

    Predefinito

    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 :)

  5. #5
    Guest

    Predefinito

    Citazione Originalmente inviato da coreyx Visualizza messaggio
    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 :)
    Ultima modifica di Atuttogioco : 04-08-2012 alle ore 11.50.31

  6. #6
    Guest

    Predefinito

    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...
    Ultima modifica di coreyx : 05-08-2012 alle ore 14.49.24

  7. #7
    Guest

    Predefinito

    Citazione Originalmente inviato da coreyx Visualizza messaggio
    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 :)

  8. #8
    Guest

    Question

    Citazione Originalmente inviato da coreyx Visualizza messaggio
    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>

  9. #9
    Guest

    Predefinito

    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.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •