1

Tengo el script de jQuery, Panorama Viewer, funcionando en mi sitio, pero el problema es que me toma la altura que tiene la imagen (1000px) y por ende la imagen acapara todo el espacio de la pantalla, por lo que quisiera reducirlo. El código está en su repositorio de GitHub pero aquí les pongo el código.

    !function($){
  var defaults = {
    repeat: false,
    direction: "horizontal",
        animationTime: 700,
        easing: "ease-out",
        overlay: true
    };

  function Timer(callback, delay) {
      var timerId, start, remaining = delay;

      this.pause = function() {
          window.clearTimeout(timerId);
          remaining -= new Date() - start;
      };

      this.resume = function() {
          start = new Date();
          timerId = window.setTimeout(callback, remaining);
      };

      this.resume();
  }

    function touchHandler(event)
  {
      var touches = event.changedTouches,
          first = touches[0],
          type = "";

           switch(event.type)
      {
          case "touchstart": type = "mousedown"; break;
          case "touchmove":  type="mousemove"; break;        
          case "touchend":   type="mouseup"; break;
          default: return;
      }

      var simulatedEvent = document.createEvent("MouseEvent");

      var mult = 2;

      if( navigator.userAgent.match(/Android/i) ) {
          mult = 10
      }

      simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                first.screenX, first.screenY,
                                (first.clientX * mult), (first.clientY * mult), false,
                                false, false, false, 0/*left*/, null);
      first.target.dispatchEvent(simulatedEvent);
  }
  $.fn.panorama_viewer = function(options){

    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);

    return this.each(function(){
      var settings = $.extend({}, defaults, options),
      el = $(this);

      el.imagesLoaded(function () {
        el.find("> img").addClass("pv-pano");
        el.addClass("pv-container").wrapInner("<div class='pv-inner pv-animating'></div>");

        if (settings.direction == "vertical") {
           el.addClass("pv-vertical")
        }

        el.find(".pv-animating").css({
          "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
          "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
          "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
          "transition": "all " + settings.animationTime + "ms " + settings.easing
        })
        imgSrc = el.find(".pv-pano").attr("src")
        width = el.find(".pv-pano").width()
        height = el.find(".pv-pano").height()
        var repeat = "no-repeat";
        if (settings.repeat == true) {
          repeat = "repeat"
        }

        el.find(".pv-inner").css({
          height: height,
          width: width,
          background: "url(" + imgSrc + ") " + repeat,
          "background-size": "cover"
        })

        if (settings.overlay == true) {
          $("<div class='pv-overlay'><i class='pvicon-overlay'></i></div>").appendTo(el.find(".pv-inner"))

          el.find(".pv-inner").bind("mouseenter", function() {
            $(this).find(".pv-overlay ").fadeOut("fast");
          }).bind("mouseleave", function() {
            $(this).find(".pv-overlay ").fadeIn("fast");
          })
        }


        var $bg = el.find(".pv-inner"),
        elbounds = {
          w: parseInt($bg.parent().width()),
          h: parseInt($bg.parent().height())
        },
        bounds = {w: width - elbounds.w, h: height - elbounds.h},
        origin = {x: 0, y: 0},
        start = {x: 0, y: 0},
        movecontinue = false;

        function move (e){

          var inbounds = {x: false, y: false},
              offset = {
                  x: start.x - (origin.x - e.clientX),
                  y: start.y - (origin.y - e.clientY)
              };
          if (settings.direction == "horizontal") {
            if (settings.repeat == true) {
              inbounds.x = true;
            } else {
              inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
            }

            if (movecontinue && inbounds.x) {
                start.x = offset.x;
                start.y = 0;
            }
          } else {
            if (settings.repeat == true) {
              inbounds.y = true;
            } else {
              inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;
            }

            if (movecontinue && inbounds.y) {
                start.y = offset.y;
                start.x = 0;
            }
          }

          $(this).css('background-position', start.x + 'px ' + start.y + 'px');


          origin.x = e.clientX;
          origin.y = e.clientY;

          e.stopPropagation();
          return false;
        }

        function handle (e){
            movecontinue = false;
            $bg.unbind('mousemove', move);

            if (e.type == 'mousedown') {
                origin.x = e.clientX;
                origin.y = e.clientY;
                movecontinue = true;
                $bg.bind('mousemove', move);
            } else {
              $(document.body).focus();
            }

            e.stopPropagation();
            return false;
        }

        function reset (){
            start = {x: 0, y: 0};
            $(this).css('backgroundPosition', '0 0');
        }


        $bg.bind('mousedown mouseup mouseleave', handle);
        $bg.bind('dblclick', reset);

        el.find(".pv-pano").hide()
      })


    });

  }

}(window.jQuery);

Gracias de antemano.

2
  • Sí la librería se adapta siempre al alto de la imagen, entonces basta con cambiar la altura de la imagen con CSS.
    – gugadev
    Commented el 14 mar. 2017 a las 0:09
  • ¡Hola Gustavo! Fíjate que ya intenté eso, con css, y cambiando del código del JS la propiedad de height, pero no funciona :/ Gracias.
    – OPMUANRK
    Commented el 14 mar. 2017 a las 0:17

1 respuesta 1

0

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.

1
  • 1
    ¡Funcionó! ¡Muchas gracias!
    – OPMUANRK
    Commented el 14 mar. 2017 a las 1:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.