当前位置: 代码迷 >> Web前端 >> 干的一个图片超爽显示的插件
  详细解决方案

干的一个图片超爽显示的插件

热度:87   发布时间:2012-10-07 17:28:51.0
做的一个图片超爽显示的插件
1、这个插件通用性很差,目前只适用于网址http://www.yixieshi.com/pd/7162.html放在百度上使有很大的问题,涉及到插件的设计。。。。。。
如果要具有普世性,那么必须对于选择器有严格的要求。
2、此插件应用了jQuery和jQuery.lightBox插件(目前还未对其原理熟悉,只是会简单的应用)
3、此插件用了content script来注入到网页中去,值得一提的是manifest。json
{

  "name": "tututu",
  "version": "1.0",  
  "permissions":[
	 "tabs", "http://*.yixieshi.com/"
	]
	,
	"content_scripts": [
    {
      "matches": ["http://*.yixieshi.com/*"],
      "js": ["jquery.js","jquery.lightbox-0.5.js","TimeLimit.js"],
	  "css":["jquery.lightbox-0.5.css"]
    }
  ]
}

给网页注入的不光是js,还有css
4、还有一点突破就是,可能js里要用到本地的图片所以,搜索到要用一下代码
chrome.extension.getURL('images/lightbox-btn-next.gif')
方法参考http://code.google.com/chrome/extensions/extension.html#method-getURL
5、wrap方法不大好使,不让用$(this),即
$(".articleContent center img").wrap("<a href='"+$(this).attr("src")+"' rel='lightbox' title='88888'></a>");
后来只能改成了
$(".articleContent center img").each(function(){
					$(this).wrap("<a href='"+$(this).attr('src')+"' rel='lightbox' title='88888'></a>");
				})

6、还有进一步更新的空间:(1)能跟踪鼠标滑轮和ESC键,使图片放大缩小。(2)能应用于人人网,查看图片。(3)相集的查看功能未实现。
附上完整代码
  相关解决方案