Programando PHP: Fotorama: estructura básica


<!DOCTYPE html>

<html>

<head>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

 <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">

 <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

</head>

<body>

 <div class="fotorama"

  data-fit="cover"

  data-width="100%"

     data-height="500"

  data-autoplay="true"

  >

    <img src="images/imagen1.jpg" data-caption="xxx">

    <img src="images/imagen2.jpg" data-caption="xxx">

    <img src="images/imagen3.jpg" data-caption="xxx">

 </div>

<style>

.fotorama__caption__wrap {

    background-color: #fff;

    background-color: rgba(255,255,255,0.7);

    padding: 5px 10px;

    width: 100%;

    text-align: center;

    line-height: 50px;

    font-size: 20px;

 }

</style>

</body>

</html>

Programando PHP

ccc

Fotorama: estructura básica

No hay comentarios:

Publicar un comentario