使用js实现淘宝那样的图片局部放大

这也不是什么新鲜玩意了,直接分享个老外的做法:(无节操全文引用,点此查看源地址,有空做个翻译,没空大家看得懂的看,看不懂的建议下载Chrome,对你有很大帮助)

Installation

Add first the last jQuery release, then the jQZoom script(don’t forget this),the correct order is important.Look at the installation code below.

  1. <script type=’text/javascript’ src=’js/jquery-1.5.xx.js’></script>
  2. <script type=’text/javascript’ src=’js/jquery.jqzoom-core.js’></script>

Add jqzoom.css to your header.

  1. <link rel=”stylesheet” type=”text/css” href=”css/jquery.jqzoom.css”>
How to use

Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.

  1. <a href=”images/BIGIMAGE.JPG” class=”MYCLASS” title=”MYTITLE”>
  2.     <img src=”images/SMALLIMAGE.JPG” title=”IMAGE TITLE”>
  3. </a>

The anchor element wraps the small image you would like to zoom.Following this schema 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.
PAY ATTENTION: The SMALLIMAGE must be a scaled versione of the BIGIMAGE.

Now load the plugin at window load.

  1. $(document).ready(function(){
  2.     $(‘.MYCLASS’).jqzoom();
  3. });

This will instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.

  1. $(document).ready(function(){
  2.     var options = {
  3.             zoomType: ‘standard’,
  4.             lens:true,
  5.             preloadImages: true,
  6.             alwaysOn:false,
  7.             zoomWidth: 300,
  8.             zoomHeight: 250,
  9.             xOffset:90,
  10.             yOffset:30,
  11.             position:’left’
  12.             //…MORE OPTIONS
  13.     };
  14.     $(‘.MYCLASS’).jqzoom(options);
  15. });
Multiple thumbnails support

If you want to create galleries, jQZoom can manage it for you.

1. Attach the gallery ID to your main anchor “rel” attribute.

  1. <a href=”images/BIGIMAGE.JPG” class=”MYCLASS” title=”MYTITLE” rel=”gal1″>
  2.     <img src=”images/SMALLIMAGE.JPG” title=”IMAGE TITLE”>
  3. </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(it should be the same image in your main anchor element)

  1. <a class=”zoomThumbActive” href=”javascript:void(0);” rel=”{gallery: ‘gal1’, smallimage: ‘./imgProd/SMALLIMAGE1.jpg’,largeimage: ‘./imgProd/LARGEIMAGE1.jpg’}”>
  2.     <img src=”imgProd/thumbs/THUMBIMG1.jpg”>
  3. </a>

The structure of the thumbnail rel attribute is very important.The base elements aregallery: 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

  1. rel=”{gallery: ‘gal1’, smallimage: ‘./imgProd/SMALLIMAGE1.jpg’,largeimage: ‘./imgProd/LARGEIMAGE1.jpg’}”

Check out this demo.

Documentation


Configuration options:

You can choose between these options.

  • OPTION NAME
    DEFAULT
    DESCRIPTION
  • zoomType
    ‘standard’
    The others admitted option values are ‘reverse’,‘drag’,‘innerzoom’.
  • zoomWidth
    300
    The popup window width showing the zoomed area.
  • zoomHeight
    300
    The popup window height showing the zoomed area.
  • xOffset
    10
    The popup window x offset from the small image. (always positive to move the popup window more on the right if position is “right” or more on the left if position is “left”)
  • yOffset
    0
    The popup window y offset from the small image. (always positive to move the popup window more on the top if position is “top” or more on the bottom if position is “bottom”),
  • position
    ‘right’
    The popup window position.Admitted values:‘right’ ,‘left’ ,‘top’ ,‘bottom’
  • preloadImages
    true
    if set to true,jqzoom will preload large images.
  • preloadText
    ‘Loading zoom’
    The text to show while preloading images.
  • title
    true
    Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.
  • lens
    true
    if set to false,the small lens,over the image, won’t show.
  • imageOpacity
    0.4
    Set the image opacity when the ‘zoomType’ option is set to ‘reverse’.
  • showEffect
    ‘show’
    The effect by which showing the popup window.Options available: ‘show’ ,‘fadein’.
  • hideEffect
    ‘hide’
    The effect by which hiding the popup window.Options available: ‘hide’ ,‘fadeout’.
  • fadeinSpeed
    ‘slow’
    Changes fade in speed,in case the showEffect option is set to ‘fadein’.(options:‘fast’,‘slow’,number)
  • fadeoutSpeed
    ‘2000’
    Changes fade out speed,in case the hideEffect option is set to ‘fadeout’.(options:‘fast’,‘slow’,number)

Style customizations are obviously admitted simply changing the right parameters value in the jqzoom stylesheet file.

Download
Latest release version: 2.3 [2011.05.03]

This software is licensed under BSD.(read the license inside the archive)
Remember: Develop,mantain,and longtime support in never easy and without efforts. So if you like this plugin and you would like future support for jQZoom,donate something with Paypal,before downloading it.

6 thoughts on “使用js实现淘宝那样的图片局部放大

发表评论

电子邮件地址不会被公开。 必填项已用*标注