图像缩放工具– jQuery imageLens

Image zoom with imageLens. Today we will continue our jQuery tutorials. And today we will talk about image zoom tools. During investigation, I was able to locate imageLens jQuery plugin. This is nice image zooming tool. It looks like round lens and have very easy initialization. Of course, I saw many another libraries too, but they was a little ugly, more like squares than the magnifying glass. I like this plugin, hope that you will like it too. And I sure that this is time to try demo.

使用imageLens缩放图像。 今天，我们将继续我们的jQuery教程。 今天我们将讨论图像缩放工具 。 在调查期间，我能够找到imageLens jQuery插件。 这是不错的图像缩放工具。 它看起来像圆透镜，并且初始化非常容易。 当然，我也看到了许多其他的图书馆，但是它们有点难看，更像是正方形而不是放大镜。 我喜欢这个插件，希望您也喜欢。 而且我确定是时候尝试演示了。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。 这是我们示例的源代码：

index.html (index.html)

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>
<div class="example">
    <h3><a href="#">imageLens samples</a></h3>
    <img id="img_01" src="data_images/img1.jpg" width="350" height="262" />
    <img id="img_02" src="data_images/img2.jpg" width="350" height="262" />
    <img id="img_03" src="data_images/img3.jpg" width="350" height="262" />
    <img id="img_04" src="data_images/img4.jpg" width="350" height="262" />
</div>

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>
<div class="example">
    <h3><a href="#">imageLens samples</a></h3>
    <img id="img_01" src="data_images/img1.jpg" width="350" height="262" />
    <img id="img_02" src="data_images/img2.jpg" width="350" height="262" />
    <img id="img_03" src="data_images/img3.jpg" width="350" height="262" />
    <img id="img_04" src="data_images/img4.jpg" width="350" height="262" />
</div>

As I hope – all clean here, no need explain it. Here are just main page with 4 images inside.

我希望–一切都干净，无需解释。 这只是里面有4张图片的主页。

步骤2. CSS (Step 2. CSS)

Here are single CSS file with all necessary styles:

这是具有所有必要样式的单个CSS文件：

css / main.css (css/main.css)

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example img {margin:22px}

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example img {margin:22px}

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

js / main.js (js/main.js)

$(document).ready(function(){
    $('#img_01').imageLens(); // default initialization
    $('#img_02').imageLens({ lensSize: 200 }); // set lens size
    $('#img_03').imageLens({ lensSize: 200, imageSrc: 'data_images/img5.jpg' }); // lens size + custom image
    $('#img_04').imageLens({ borderSize: 8, borderColor: '#f00' }); // new border size and color
});

$(document).ready(function(){
    $('#img_01').imageLens(); // default initialization
    $('#img_02').imageLens({ lensSize: 200 }); // set lens size
    $('#img_03').imageLens({ lensSize: 200, imageSrc: 'data_images/img5.jpg' }); // lens size + custom image
    $('#img_04').imageLens({ borderSize: 8, borderColor: '#f00' }); // new border size and color
});

Everything is quite easy – when the page loads I perform initialization of imageLens plugin for each image. Each image will have different lens properties. Default lensSize is 100, size – 4, and color – #888. Of course, if you don`t going to use different lens on your set of images and want single – you can just change jquery selector.

一切都很容易–当页面加载时，我为每个图像执行imageLens插件的初始化。 每个图像将具有不同的镜头属性。 默认的lensSize为100，大小为4，颜色为＃888。 当然，如果您不想在一组图像上使用不同的镜头而要使用单个镜头，则只需更改jquery选择器即可。

js / jquery-1.5.2.min.js和js / jquery.imageLens.js (js/jquery-1.5.2.min.js and js/jquery.imageLens.js)

This is necessary libraries – jQuery and imageLens. Available in our package.

这是必需的库– jQuery和imageLens。 在我们的包装中可用。

步骤4.图片 (Step 4. Images)

All our images located in ‘data_images’ folder:

我们所有位于“ data_images”文件夹中的图像：

现场演示

结论 (Conclusion)

Today I told you how to implement Lens-looking image zoomer. Sure that you will happy to use it in your projects. Good luck!

今天，我告诉您如何实现镜头般的图像缩放器。 确保您将乐于在项目中使用它。 祝好运！

翻译自: https://www.script-tutorials.com/image-zoom-tool-jquery-imagelens/