Installation Zoomooz

Zoomooz is a jQuery plugin for making web page elements zoom, with animation, scale, and rotate effects.
You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly.
With this plugin you can make the HTML elements zoom without eaven write JavaScript / jQuery code, only with HTML code and some attributes.
- It works in all major browsers (IE 9+).


• To DOWNLOAD this script, click: - version: 1.1.6 (282 KB).

Examples Zoomooz

Here is three examples with Zoomooz jQuery plugin.

1. Simple Zoom effect, zooming in full window (Click on the box to zoom in, then click outside the box to zoom out).
CLICK

Some text zoomooz example...
From: https://coursesweb.net/javascript/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Zoomooz</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.zoomooz.min.js"></script>
<style type="text/css">
#exz1 { width: 14em; background: #bebebe; border: 2px solid blue; font-size: 1.1em; }
</style>
</head>
<body>
Click on the box to zoom in, then click outside the box to zoom out.
<div id="exz1" class="zoomTarget">CLICK<p>Some text zoomooz example...<br/>
From: https://coursesweb.net/</p></div>
</body>
</html>

2. Zoom inside another container (Click on the box to zoom in, then click again to zoom out).
Target 1
(click twice)
Target 2
(click twice)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Zoomooz - insde container</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.zoomooz.min.js"></script>
<style type="text/css">
#exz2 { width: 32em; height: 15em; background: #bbb; text-align: center; }
#exz2 .zoomContainer div { display: inline-block; width: 8em; height: 3em; margin: .8em 1em; border: 1px solid blue; background: #fff; font-size: 1.1em; padding: 1em .4em; }
</style>
</head>
<body>
Click on the box to zoom in, then click again to zoom out.
<div id="exz2" class="zoomViewport">
  <div class="zoomContainer">
    <div class="zoomTarget" data-closeclick="true">Target 1 <br> (click twice)</div>
    <div class="zoomTarget" data-closeclick="true">Target 2 <br> (click twice)</div>
  </div>
</div>
</body>
</html>

3. Zoom inside another container, with rotate and skew items (Click on any item to zoom in, then click again to zoom out).
Item 1 Zoom
Rotate Parent Item Zoom.Image-zoom
Item 4 Zoom, Rotate, Skew.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Zoomooz - insde container 2</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.zoomooz.min.js"></script>
<style type="text/css">
#exz3 { margin:0;padding:0;width:38em;height:20em;background: #beb;margin-top:.5em auto; }
#exz3 .zoomContainer { margin:0;padding:0;width:38em;height:25em;position:relative; }
#exz3 div { -webkit-tap-highlight-color:rgba(0,0,0,0); }
#item1 { background-color:#fcc;position:absolute;left:2em;top:1em;width:15em;height:10em;border:1px solid red; }
#item2 { background-color:#ccf;position:absolute;top:2em;right:1em;width:15em;height:10em;border:1px solid blue;-moz-transform: rotate(11deg);-webkit-transform: rotate(11deg); -o-transform: rotate(11deg); }
#item3 { display:block;position:relative;margin:2em auto auto 3em; }
#item4 { background-color:#ffc;position:absolute;bottom:10em;left:8em;width:8em;height:8em;border:1px solid yellow;-webkit-transform: rotate(30deg) skew(20deg);-moz-transform: rotate(30deg) skew(20deg);-o-transform: rotate(30deg) skew(20deg); }
</style>
</head>
<body>
Click on any item to zoom in, then click again to zoom out.
<div id="exz3" class="zoomViewport">
  <div class="zoomContainer">
    <div id="item1" class="zoomTarget" data-closeclick="true">Item 1</div>
    <div id="item2" class="zoomTarget" data-closeclick="true">Rotate Parent Item Zoom.
      <img src="image.jpg" alt="Image-zoom" id="item3" class="zoomTarget" data-closeclick="true" width="110" height="70" />
    </div>
    <div id="item4" class="zoomTarget" data-closeclick="true">Item 4 Zoom, Rotate, Skew.</div>
  </div>
</div>
</body>
</html>

Installation

1. First, to use this plugin, copy the "js" folders (or its files in "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:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.zoomooz.min.js"></script>
3. Then, simply add "zoomTarget" to the element you want to zoom to when clicked on:

<div class="zoomTarget">This element zooms when clicked on, <em>https://coursesweb.net/</em></div>

- You can also add some additional attributes for tuning the animation as data fields of the element:

<div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on, <em>https://coursesweb.net/</em></div>

3.2 To make an element zoom with jQuery when clicked on, you can use "zoomTarget()":
<script>
$(document).ready(function() {
  $("#element").zoomTarget();
});
</script>
• More details about Zoomooz options, and examples are in the "index.html" page from the archive with this jQuery plugin (a Download button is at the beginning of this page).

• The Zoomooz home page is at: http://jaukia.github.io/zoomooz/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Zoomooz - Make Web Page Elements Zoom

Last accessed pages

  1. JavaScript code and PHP (20343)
  2. Bind Tool and Control Points (2776)
  3. SHA1 Encrypt data in JavaScript (8116)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (52434)
  5. Read Excel file data in PHP - PhpExcelReader (56660)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (397)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (316)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)