In questo articolo illustrerò un programma scritto in PHP, CSS e HTML che permette di creare uno slider di bcakgrounds dinamico,ovvero uno slider di immagini con nomi delle immagini sottotitolati.

Creare uno slider di backgrounds dinamico


Il seguente codice PHP crea un array di nome “imgs” dove sono incluse tutte le immagini dentro la cartella “images”. $n, invece, è il numero delle immagini contenute nella cartella “images” (e quindi la lunghezza dell’array imgs).

<?php
$dir = 'images/';
$imgs = scandir($dir);
array_shift($imgs);
array_shift($imgs);
$n=count($imgs);
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
    <head>
        <link rel="stylesheet" type="text/css" href="slider.css" />
    <style type="text/css">
    .cb-slideshow li span {
        -webkit-animation: imageAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -moz-animation: imageAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -o-animation: imageAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -ms-animation: imageAnimation <?php echo $n*6; ?>s linear infinite 0s;
        animation: imageAnimation <?php echo $n*6; ?>s linear infinite 0s;
    }

    .cb-slideshow li div {
        -webkit-animation: titleAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -moz-animation: titleAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -o-animation: titleAnimation <?php echo $n*6; ?>s linear infinite 0s;
        -ms-animation: titleAnimation <?php echo $n*6; ?>s linear infinite 0s;
        animation: titleAnimation <?php echo $n*6; ?>s linear infinite 0s;
    }

$n*6 (numero di immagini contenute nella cartella images moltiplicato per 6) equivale al lasso di tempo in cui lo slider si resetta e torna alla prima immagine (e alla prima scritta).

    .cb-slideshow li:nth-child(1) span {
        background-image: url("./images/<?php echo $imgs[0]; ?>");
    }
    <?php
    for($i = 1; $i < $n; $i++)
    {
        $p = $i * 6;
        $j = $i + 1;
        echo "
        .cb-slideshow li:nth-child($j) span {
            background-image: url('./images/".$imgs[$i]."');
            -webkit-animation-delay: ".$p."s;
            -moz-animation-delay: ".$p."s;
            -o-animation-delay: ".$p."s;
            -ms-animation-delay: ".$p."s;
            animation-delay: ".$p."s;
        }
        .cb-slideshow li:nth-child($j) div {
            -webkit-animation-delay: ".$p."s;
            -moz-animation-delay: ".$p."s;
            -o-animation-delay: ".$p."s;
            -ms-animation-delay: ".$p."s;
            animation-delay: ".$p."s;
        }
        ";
    }
    ?>
    </style>

In questo codice si determina il “delay” delle immagini, ovvero il ritardo in cui le immagini appaiono e scompaiono. $p, che è uguale a $i * 6, è il numero dell’immagine che si sta caricando nello slider e viene moltiplicato per 6 per ottenere un intervallo di tempo di 6 secondi per ogni immagine.

    </head>
    <body id="page">
        <ul>
<?php
        for ($i=0; $i<count($imgs); $i++)
        {
            echo "        <li><span>Image $i</span><div><h3>".str_replace(".jpg", "", $imgs[$i])."</h3></div></li>n";
        }
    ?>
        </ul>
    </body>
</html>

Tramite questo codice vengono inseriti i nomi delle immagini sotto di esse.

Il seguente file contiene codice CSS che modifica lo stile e la posizione del testo e dei vari elementi.

slider.css

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}

Nel seguente codice possiamo notare come lo slider rende l’effetto della dissolvenza nelle varie immagini tramite il codice “opacity”, cioè, cambiando l’opacità.

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}
@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}

È tutto fatene buon uso (es. nei siti di fotografi) ;).