jQuery Plugin For Sliding Box with Image Overlay Effect - Mosaic
File Size: | 30.4KB |
---|---|
Views Total: | 9173 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Mosaic is an awesome and easy-to-use jQuery plugin that automatically generates sliding boxes with animated image overlay effects.
Features:
- Slide or fade animation with custom directions
- Preloads images and displays them when page is loaded
- Lightweight (~2kb minified) and easy to implement
- Support all major browsers (IE7/8/9/10, Chrome, Firefox, Safari, Opera, etc)
Related plugins:
- jQuery Plugin For Overlay Instructions For Apps - chardin.js
- jQuery Plugin for App Showcase with Grid Overlay
- Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
- Animated Image Overlay Plugin with jQuery - ImageOverlay
- Expanding Overlay Effect with jQuery and CSS3
Basic Usage:
1. Include jQuery library and Mosaic plugin on the html page
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
2. Include required plugin CSS file on your page
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
3. The HTML
<div class="mosaic-block fade"> <a href="#" class="mosaic-overlay"> <div class="details"> ... </div> </a> <div class="mosaic-backdrop"><img src="1.jpg"/></div> </div>
4. The javascript
<script type="text/javascript"> jQuery(function($){ $('.fade').mosaic(); }); </script>
5. Options
animation : 'fade', // fade or slide speed : 150, // the speed of animation opacity : 1, // for Fade Animation. Accepts any value 0-1 (decimals included) preload : 0, // Preload images anchor_x : 'left', anchor_y : 'bottom', hover_x : '0px', // Horizontal overlay hover positions hover_y : '0px', // Vertical overlay hover positions overlay : '.mosaic-overlay', //Mosaic overlay backdrop : '.mosaic-backdrop' //Mosaic backdrop
This awesome jQuery plugin is developed by buildinternet. For more Advanced Usages, please check the demo page or visit the official website.