Smart Image Tooltip – SMARTPlugins Demos

Smart Image TooltipjQuery Tooltip Plugin for Images

Smart Image Tooltip - jQuery Tooltip Plugin for Images - Preview Image

Plugin Screenshots Buy On CodeCanyon

This demo includes general examples, same examples included in the plugin package along with HTML markup and script examples.

To see how plugin can be set and configured, check out the plugin page on the CodeCanyon, or check out the screenshots page. Links to home page and screenshots are available above this text under the plugin preview image.

Thumbnails with Simple Template, Image width set to 480px

HTML:

<a class="sit-preview" href="https://cdn.smartplugins.info/gfx/demo/cat.jpg"><img alt="" src="https://cdn.smartplugins.info/gfx/demo/cat-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/cat-medium.jpg" /></a>
<a class="sit-preview" href="https://cdn.smartplugins.info/gfx/demo/bumbleebee.jpg"><img alt="" src="https://cdn.smartplugins.info/gfx/demo/bumbleebee-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/bumbleebee-medium.jpg" /></a>
<a class="sit-preview" href="https://cdn.smartplugins.info/gfx/demo/corals.jpg"><img alt="" src="https://cdn.smartplugins.info/gfx/demo/corals-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/corals-medium.jpg" /></a>
<a class="sit-preview" href="https://cdn.smartplugins.info/gfx/demo/flower.jpg"><img alt="" src="https://cdn.smartplugins.info/gfx/demo/flower-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/flower-medium.jpg" /></a>
<a class="sit-preview" href="https://cdn.smartplugins.info/gfx/demo/kittens.jpg"><img alt="" src="https://cdn.smartplugins.info/gfx/demo/kittens-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/kittens-medium.jpg" /></a>

JavaScript

jQuery(document).ready(function() { jQuery(".sit-preview").smartImageTooltip({previewTemplate: "simple", imageWidth: "480px"}); });

Thumbnails with Caption Template, 70% scale, preload wait and no wait animation

HTML:

<a class="sit-preview" href="http://codecanyon.net/item/smart-cron-tools/4718364"><img alt="Smart CRON Tools - CodeCanyon Item for Sale" src="http://0.s3.envato.com/files/56238831/smart-cron-tools.icon.png" data-preview-url="http://0.s3.envato.com/files/56238833/smart-cron-tools.preview.jpg" /></a>
<a class="sit-preview" href="http://codecanyon.net/item/smart-web-fonts-control/4361646"><img alt="Smart Web Fonts Control - CodeCanyon Item for Sale" src="http://0.s3.envato.com/files/60590420/smart-web-fonts-control.icon.png" data-preview-url="http://0.s3.envato.com/files/60590421/smart-web-fonts-control.preview.jpg" /></a>
<a class="sit-preview" href="http://codecanyon.net/item/smart-posts-index/4167784"><img alt="Smart Posts Index - CodeCanyon Item for Sale" src="http://1.s3.envato.com/files/53496205/smart-posts-index.icon.png" data-preview-width="" data-preview-url="http://3.s3.envato.com/files/53496206/smart-posts-index.preview.jpg" /></a>

JavaScript

jQuery(document).ready(function() { jQuery(".sit-preview").smartImageTooltip({previewTemplate: "caption", scaleDesktop: 70, scaleMobile: 70, preloadAnimation: false}); });

Thumbnails with Envato Template, Image width set to 500px

HTML:

<a class="sit-preview" href="http://codecanyon.net/item/smart-cron-tools/4718364"><img alt="Smart CRON Tools - CodeCanyon Item for Sale" src="http://0.s3.envato.com/files/56238831/smart-cron-tools.icon.png" data-preview-url="http://0.s3.envato.com/files/56238833/smart-cron-tools.preview.jpg" data-item-name="Smart CRON Tools" data-item-cost="15" data-item-category="WordPress / Utilities" data-item-author="GDragoN" data-title="Smart CRON Tools" /></a>
<a class="sit-preview" href="http://codecanyon.net/item/smart-web-fonts-control/4361646"><img alt="Smart Web Fonts Control - CodeCanyon Item for Sale" src="http://0.s3.envato.com/files/60590420/smart-web-fonts-control.icon.png" data-preview-url="http://0.s3.envato.com/files/60590421/smart-web-fonts-control.preview.jpg" data-item-name="Smart Web Fonts Control" data-item-cost="14" data-item-category="WordPress / Utilities" data-item-author="GDragoN" data-title="Smart Web Fonts Control" /></a>
<a class="sit-preview" href="http://codecanyon.net/item/smart-posts-index/4167784"><img alt="Smart Posts Index - CodeCanyon Item for Sale" src="http://1.s3.envato.com/files/53496205/smart-posts-index.icon.png" data-preview-width="" data-preview-url="http://3.s3.envato.com/files/53496206/smart-posts-index.preview.jpg" data-item-name="Smart Posts Index" data-item-cost="14" data-item-category="WordPress / Miscellaneous" data-item-author="GDragoN" data-title="Smart Posts Index" /></a>

JavaScript

jQuery(document).ready(function() { jQuery(".sit-preview").smartImageTooltip({previewTemplate: "envato", imageWidth: "500px"}); });

Text Links with Envato Template

Smart Posts Index - CodeCanyon Item for Sale

HTML:

<a class="sit-preview" href="http://codecanyon.net/item/smart-posts-index/4167784" data-preview-url="http://3.s3.envato.com/files/53496206/smart-posts-index.preview.jpg" data-item-name="Smart Posts Index" data-item-cost="14" data-item-category="WordPress / Miscellaneous" data-item-author="GDragoN" data-title="Smart Posts Index">Smart Posts Index - CodeCanyon Item for Sale</a>

JavaScript

jQuery(document).ready(function() { jQuery(".sit-preview").smartImageTooltip({previewTemplate: "envato"}); });

Thumbnails with no links with Caption Template, Image width set to 480px

HTML:

<img class="sit-thumb" alt="Cat" src="https://cdn.smartplugins.info/gfx/demo/cat-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/cat-medium.jpg" />
<img class="sit-thumb" alt="Bumblebee" src="https://cdn.smartplugins.info/gfx/demo/bumbleebee-thumb.jpg" data-preview-url="https://cdn.smartplugins.info/gfx/demo/bumbleebee-medium.jpg" />

JavaScript

jQuery(document).ready(function() { jQuery("img.sit-thumb").smartImageTooltip({previewTemplate: "caption", imageWidth: "480px"}); });