Grab this Widget ~ Blogger Accessories

Add Fancyzoom For Image Zooming Of Your Website

Do you have a website? Does your website has images? Maybe you can think about add Fancyzoom into your site, that it is a small Javascript Image Zooming for your pictures. Your visitors can use it enlarge your pictures full size without open another window.
It is simple to set up it by follow steps:

* Download the FancyZoom package (53 KB)

* Use your favorite FTP client to upload the two folders inside the package to the root of your web server.

* Add the following two lines of code to the <head> section at the top of your web page(s):
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>


* Add onload="setupZoom()" inside your page's existing <body> tag. For example:
<body id="whatever" [...] onload="setupZoom()">

* You are done. The rest is automatic — links to images in your page will automatically zoom the images. For example:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
It will zoom up image.jpg when clicked.

Fancyzoom supports links of jpg, gif, png, bmp, or tiff in your webpage。


你有自己的网站吗?你的网站上有图片吗?如果有的话也许你可以考虑将Fancyzoom放在你的网站上,它是一个很小的Javascript,可将图片放大到正常的尺寸。访问者可以用它来查看缩图而不用打开别的窗口。
按照下面的步骤就可以简单地执行:

* 下载FancyZoom,它只有53 KB。

* 打开后将里面的两个文件夹上传到网站服务器上的根目录中。

* 将下面的两行代码添加到网页模版页头<head>中:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>


* 将onload="setupZoom()" 添加到现有的<body>中,如:
<body id="whatever" [...] onload="setupZoom()">

* 完毕。他会自动链接到网页中的图片,如:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
点击图片右下方的放大镜图标后会自动形成一个大图。

Fancyzoom支持网页中的jpg、gif、png、bmp或tiff的链接。

No comments: