Download

This plugin allow you to preview images and flash files (flv and swf) by hovering over the thumbnails. This allows your users to view full images without clicking on the thumbnails of the images or flash files.

Example thumbnail preview code:

<a href="http://www.mewsoft.com">img src="http://www.mewsoft.com/images/logo.gif"
alt="" title="Hello title" border="0" class="image-thumbnail" width="160" height="160" 
data-src="http://www.mewsoft.com/images/full-image.jpg" data-width="430"
data-height="582" /></a>

The plugin will detect if the thumbnail for images or flash files automatically by checking the file extension and will display it properly.

For the flash files also you pass the file url normal as the same:

<a href="http://www.mewsoft.com">img src="http://www.mewsoft.com/images/logo.gif"
alt="" title="Hello title" border="0" class="image-thumbnail" width="160" height="160" 
data-src="http://www.mewsoft.com/images/flashmovie.flv" data-width="430" 
data-height="500" /></a>

and for swf files same:

<a href="http://www.mewsoft.com">img src="http://www.mewsoft.com/images/logo.gif" alt=""
title="Hello title" border="0" class="image-thumbnail" width="160" height="160" 
data-src="http://www.mewsoft.com/images/flashswf.swf" data-width="400" data-height="450" /></a>

It is important to set the full image file and flash files width and height in the attributes data-width and data-height and set the data-src to the url or the full image or flash file.

Call the plugin like this:

  <script type="text/javascript">
    $(document).ready(function () {
      $('.image-thumbnail').mediaPreview({
        loading_text: 'Loading, please wait...',
        flvplayer: 'http://www.mewsoft.com/jquery/media-preview/flvplayer.swf',
        offset: 20
      });
    });
  </script>