jQuery Plugin For On-Page Text Control Plugin - Text Zoom

File Size: 229KB
Views Total: 4349
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For On-Page Text Control Plugin - Text Zoom

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:


This awesome jQuery plugin is developed by no81no. For more Advanced Usages, please check the demo page or visit the official website.