jQuery Plugin For On-Page Text Control Plugin - Text Zoom
File Size: | 229KB |
---|---|
Views Total: | 4359 |
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.