The Jquery Live Link Preview Plugin is a simple Jquery Plugin that allows you to see a live scaled preview of the site you are linking to in a pop-up dialog style window prior to you clicking on it.
Use on any link (or DOM element with a href attribute) by adding the corresponding css class, no more prepping preview images for user hover-over previews; let the user see exactly what they will see before they click on the link.
v1.1.0 - This revision added the ability to position the preview window on "top" or "bottom" of the target element. Note that this positions to the exact middle (width) of the target element.
- JQuery must be loaded.
- Modern Browsers that support CSS3 3D Transform properties (Chrome, Firefox, Safari, IE10+).
Add the live preview plugin to your <head> tag or before the closing <body> tag:
<script type="text/javascript" src="/js/jquery-live-preview.js"></script>
Make sure to add the CSS styling for the preview dialog window in your head:
<link href="/css/livepreview-demo.css" rel="stylesheet" type="text/css">
The styles included are default styles for the live preview window that pops up to display the live preview only. You may modify this to make it more custom to your site if you wish.
Add a custom CSS class to the link (or DOM element with an added href attribute) you want to preview:
<a href="http://www.bing.com" target="_blank" class="livepreview">Hover over to preview, click to link!/</a>(or you can always just bind to all your links and not use a custom class)
Initialize and bind to the CSS class you used above on page ready:
$(document).ready(function() {
$(".livepreview").livePreview();
});
There are seven optional configurable options on initialization :
$(".livepreview").livePreview({
trigger: 'hover',
viewWidth: 300,
viewHeight: 200,
targetWidth: 1000,
targetHeight: 800,
scale: '0.5',
offset: 50,
position: 'left'
});- trigger :: trigger event, 'hover' or 'click', default = 'hover'
- viewWidth :: the preview dialog width, default = 300px
- viewHeight :: the preview dialog height, default = 200px
- targetWidth :: the viewport size width of the site you are previewing, default = 1000px
- targetHeight :: the viewport size height of the site you are previewing, default = 800px
- scale :: the scaling of the viewport size of the site you are previewing (this is the CSS transform scale property), default = calculated automatically. Notes: If no scaling is specified, then the scaling is automatically calculated to provide the best fit to the preview dialog window size.
- offset :: the offset from the target in pixels, default = 40px
- position :: side to which the preview will open "top", "bottom", "left", "right": default = right
The following data attributes may be used inline and will override any initialized or default settings:
- data-trigger :: overrides trigger setting
- data-positionOffset :: overrides offset setting
- data-position :: overrides the position placement setting
- data-scale :: overrides the scale setting
- data-preview-url :: overrides url to show in the preview instead of the href attr
Example:
<a href="http://www.cnn.com" class="livepreview" data-offset="20" data-position="left" >Hover over this link</a>The above will make sure that the live preview window is position to the left of the link and using an offset of 20px only.
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 for obvious reasons. If that is the case, this plugin will not work, and it's best to respect the site owner's wishes.
This plugin will work with Internet Explorer 10 and above. Previous versions of IE do not support the CSS transform property used in this plugin. Suggestion is to use modernizr to disable this plugin if CSS transforms are not supported by the browser.
- The plugin can be triggered via a hover or click event. On a hover event, when the user hovers over the element, the preview will show. On a click event, when the user clicks on the element, the preview will show. Clicking again on the element while the preview is open will trigger the default event of that element (for example, if its a link, it will go to that link). On both events, when the user hovers away from the element, the preview will close.
- When this plugin is triggered, the preview dialog is added to the body and the iframe is created using the href attribute of the element. This means that you can add the appropriate class to any DOM element so long as the href attribute is present:
<button class="livepreview" href="http://www.google.com">Hover over me!</button>
<img class="livepreview" src="/images/someimage.jpg" href="http://www.yahoo.com" />- For now, please note that the preview dialog that is dynamically created has a fixed id name of livepreview_dialog
- For proper usage, detect if the browser can support css3 3d transforms, Modernizr is a great js library that provides this functionality.
That's it! See example here for usage.