WP Live Preview Links

wp-live-preview-links-2_pjjpgv

WP Live Preview Links allows you to see a live scaled preview of the site you are linking to in a pop-up dialog style window prior to clicking on it.

WP Live Preview Links does not use an external service to create these “thumbnails”.

In the admin panel you can select which links that will trigger the preview (class="wp-live-preview", internal, external or all links). You can also adjust the preview window size and position.

Demo

Hover above the the links below

Latest version

Installation

You can download and install WP Live Preview Links using the built in WordPress plugin installer. If you download WP Live Preview Links manually, make sure it is uploaded to “/wp-content/plugins/wp-live-preview-links/”.

Activate WP Live Preview Links in the “Plugins” admin panel using the “Activate” link.

Frequently Asked Questions

It doesn’t work ?!

  1. WP Live Preview Links needs a modern browsers that support CSS3 3D Transform properties (Chrome, Firefox, Safari, IE10+)
  2. Certain sites may have set their X-FRAME-OPTIONS header policy to SAMEORGIN or DENY. This is specifically to prevent other sites from iframing their site. If that is the case, this plugin will not work.

Activate the plugin and in plugin settings select Live Preview Links = class=”wp-live-preview”

This is how I’ve done it on this site running TwentyTwelve.

In the (child) theme folder, in functions.php, add the following

Copy ps_live_preview_search_result.js to the (child) theme folder:

Demo: Search my site and hover over the links

Changelog

1.0

  • Initial release

Credits

2 thoughts on “WP Live Preview Links

  1. Espen

    Hei Per :)

    Thanks for a nice plugin. I do however have trouble getting links within the Twitter widget to preview. Any suggestions?

    Secondly, I would like the preview above the link, not to the left or right. What do I have to do to make that happen?

    URL to my site (plugin not activated): http://sotheyreport.com/

    Best regards,
    Espen

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">