Jquery Course

Examples AnythingZoomer

AnythingZoomer is a jQuery plugin that can be used to zoom part of image, text, or other HTML content, like an eyeglass. It's flexible in many ways, in that the "small", "large", and "zoom" areas are all pretty easy to customize (via CSS).
- When double-click on the small image or text, it is replaced with the large content.


• To DOWNLOAD this script, click: - version: 2.2.2 (357 KB).

Installation

1. First, to use this plugin, copy the "css" and "js" folders (or their files in "css", respectively "js" folders) on your server. The script comes with jQuery 2.1.0 ("jquery.js" in "js/" directory).
2. Include these files in the <head> zone of your web page:
<link rel="stylesheet" type="text/css" href="css/anythingzoomer.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.anythingzoomer.js"></script>
3. The HTML code with the image, or text to be zoomed must be added in this format:
<div class="zoom">
  <div class="small"><img src="image.jpg" alt="small image"></div>
</div>
OR with text:
<div class="zoom">
  <div class="small"><p>Some small text</p></div>
</div>
- The "width" / "height" for the small image, and "font-size" for the small text must be set in CSS (see the examples bellow).

4. Then, create the JavaScript code that apply the anythingZoomer() method to the ".zoom" elements.
<script>
$(function() {
  $(".zoom").anythingZoomer({
    clone: true,       // // clone the small image or text

    // Set this properties if you need to adjust the offset values for the left top corner of the large content
    offsetX : 0,
    offsetY : 0
  });
});
</script>
• More details about anythingZoomer options are in the "index.html" file, in the archive with this script.

Examples AnythingZoomer

Here is a few examples with AnythingZoomer jQuery plugin.

1. Zoom effect for image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example AnythingZoomer - Image</title>
<link rel="stylesheet" href="css/anythingzoomer.css">
<style type="text/css">
.small img { width:200px; height: 150px; }
.large img { width: 500px; height: 333px; }
</style>

<script src="js/jquery.js"></script>
<script src="js/jquery.anythingzoomer.js"></script>
<script>
// from: https://coursesweb.net/javascript/
$(function() {
  $(".zoom").anythingZoomer({
    clone: true,       // // clone the small image or text

    // Set this properties if you need to adjust the offset values for the left top corner of the large content
    offsetX : 0,
    offsetY : 0
  });
});
</script>
</head>
<body>
<br>
<div class="zoom">
  <div class="small"><img src="image.jpg" alt="small image"></div>
</div>

</body>
</html>
Demo (double-click to show the large image, then double-click again):
small image

2. Zoom effect for text content.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example AnythingZoomer - Text</title>
<link rel="stylesheet" href="css/anythingzoomer.css">
<style type="text/css">
.small p { font-size: 9px; width: 300px; }
.large p { font-size: 18px; width: 600px; }
</style>

<script src="js/jquery.js"></script>
<script src="js/jquery.anythingzoomer.js"></script>
<script>
// from: https://coursesweb.net/javascript/
$(function() {
  $('.zoom_text').anythingZoomer({
    clone: true,       // // clone the small image or text
  });
});
</script>
</head>
<body>
<br>
<div class="zoom_text">
  <div class="small"><p>AnythingZoomer - <strong>Zoom part of Text Content, like an eyeglass</strong>. It's flexible in many ways, in that the "small", "large", and "zoom" areas are all pretty easy to customize (via CSS).<br/>
- When double-click on the small image or text, it is replaced with the large content.<br/>
From: <a href="https://coursesweb.net/jquery/jquery-plugins_jp" title="Useful jQuery Plugins">https://coursesweb.net/</a></p></div>
</div>

</body>
</html>
Demo (double-click to show the large content, then double-click again):

AnythingZoomer - Zoom part of Text Content, like an eyeglass. It's flexible in many ways, in that the "small", "large", and "zoom" areas are all pretty easy to customize (via CSS).
- When double-click on the small image or text, it is replaced with the large content.
From: https://coursesweb.net/

- For other advanced options and examples, see the documentation in "index.html" page from the archive with this jQuery plugin (a Download button is at the beginning of this page).

• The AnythingZoomer home page is at: http://css-tricks.com/anythingzoomer-jquery-plugin/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
AnythingZoomer - Zoom part of Image or Text Content

Last accessed pages

  1. Validate radio and checkbox buttons (9183)
  2. Add, Change, and Remove Attributes with jQuery (45241)
  3. Create simple Website with PHP (39722)
  4. Convert BBCode to HTML and HTML to BBCode with JavaScript (8176)
  5. How to use php variable in external js file (2318)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (98)
  2. Read Excel file data in PHP - PhpExcelReader (81)
  3. SHA256 Encrypt hash in JavaScript (67)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (49)