网站缩略图插件

效果:当鼠标指向一个链接,鼠标右下方会显示该网页截图。在留言功能上尤其好用,当鼠标停在名字上,就可预览到留言者的网页缩略图,唯一不好的就是只显示目标网站的首页。
ShrinkTheWeb是一个相当实用的服务,它能够在短短的几秒钟内,透过您所输入的网址请求,产生该网站或网页的缩图。你可以方便地使用这些网站截图来作为撰写文章或推荐网站,分享给朋友时使用,无须下载任何程式。注册后,您可透过该帐号取得外部连结网站缩图的权限,也就是能够直接连结ShrinkTheWeb的任何缩图,这也就表示你无须每次更新缩图,都能取得该网站的最新缩图。
官方网站:http://www.shrinktheweb.com/
这个效果是我无意中从willin的博客中看到的,于是研究了下他的网页,于是乎发现了这个。其实ShrinkTheWeb是有提供WordPress插件的,去注册个账号得到Access Key和Secret Key然后后台启用这个插件就可以了,不过用这个插件打开的窗口里面有官方的宣传链接,也不是很好看,而willin的博客中却没有这个广告,于是继续看他的页面,发现只是简单的引入了一个JS而已,
是从客户端Cookie中读取的Access Key和Secret Key,又看了看官方提供的WordPress插件,发现这个Secret Key貌似并没有什么用处,于是把他的JS改了下,我把Access Key写死在里面。

jQuery( document ).ready( function($) {
	plg_url = 'http://www.ineeke.com/wp-content/plugins/stw';
	set_url = 'http://www.ineeke.com';
	stw_key = '你的Access Key';
        // 对哪些链接启用此功能,这里的参数需要自己手工改,因为每个人的博客主题不一样。
	$('.commentlist a').mouseover( function() { 
		if ( !stw || $(this).hasClass('more-link') || $(this).parents().hasClass('postmetadata') ) return false; 
		//自己加的,因为不是每一个a标签都会有href属性
		if(!$(this).attr( 'href' )){
			return false;
		}
		trg_url = $(this).attr( 'href' ).toLowerCase().replace( 'www.', '' );
		stw_url = 'http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=' + stw_key + '&stwsize=lg&stwUrl=' + trg_url;
		$('#footer').after( '<div id="webshot" style="width:243px;height:195px;position:absolute;bottom:20000px;display:none;background:url('
		 + plg_url + '/bg.png);z-index:9999;"><img src="'
		 + stw_url + '" onerror=\'this.src="'
		 + stw_url + '";\' style="width:200px;height:150px;margin:25px 0 0 24px;border:3px solid #fff;" /></div>' );
		if ( !$.browser.msie ) { $('#webshot').css({ opacity: 0.8 }).fadeIn( 500 ) } else { $('#webshot').show() }
		}).mousemove( function(e) { $('#webshot').css( { left: e.pageX + 15, top: e.pageY + 15 } )
		}).mouseout( function() { if ( !$.browser.msie ) { $('#webshot').fadeOut( 800, function() { $(this).remove() } ) } else { $('#webshot').remove() }
		})
});

其中plg_url,set_url,stw_key改成自己的就行了,背景图片http://www.ineeke.com/wp-content/plugins/stw/bg.png,说是个插件,其实就是个JS。


除非另有声明,本站遵循【署名-非商业性使用-相同方式共享 3.0 共享协议】授权。

转载原创文章请注明,转载自:Neeke[http://www.ineeke.com]

本文链接: http://www.ineeke.com/archives/site-thumbnail-plug-in/

2009年12月19日 | 归档于 网络拾遗 | 15 条评论
标签: ,
  1. 2010年1月5日 12:54 | #1

    第一次卡,后面再来用了缓存就比较好了 还是不喜欢这个插件 呵呵!

    Neeke :
    我咋不觉得卡呢?

  2. 2010年1月2日 17:52 | #3

    这个插件太卡了…不太适合!

  3. 2010年1月1日 13:42 | #5

    这功能不错,不过感觉怪怪的,可能是我还没适应吧。

  4. 2009年12月24日 15:36 | #6

    挺好看的,有时间就装到测试站上玩玩,看看有多强大

  5. 2009年12月22日 15:22 | #7

    不错。这个好。。收藏下。。

    • 2009年12月23日 09:37 | #8

      n:-hx 看到你的名字我就想到春晚上赵本山的那句话。

  6. 2009年12月20日 23:03 | #9

    JS啊。。。有时间了得学学喽。。。呵呵。现在很多朋友都会这个,我一点也不懂呢。。。 n:-bz

  7. 2009年12月19日 22:26 | #11

    来留言看看大哥…跟你以后走一条道路 n:-hx

  8. 2009年12月19日 16:43 | #14

    显示的首页还是我以前的首页……

发表评论

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
n:-zy n:-zr n:-zan n:-xf n:-wx n:-tz n:-tt n:-ts n:-sy n:-st n:-ss n:-sk n:-qd n:-pz n:-lh n:-kun n:-ku n:-hx n:-hd n:-gt n:-gg n:-bz

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!