Tag: Fancybos.

var data = {"books":[{"portada":"https://preview.ibb.co/bC5ELQ/alex_min.png","detalle":"https://preview.ibb.co/deD10Q/alex_min.png","titulo":"Dímelo en palabras","descripcion":"El polifacético escritor catalán nos muestra en su novela más romántica como, básicamente, nuestra relación es tan fácil como decirnos las cosas como son. Tal cual.","idioma":"es"},{"portada":"https://preview.ibb.co/dvM9AQ/eddie_min.png","detalle":"https://preview.ibb.co/hnT0H5/eddie_min.png","titulo":"Lo veo negro","descripcion":"En ocasiones crees entender algo cuando te lo están explicando, pero en el momento de ponerte a programar surge siempre esta duda. ¿Lo ves?. Eduard Català se saca de la manga una obra maestra de la ciencia ficción.","idioma":"es"},{"portada":"https://preview.ibb.co/nF3Un5/flecha_min.png","detalle":"https://preview.ibb.co/dUgbZk/flecha_min.png","titulo":"Mi algoritmo es más rápido","descripcion":"De nuevo Guerrero, de nuevo el flecha. Un libro que te deja atado a su trama desde que abres la cubierta. Te atrapa rápido, muy rápido, hyper rápido.","idioma":"es"}]}    var allBooks = data.books;   function getBooks() {    var flipBox = document.getElementById("flipBox");     for (i = 0; i < allBooks.length; i++) {      //create flip elements      var flipContainer = document.createElement("div");     flipContainer.setAttribute("class", "flipContainer")      var flipper = document.createElement("div");     flipper.setAttribute("class", "flipper");      var front = document.createElement("div");     front.setAttribute("class", "front");      var back = document.createElement("div");     back.setAttribute("class", "back");       var coverImage = document.createElement("img");     coverImage.setAttribute("src", allBooks[i].portada);     coverImage.setAttribute("alt", allBooks[i].titulo);      //add title      var title = allBooks[i].titulo;     var bookTitle = document.createElement("span");     bookTitle.setAttribute("class", "bookTitle");     bookTitle.innerHTML = title;     var titleContainer = document.createElement("div");     titleContainer.setAttribute("class", "titleContainer");      //add title to div and then to back     titleContainer.append(bookTitle);     back.append(titleContainer);      // add description      var bookDescription = allBooks[i].descripcion;     var text = document.createElement("div");     text.setAttribute("class", "text");     text.innerHTML = bookDescription;     back.append(text);       // add more-info button . First container for a-tag, then A-tag, then button      var anchorContainer = document.createElement("div");     anchorContainer.setAttribute("class", "anchorContainer")     back.append(anchorContainer);      var anchor = document.createElement("a");     anchor.setAttribute("id", "anchor");     anchor.setAttribute("href", allBooks[i].detalle);     anchor.setAttribute("data-fancybox", "images");     anchorContainer.append(anchor);         var button = document.createElement("button");     button.setAttribute("class", "button");     button.innerHTML = "More Info";      anchor.append(button);         //Add elements      front.appendChild(coverImage);     flipper.append(front, back);     flipContainer.append(flipper)      flipBox.append(flipContainer);    } } getBooks()  function searchBox() {    var input = document.getElementById("myInput").value;   input = input.toLowerCase()   var titulo = allBooks.titulo;     console.log(input);    for (i = 0; i < titulo[i].length; i++) {      if (!titulo[i].innerHTML.toLowerCase().includes(input)) {       titulo[i].style.display = "none";     } else {       titulo[i].style.display = "list-item"     }    } } searchBox()

.boxContainer {   width: 80%;   display: flex;   flex-direction: row;   align-items: center;   justify-content: center;   flex-wrap: wrap;   padding-bottom: 50px;   padding-top: 50px; }  img {   width: 400px;   /*width&Height must be same in .flipContainer, .front, .back*/   height: 500px;   border: 2px solid grey }   /* confir de CSS obtenida en https://davidwalsh.name/css-flip */   /* entire container, keeps perspective */  .flipContainer {   perspective: 1000px; }   /* flip the pane when hovered */  .flipContainer:hover .flipper, .flipContainer.hover .flipper {   transform: rotateY(180deg); }  .flipContainer, .front, .back {   width: 400px;   height: 500px;   margin-right: 5px }   /* flip speed goes here */  .flipper {   transition: 0.99s;   transform-style: preserve-3d;   position: relative; }   /* hide back of pane during swap */  .front, .back {   backface-visibility: hidden;   position: absolute;   top: 0;   left: 0; }   /* front pane, placed above back */  .front {   z-index: 2;   /* for firefox 31 */   transform: rotateY(0deg); }   /* back, initially hidden pane */  .back {   transform: rotateY(180deg);   margin-top: 5px;   background-color: gainsboro;   border: 2px solid grey;   color: black;   position: relative; }   /* fin CSS code from davidwalsh.name */   /* Style for back elements : title, more info etc... */  .titleContainer {   font-size: 40px !important;   text-align: center;   width: 100%;   position: absolute;   top: 5px; }  .text {   text-align: justify;   padding: 10px;   width: 100%;   height: 150px;   overflow-y: scroll;   position: absolute;   top: 100px;   font-size: 20px !important; }  .anchorContainer {   width: 100%;   position: absolute;   top: 350px; }  .button {   /*   margin-top: 10px;*/   font-size: 16px;   width: 139.73px;   border-top-left-radius: 10px;   border-top-right-radius: 10px;   border-bottom-left-radius: 10px;   border-bottom-right-radius: 10px;   box-shadow: 2px 2px black;   margin-top: 1px;   background-color: orangered;   color: white;   margin-bottom: 2px; }  button:hover {   box-shadow: 1px 1px black;   margin-top: 0px;   background-color: #ff704d; }  a:hover {   text-decoration: none; }  a {   display: flex;   justify-content: center; }

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">    <link rel="stylesheet" href="bookshop_css.css">     <!-- BOOTSTRAP: the following is for MOBILE: ensure proper rendering and touch-zooming -->   <meta name="viewport" content="width=device-width, initial-scale=1">   <!--    bootstrap-->   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    <!-- FANCYBOX CSS    -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css">     <title>Bookshop</title> </head>  <body>   <h1> here comes the books</h1>   <input type="text" id="myInput" onkeyup="searchBox()" placeholder="Search for book title" title="Type in a name">    <div id="flipBox" class="container-fluid boxContainer grid">       </div>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   <!-- BOOTSTRAP jQuery Library-->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <!-- Following two lines: FANCYBOX script -->   <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>   <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>   <!--  bootstrap-->   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>   <script src="bookshop_just_data.js"></script>   <script src="bookshop_myscript.js"></script>  </body>  </html>