Jquery Course

Examples JQZoom

JQZoom is a javascript image magnifier built at the top of the jQuery javascript framework. jQzoom is an easy to use script to magnify / zoom part or image; with on or multiple images (gallery).


• To DOWNLOAD this script, click: - version: 2.3 (523 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/jqzoom.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom-min.js"></script>
3. The HTML code with the image must be added in this format:
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">  
  <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">  
</a>

The anchor element wraps the small image you would like to zoom. The necessary and base elements are:

    SMALLIMAGE.JPG - Represents the small image you would like to zoom.
    BIGIMAGE.JPG - Represents the big image that jQZoom will reveal.
    MYCLASS - Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class (you can use an ID as well).
    MYTITLE / IMAGE TITLE - Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.

- The SMALLIMAGE must be a scaled versione of the BIGIMAGE.


4. Then load the plugin at window load.
<script>
$(document).ready(function(){  
  $('.MYCLASS').jqzoom();  
});
</script>
This will instantiate jQzoom in standard mode. You can pass more options, as in the example below.
<script>
$(document).ready(function(){  
  var options = {  
    zoomType: 'standard',
    preloadImages: true,  
    alwaysOn: true,  
    zoomWidth: 300,  
    zoomHeight: 250,  
    xOffset: 90,  
    yOffset: 30,  
    position: 'left'  
    //...MORE OPTIONS
  };
  $('.MYCLASS').jqzoom(options);
});
</script>
• Doumentation and a list of options are in the "index.html" file, in the archive with this script.

Image Gallery with JQZoom

The JQZoom plugin can also be used to create image gallery with zoom efect.

1. Attach the gallery ID to your main anchor "rel" attribute (here, "gal1").
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE" rel="gal1">  
  <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">  
</a>
2. Manage your thumbnails "class" and "rel" attributes.
- The class "zoomThumbActive" is attached to your thumbnails by jQzoom. By default specify this class to the selected thumbnail.
<a class="zoomThumbActive" href="#" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">  
  <img src="imgProd/thumbs/THUMBIMG1.jpg" title="thumb1" />
</a>

In image gal1, the structure of the thumbnail "rel" attribute is very important.The base elements are:

    gallery : the ID of the gallery to which it belongs.
    smallimage : the path to the SMALLIMAGE to be loaded on the when you click on the thumbnail.
    largeimage : the path to the LARGEIMAGE

Examples JQZoom

Here is a few examples with JQZoom jQuery plugin.

1. Standard Zoom efect for image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example JQZoom - Image</title>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css">
.jqzoom img { border: 3px solid #888; }
</style>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom-min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
    zoomType: 'standard',
    preloadImages: false
  });
});
</script>
</head>
<body>
<br>
<div>
  <a href="image_big.jpg" class="jqzoom" title="image">
    <img src="image_small.jpg" title="image" alt="image" />
  </a>
</div>

</body>
</html>
Demo (move the mouse cursor over image):
Autumn

2. Inner-Zoom image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example JQZoom - Inner-Zoom</title>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css">
.jqzoom2 img { border: 3px solid #888; }
</style>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom-min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom2').jqzoom({
    zoomType: 'innerzoom',
    lens: false,
    preloadImages: false,
    title: false
  });
});
</script>
</head>
<body>
<br>
<div>
  <a href="image_big.jpg" class="jqzoom2" title="JQZoom">
    <img src="image_small.jpg" title="JQZoom" alt="JQZoom" />
  </a>
</div>

</body>
</html>
Demo (move the mouse cursor over image):
Autumn 2

3. JQZoom - Image Gallery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example JQZoom - Image Gallery</title>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css">
.jqzoom3 img { border: 3px solid #888; }
.clr{display:block; clear:both;}
div#thumblist{margin-top:3em;}
div#thumblist a{display:inline-block; margin:0 4px; border:1px dashed #888;}
div#thumblist a.zoomThumbActive{ border:2px solid #0001da; }
</style>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom-min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('.jqzoom3').jqzoom({
    zoomType: 'standard',
    preloadImages: false,
    alwaysOn: true,
    title: false
  });
});
</script>
</head>
<body>
<br>
<div>
  <a href="image_big1.jpg" class="jqzoom3" rel='gal1' title="JQZoom Gallery">
    <img src="image_small1.jpg" alt="JQZoom Gallery" />
  </a>
</div>
<br class="clr"/>
<div id="thumblist">
  <a class="zoomThumbActive" href='#' rel="{gallery: 'gal1', smallimage: 'image_small1.jpg',largeimage: 'image_big1.jpg'}" title="img1 jqzoom gallery"><img src='image_thumb1.jpg' alt="img1 jqzoom gallery" /></a>
  <a href='#' rel="{gallery: 'gal1', smallimage: 'image_small2.jpg',largeimage: 'image_big2.jpg'}" title="img2 jqzoom gallery"><img src='image_thumb2.jpg' alt="img2 jqzoom gallery" /></a>
  <a  href='#' rel="{gallery: 'gal1', smallimage: 'image_small3.jpg',largeimage: 'image_big3.jpg'}" title="img3 jqzoom gallery"><img src='image_thumb3.jpg' alt="img3 jqzoom gallery" /></a>
</div>

</body>
</html>
Demo:
JQZoom Gallery
img1 jqzoom gallery img2 jqzoom gallery img3 jqzoom gallery
- 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).

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
JQZoom Image Magnifier

Last accessed pages

  1. Prayer The Art of Believing (1216)
  2. Clear Canvas Context (7461)
  3. Validate radio and checkbox buttons (9183)
  4. Add, Change, and Remove Attributes with jQuery (45241)
  5. Create simple Website with PHP (39722)

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)