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.
<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).
<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.
<!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):
<!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/
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4