Vista Previa de una web en tiempo real con jQuery

2 minuto(s)

En esta página:

Demo Github

Demo Github

Vamos a implementar una lógica que ayudara a mejorar la usabilidad de nuestra App. En este caso lo que haremos será mostrar una Vista Previa de lo que vamos a visitar, luego de hacer click en un enlace dentro de nuestra página, al colocar el puntero del mouse sobre un determinado enlace, es decir si colocamos el puntero del mouse en el enlace: www.mienlace.com, entonces cargara un Tooltip con determinada medida que nos brindara la vista previa con todos los objetos animados que hayan en dicho enlace. Bueno vamos a por el tutorial.

Voy a instanciar las siguientes librerías:


<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery-live-preview.js"></script>
<link href="css/livepreview.css" rel="stylesheet" type="text/css">

Ahora antes de cerra la etiqueta head agrego mi funcion javascript jquery:


<script type="text/javascript">
    $(document).ready(function() {
        $(".vistaprevia").livePreview();
    });
</script>

$(document).ready(function() {

$(".vistaprevia").livePreview();

});

</script>

Bueno por ejemplo para darle la funcionalidad de vista previa a un enlace, en mi vista html agrego lo siguiente:


Desarrollado por <a href="https://www.nubecolectiva.com" target="_blank" class="vistaprevia">Collective Cloud Perú</a>

Desarrollado por <a href="https://www.nubecolectiva.com" target="_blank" class="vistaprevia">Collective Cloud Perú</a>

Pueden ver que en mi link estoy instanciando la clase:


class="vistaprevia"

class="vistaprevia"

Podemos cambiarle la funcionalidad de la vista previa:


<script type="text/javascript">
    $(document).ready(function() {
       $(".vistaprevia").livePreview({
          trigger: 'hover', // Modo de accionar la vista previa. Puede ser 'click'
          viewWidth: 480,   // Ancho del Tooltip vista previa
          viewHeight: 325,  // Ato del Tooltip vista previa                    
          position: 'right' // Posición a donde se va mostrar la vista previa.
       });
    });
</script>

$(document).ready(function() {

$(".vistaprevia").livePreview({

trigger: 'hover', // Modo de accionar la vista previa. Puede ser 'click'

viewWidth: 480, // Ancho del Tooltip vista previa

viewHeight: 325, // Ato del Tooltip vista previa

position: 'right' // Posición a donde se va mostrar la vista previa.

});

</script>

Podemos configurar otras opciones:

targetWidth: El ancho de la web que se esta visualizando en la vista previa (Ejemplo: 1000px)
targetHeight: El alto de la web que se esta visualizando en la vista previa (Ejemplo: 800px)
scale: La escala de la vista previa. Ejemplo: 0.5 (Si no se especifica la escala, la escala se calcula automáticamente para proporcionar el mejor ajuste al tamaño de la ventana de diálogo de vista previa.)
offset: La ubicación de la web dentro de la ventana (Ejemplo: 40px)

Algunas webs activan X-FRAME-OPTIONS, específicamente para evitar que otros sitios lean dentro de un IFRAME su sitio por razones de seguridad. Si ese es el caso, este plugin no funciona, y lo mejor es respetar los deseos del dueño del sitio.
Este plugin funciona con Internet Explorer 10 y superiores. Las versiones anteriores de IE no son compatibles con la propiedad CSS transform utilizado en este plugin.

Espero que te sirva de mucho este articulo.

Gracias por tu atención.