说明: Plus Size Image Viewer会自动在您选择的图像下方添加一个标题,单击该图标时会启动图像的“加号”版本。放大的图像可以是与原始图像不同的图像,因此前者仅在请求时按需加载。仅供参考,这个脚本的灵感来自在WSJ的 某些页面看到的类似图像查看器 

例:

 

路线

第1步:将以下脚本添加到页面的部分:


它引用了两个外部文件和一个图像。在下面下载它们(右键单击,然后选择“另存为”):

  • plusimageviewer.js

  • plusimageviewer.css

第2步:然后,将以下示例标记添加到:


要为任何图像添加“加号”标题,请在图像的IMG标记内插入红色的两个属性:

data-plusimage =“large.jpg”data-plussize =“700,466” />

哪里:

  • data-plusimage:放大图像的完整URL或路径,例如http://mysite.com/large.jpg或images / large.jpg。

  • data-plussize:放大图像的宽度和高度,格式为“w,h”。像素是假设的单位。

您要编辑的plusimageviewer.js中还有一些变量 ,最值得注意的是,服务器上“关闭”图像的路径:

enlargeboxmarkup:'

closebox.gif ”style =“margin:2px 1px 1px 0”title =“Hide Image”/>
',
captionoffset:[ - , - 15],//标题相对于图像
淡化的左下边缘的附加偏移量:[300,100],/ /淡入和淡出持续时间,以毫秒为单位