Just displaying a few examples of how the preview-image-jquery plugin works. This example page turns off included CSS on the preview. You may want to do this if you don't want any CSS applied to the preview, OR you intend to add your own styles for the preview (use the id 'preview-image-plugin-overlay' to achieve this.) To make this work, we need to include the jquery and plugin scripts:
<script src="http://code.jquery.com/jquery-{version}.min.js"></script> <script src="preview-image.js"></script>Next, we turn off generated CSS by passing options into the 'previewImage' method:
$.previewImage({css: false});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.