这个代码使用了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();
6 个解决方案
#1
晕,太长发不出来。等下上传文件
#2
代码在这里:http://download.csdn.net/source/1768110
#3
补充:在Lightbox.js中有这些内容:
意思应该是initialize()用于初始化。但是
// 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()会报错啊
#4
initialize: function()
#5
var lightbox = new Lightbox();
lightbox.initialize();
lightbox.initialize();
#6
感谢#5木北北
#1
晕,太长发不出来。等下上传文件
#2
代码在这里:http://download.csdn.net/source/1768110
#3
补充:在Lightbox.js中有这些内容:
意思应该是initialize()用于初始化。但是
// 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()会报错啊
#4
initialize: function()
#5
var lightbox = new Lightbox();
lightbox.initialize();
lightbox.initialize();
#6
感谢#5木北北