[CSS] Galleria immagini non funziona

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
Sto tentando di ricreare la galleria immagini di questo tutorial però nonostante abbia seguito alla lettera le istruzioni non funziona.

A me viene così:



HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <h1>Animated Photo Banner</h1>
            <p>An animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: no JavaScript!
            It also uses individual images inserted via HTML, not simply one long repeating CSS background. <a href="http://designshack.net/articles/css/infinitephotobanner/">Click here</a>
            to return to the tutorial on Design Shack.</p>
        </header>
        
        <!-- Each image is 350px by 233px -->
        <div class="photobanner">
            <img class="first" src="image-1.jpg" alt="" />
            <img src="image-2.jpg" alt="" />
            <img src="image-3.jpg" alt="" />
            <img src="image-4.jpg" alt="" />
            <img src="image-5.jpg" alt="" />
            <img src="image-6.jpg" alt="" />
            <img src="image-1.jpg" alt="" />
            <img src="image-2.jpg" alt="" />
            <img src="image-3.jpg" alt="" />
            <img src="image-4.jpg" alt="" />
        </div>
    </div>
</body>

</html>
Codice:
* {
            margin: 0;
            padding: 0;
        }
 
        body {
            <!-- src: http://subtlepatterns.com/?p=1045 -->
            background: url('dark_geometric.png');
        }
 
        #container {
            width: 1000px;
            overflow: hidden;
            margin: 50px auto;
            background: white;
        }
        
                            /*header*/

        header {
            width: 800px;
            margin: 40px auto;
        }
 
        header h1 {
            text-align: center;
            font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
 
        }
 
        header p {
            font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
            text-align: justify;
        }
 
                            /*photobanner*/
 
        .photobanner {
            height: 233px;
            width: 3550px;
            margin-bottom: 80px;
        }
        
        .photobanner img {
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .photobanner img:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
            cursor: pointer;
            -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        }
        
                            /*keyframe animations*/

        .first {
            -webkit-animation: bannermove 30s linear infinite;
            -moz-animation: bannermove 30s linear infinite;
            -ms-animation: bannermove 30s linear infinite;
            -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
        }
 
        @keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-moz-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-webkit-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-ms-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-o-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Cosa vuoi dire che a te le immagini si dispongono su due righe senza scorrere?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Ci viene difficile trovare l'errore perchè dovremmo seguire il tutorial creare una galleria e confrontare con la tua!
Ma non avendo le tue immagini il tuo js sarebbe un'impresa!
Invece sarebbe molto più semplice aiutarti se potessimo vedere la pagina e il comportamento online
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
No va bè evidentemente FF e IE mi si sono rincoglioniti, su fiddle funziona: https://jsfiddle.net/uo8had7u/6/
Non capisco è la stessa storia dei pallini della <ul> o_O

EDIT: se uso le immagini online va anche da me, che strano...
EDIT 2: trovato l'errore, c'era un "." di troppo nel nome del file CSS...:D
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Ma con IE ti va? Non credo c'è un errore nel tuo codice e anche nel codice in fifdle
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
Adesso va anche con IE. L'errore non era nel codice ma nel nome del file css, nel'html lo avevo linkato come "style.css" ma per sbaglio avevo aggiungto un "." di troppo nel nome del css (style..css). Mi è bastato togliere il punto di troppo per far combaciare il nome del css con quello nel'html et voilà...funziona alla perfezione. :D
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Qurllo del punto l'ho capito ma se tu guardi il tuo codice il file html5shiv.js penso non venga caricato e se per caso tu lo hai nella cartella e si carica non è inserito nel codice apposito per IE, perchè quel file .JS è un file che serve per alcune versioni di IE
 

marino51

Utente Attivo
28 Feb 2013
2.724
141
63
Lombardia
EDIT 2: trovato l'errore, c'era un "." di troppo nel nome del file CSS
sai che non lo vedo il punto di troppo nel codice che hai postato ....
HTML:
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>
ma con un atto di fede, ci credo
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
Qurllo del punto l'ho capito ma se tu guardi il tuo codice il file html5shiv.js penso non venga caricato e se per caso tu lo hai nella cartella e si carica non è inserito nel codice apposito per IE, perchè quel file .JS è un file che serve per alcune versioni di IE
Guarda, con IE 11 la galleria funziona come dovrebbe, con le altre versioni di IE non saprei...

sai che non lo vedo il punto di troppo nel codice che hai postato ....
HTML:
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>
ma con un atto di fede, ci credo
Il punto in più non era nel link dell'HTML ma nel nome del file css che era in cartella.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Se con la 11 fimziona il codice così è comunque sbagliato e non serve a nulla se un utente usa una versione diversa!
Poi fai come vuoi
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
Si ma tanto quella che ho postato era solo una prova per capire come funziona la galleria, il file .js non lo userò. Che poi l'ha detto quello che ha fatto il tutorial di aggiungerlo non è stata una mia idea. :p
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.069
299
83
Va bene!