Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Vista Previa de una web en tiempo real con jQuery

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:

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.

Salir de la versión móvil