jQuery Plugin For On-Page Text Control Plugin - Text Zoom
| File Size: | 229KB |
|---|---|
| Views Total: | 4387 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Text Zoom is a simple and lightweight jQuery plugin that provides your visitor with a simple way to change the text size, alignment, color, vertical grid and font-family of an article on a page. It supports cookies, call back and can easily integrate in web page.
Basic Usage:
1. Include jQuery library and jQuery Text Zoom on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/zoom.min.js"></script>
2. Create a text zoom widget for your article
<div class="box"> <div class="zoom" id="demo"> <ul class="zoom-list"> <li class="zoom-in"><img src="img/zoom/zoom-in.png" title="zoom in" alt="zoom in"/></li> <li class="zoom-out"><img src="img/zoom/zoom-out.png" title="zoom out" alt="zoom out"/></li> </ul> </div> </div> <div class="article"> <p>...</p> </div>
3. Include jQuery Text Zoom CSS file on your page to style the widget
<link href="css/zoom.css" rel="stylesheet" type="text/css"/>
4. Call the plugin with some options
<script type="text/javascript">
$("document").ready(function(){
$("#demo").zoom({
path: ".article p"
//show/hide
,show_zoom: true // font-size
,show_alignment: false // text-align
,show_font_family: false // font-family
,show_bold: false // font-weight
,show_colors: false // color
,show_reset: false // reset
});
});
</script>
More Example:
- Basic Example (Change font size only)
- With Callback
- List Example
- Full functionality Example
- Table Example
This awesome jQuery plugin is developed by no81no. For more Advanced Usages, please check the demo page or visit the official website.











