Example with Custom Options

Just displaying a few examples of how the preview-image-jquery plugin works. This example page uses some custom options to change the display of the preview. First we include the jQuery and plugin script files:

<script src="http://code.jquery.com/jquery-{version}.min.js"></script>
<script src="preview-image.js"></script>

Next, we add change the options by passing them in to the 'previewImage' method:

$.previewImage({
   xOffset: 20,
   yOffset: -100,
   fadeIn: 1000,
   css: {
      'border': '5px solid black',
      'padding': '20px',
      'background-color': '#ccc'
   }
});

And then we just need to include 'data-preview-image' attributes with the url to an image we want displayed on mouseover. View the source of this page to see how it's done.

If you mouse-over the image to the left, you should see a larger view displayed in a pop-up above everything else. Also, if you mouse-over this link you should see a preview image as well.