Vista Previa de una web en tiempo real con jQuery

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