Vista Previa de una web en tiempo real con jQuery

Tutoriales

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:

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

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

Pueden ver que en mi link estoy instanciando la clase:

Podemos cambiarle la funcionalidad de la vista previa:

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
  • Christopher

    muy bueno gracias !

    • Gracias por visitarnos, subscribete a nuestras redes sociales para que recibas todos nuestros contenidos 🙂

  • Jnn JEnn

    He tenido problemas al implementarlo, al estar hover no abre ninguna pagina, esta tal cual las instrucciones, ayuda por fa!!!

    • Hola Jnn, presiona f12 y dinos que error te sale en la consola para Developers.

      • Jnn JEnn

        No, tenia problemas con otras versiones de jquery que estaba manejando, con una intranet en social engine, que trae por defecto mootools, y este tiene tambien con jquery. Igualmente muchas gracias por la atención.