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

7
Comentarios

avatar
3 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Microsoft lanza complemento para convertir el dictado de voz en texto | Blog Collective Cloud PeruJnn JEnnCollective Cloud PeruChristopher Recent comment authors
  Subscribirse  
newest oldest most voted
Notificar a
Christopher
Guest
Christopher

muy bueno gracias !

Collective Cloud Peru
Guest
Collective Cloud Peru

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

Jnn JEnn
Guest
Jnn JEnn

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

Collective Cloud Peru
Guest
Collective Cloud Peru

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

Jnn JEnn
Guest
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.

Collective Cloud Peru
Guest
Collective Cloud Peru

Que bueno. No hay problema estamos para ayudarnos. 🙂

trackback
Microsoft lanza complemento para convertir el dictado de voz en texto | Blog Collective Cloud Peru

[…] para Office de 32 y 64 bits, y para instarlo solo debes descargar el paquete correspondiente en su web […]