Fancybox。画廊中的图标和图像太小

Question

我正在尝试为我正在做的练习建立一个Fancybox画廊。现在可以正常工作了，但是图库中的图标和弹出图像都太小了。我已经看到了一些使用相同Fancybox版本3.2.5的示例，并且大小更大。我可能会覆盖该财产吗？

我留下了html，css和js代码以及实际外观的屏幕截图。

任何潜在客户都会非常感激。

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>

enter image description here大家好！ 我正在尝试为我正在做的练习建立一个Fancybox画廊。 现在可以使用了，但是图库中的图标和弹出图像太小了。 我已经看到了一些使用相同Fancybox版本3.2.5的示例，并且大小更大。 我可能会覆盖该财产吗？

我留下了html，css和js代码以及实际外观的屏幕截图。