在网上找了一个老外写的JS代码,LightBox2.0,效果就是单击了具有连接的缩略图之后并不打开页面,而是出现一个半透明的层把页面遮住,在那个层之上显示图片。
这个代码使用了CSS,在<head>中加上了
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
然后只要连接加上rel=“lightbox”就可以了。
<a href="图片位置" rel="lightbox">这里随便写,可以是缩略图</a>据我猜,他是在页面加载的时候执行了,获取所有带有rel="lightbox"的<a>,
但是我的页面内容很多都是使用Ajax动态获取的,那些就没有LightBox的效果。可能在每次用Ajax获取新内容后,重新执行一遍他的js就好。但是我实在看不懂那些js,希望JS达人帮忙找一下,或者用汉语描述一遍他的过程总共4个js文件:
第一个scriptaculous.js// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
// 
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.var Scriptaculous = {
  Version: '1.5.1',
  require: function(libraryName) {
    // inserting via DOM fails in Safari 2.0, so brute force approach
    document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
  },
  load: function() {
    if((typeof Prototype=='undefined') ||
      parseFloat(Prototype.Version.split(".")[0] + "." +
                 Prototype.Version.split(".")[1]) < 1.4)
      throw("script.aculo.us requires the Prototype JavaScript framework >= 1.4.0");
    
    $A(document.getElementsByTagName("script")).findAll( function(s) {
      return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
    }).each( function(s) {
      var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
      var includes = s.src.match(/\?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
       function(include) { Scriptaculous.require(path+include+'.js') });
    });
  }
}Scriptaculous.load();

解决方案 »

  1.   

    代码在这里:http://download.csdn.net/source/1768110
      

  2.   

    补充:在Lightbox.js中有这些内容:
    // Lightbox Class Declaration
    // - initialize()
    // - start()
    // - changeImage()
    // - resizeImageContainer()
    // - showImage()
    // - updateDetails()
    // - updateNav()
    // - enableKeyboardNav()
    // - disableKeyboardNav()
    // - keyboardNavAction()
    // - preloadNeighborImages()
    // - end()
    //
    // Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
    //
    var Lightbox = Class.create();Lightbox.prototype = {

    // initialize()
    // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
    // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
    // the function inserts html at the bottom of the page which is used to display the shadow 
    // overlay and the image container.
    //
    initialize: function() {
    意思应该是initialize()用于初始化。但是initialize: function() {这样的怎么调用啊。直接写initialize()会报错啊
      

  3.   

    var lightbox = new Lightbox();
    lightbox.initialize();