gseeker
给网站的Google Maps链接加上Lightbox效果
将文章归档于 G源共享 由. Ken Wong on 2007-03-03
google_maps_lightbox.JPG

  我相信不少读者朋友早已经知道"Lightbox"是什么了。简单地说,它是一组JS脚本,通过给网站添加这些脚本,可以使网站的图片被点击后,实现动态显示,即使图片尺寸比网站的主框架大,也可以即时在当前窗口打开,点击者并不需要离开当前网页。一直以来,类似的Lightbox JS脚本只针对普通图片有效。对于我们Google Fans而言,我们经常会在网站里加上Google Maps的链接,让读者点击进入Google Maps网站观看。那么有没有办法可以让网站上的Google Maps链接也实现Lightbox效果呢?


  我们只需要利用Mich编写的Google Maps Lightbox JS脚本即可达到目的。效果可见上图,则当读者点击了添加了Google Maps Lightbox JS脚本的网站里的Google Maps链接时,可即时动态地在当前页浏览Google Maps,不必再打开新网页。特别是在RSS阅读器里,读者可以直接在RSS阅读界面内浏览Google Maps,非常方便。

  实现的方法类似于实现普通的针对图片的Lightbox效果,即通过给网站加载相应的Javascript及CSS文件,然后激活它们即可。如果你之前对Lightbox的实现方法一无所知,强烈建议先参考蓝色的教程,或者fisker之前给出的步骤。Mich给出的步骤如下:

1.下载Google Maps Lightbox,解压并上传至你的空间;
2.如果你之前没有申请过Google Maps key,请点击这里申请一个;
3.分别把gmlightbox.js和gmlightbox.css文件以代码方式加载进网页的适当位置,具体做法可参见上面的蓝色教程。类似于:

< script src = "http://你的网站具体路径/gmlightbox/gmlightbox.js" type="text/javascript" >< /script >

< link href = "http://你的网站具体路径/gmlightbox/gmlightbox.css" rel="stylesheet"/ >

  完成之后,在网页里添加Google Maps链接里,使用下面的格式即可:

< a href="Google Maps链接" rel="gmap" >文字说明< /a >

  由于条件限制,实例演示请到Mich的网站里点击观看。
Permalink: 给网站的Google Maps链接加上Lightbox效果
img Addthis img Ask img Blinklist img del.icio.us img Digg img Fark img Facebook img Google img Lycos img Ma.gnolia Add this page to Mister Wong Mr Wong img Netscape img Netvousz img Newsvine img Reddit img StumbleUpon img Slashdot img Tailrank img Technorati img Wink img Yahoo

Vote for 给网站的Google Maps链接加上Lightbox效果:

  • Currently 9.43/10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
分值情况: 9.43 / 7 评分
 
Share It
CW工具栏安设
RSSrss   | 所有的部落格订阅选择
Google google   |   什么是RSS?
Yodao Yodao
Netvibes Netvibes
AnothrAnothr
TwitterFollow us on Twitter!