Skip to main content
se añadieron 38 caracteres en el cuerpo
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Viendo el código de dicha librería, pude cambiar el tamaño de la imagen. Hay dos clases que debes modificar ligeramente:

  • panorama
  • pv-inner

Ejemplo

$(document).on('ready', function () {
  $(".panorama").panorama_viewer({
    repeat: false,
    direction: "horizontal",
    animationTime: 700,
    easing: "ease-out",
    overlay: true
  });
});
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center
}

.panorama {
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}

.panorama >panorama>.pv-inner {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/jquery.panorama_viewer.min.js"></script>
<link href="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/panorama_viewer.css" rel="stylesheet" />

<div class="panorama">
  <img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo5.jpg" alt="image">
</div>


Lo único que debes cambiar es height en ambas clases. Para .panorama debe ser un alto específico (el que desees) y para .pv-inner debe ser 100%.


PD: Ejecuta varias veces el código porque parece que hay problemas con la sincronización.

Viendo el código de dicha librería, pude cambiar el tamaño de la imagen. Hay dos clases que debes modificar ligeramente:

  • panorama
  • pv-inner

Ejemplo

$(document).on('ready', function () {
  $(".panorama").panorama_viewer({
    repeat: false,
    direction: "horizontal",
    animationTime: 700,
    easing: "ease-out",
    overlay: true
  });
});
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center
}

.panorama {
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}

.panorama >.pv-inner {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/jquery.panorama_viewer.min.js"></script>
<link href="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/panorama_viewer.css" rel="stylesheet"/>

<div class="panorama">
  <img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo5.jpg" alt="image">
</div>


Lo único que debes cambiar es height en ambas clases. Para .panorama debe ser un alto específico (el que desees) y para .pv-inner debe ser 100%.

Viendo el código de dicha librería, pude cambiar el tamaño de la imagen. Hay dos clases que debes modificar ligeramente:

  • panorama
  • pv-inner

Ejemplo

$(".panorama").panorama_viewer({
  repeat: false,
  direction: "horizontal",
  animationTime: 700,
  easing: "ease-out",
  overlay: true
});
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center
}

.panorama {
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}

.panorama>.pv-inner {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/jquery.panorama_viewer.min.js"></script>
<link href="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/panorama_viewer.css" rel="stylesheet" />

<div class="panorama">
  <img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo5.jpg" alt="image">
</div>


Lo único que debes cambiar es height en ambas clases. Para .panorama debe ser un alto específico (el que desees) y para .pv-inner debe ser 100%.


PD: Ejecuta varias veces el código porque parece que hay problemas con la sincronización.

Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Viendo el código de dicha librería, pude cambiar el tamaño de la imagen. Hay dos clases que debes modificar ligeramente:

  • panorama
  • pv-inner

Ejemplo

$(document).on('ready', function () {
  $(".panorama").panorama_viewer({
    repeat: false,
    direction: "horizontal",
    animationTime: 700,
    easing: "ease-out",
    overlay: true
  });
});
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center
}

.panorama {
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}

.panorama >.pv-inner {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/jquery.panorama_viewer.min.js"></script>
<link href="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/panorama_viewer.css" rel="stylesheet"/>

<div class="panorama">
  <img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo5.jpg" alt="image">
</div>


Lo único que debes cambiar es height en ambas clases. Para .panorama debe ser un alto específico (el que desees) y para .pv-inner debe ser 100%.