功能如题。打开一个新窗口时,不需要点击图片即自动播放第一张图片。怎么做?
下面附上lightbox2.05.js部分源码// LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif', overlayOpacity: 0.8, // controls transparency of shadow overlay animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable // When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});// -----------------------------------------------------------------------------------var Lightbox = Class.create();Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
var objBody = $$('body')[0];
}).defer();
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) { $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); // stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); this.imageArray = [];
var imageNum = 0; if ((imageLink.getAttribute("rel") == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
} // calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
}, // showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
}, document.observe('dom:loaded', function () { new Lightbox(); });
下面附上lightbox2.05.js部分源码// LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif', overlayOpacity: 0.8, // controls transparency of shadow overlay animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable // When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});// -----------------------------------------------------------------------------------var Lightbox = Class.create();Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
var objBody = $$('body')[0];
}).defer();
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) { $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); // stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); this.imageArray = [];
var imageNum = 0; if ((imageLink.getAttribute("rel") == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
} // calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
}, // showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
}, document.observe('dom:loaded', function () { new Lightbox(); });
.bg,.bg1{margin-bottom:8px;}
.mod-slideImg .f-slider-triggers li,.mod-actList .act a,.mod-news .cell .cell-header,.mod-quickLink .cell-header h3,.info-cell .item-bt li.current{background:url(http://www.szsyhaf.com/call/images//bg.png) no-repeat;_background:url(http://www.szsyhaf.com/call/images//bg.gif) no-repeat;}
.mod-slideImg{position:relative;}
.mod-slideImg .f-slider-list{height:290px;width:588px;overflow:hidden; position:relative;}
.mod-slideImg .f-slider-triggers{background:url(http://www.szsyhaf.com/call/images//slide_bt_bg.jpg) no-repeat;height:40px; width:580px;} .mod-slideImg .f-slider-triggers{padding-left:230px; position:absolute;}/*显示位置*/
.mod-slideImg .f-slider-triggers li{background:url(http://www.szsyhaf.com/call/images//bgfor2.jpg) no-repeat;height:22px;width:18px;margin:9px 0 0;cursor:pointer;text-indent:-9999px;overflow:hidden;float:left;}
.mod-slideImg .f-slider-triggers li.current{background:url(http://www.szsyhaf.com/call/images//bgfor1.jpg) no-repeat;}
.f-slider-list{height:260;width:588px;overflow:hidden;position:relative;}
*{ margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://www.szsyhaf.com/call/js/fdev-min.js"></script>
<script type="text/javascript" src="http://www.szsyhaf.com/call/js/index-merge.js"></script><!--图片轮播开始-->
<div style=" border:1px solid #b1c8d6; width:588px; height:330px;">
<div class="yhbg yhbg1">
<div class="mod-slideImg" id="mod-slideImg">
<ul class="f-slider-list">
<li><a href="products.php?pid=1">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/705-1306066373.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=2">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/912-1306066407.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=8">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/916-1306069515.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=9">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/915-1306069532.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=19">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/501-1306066424.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=20">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/501D1-1306069563.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=21">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/301-1306066443.jpg" border="0" width="588" height="290"/>
</a>
</li>
<li><a href="products.php?pid=24">
<img src="http://www.szsyhaf.com/call/yh/back/php/upload/505-1306069583.jpg" border="0" width="588" height="290"/>
</a>
</li>
</ul></div></div>
</div>
<!--轮播结束-->
而且,你应该把你引用LB的网页代码贴出来。这种问题,只是调用一下LB的方法而已,不至于为此而去改LB代码,LB这类脚本控件库不可能如此脆弱。
<c:forEach var="imgStr" items="${listImgValue}">
<a href="pages/tzone/tzoneinfo/images/${imgStr.name}" rel="lightbox[roadtrip]" ><img
src="pages/tzone/tzoneinfo/images/${imgStr.name}?randomNum=${randomNum}" width="100"
height="100" alt="" /> </a>
</c:forEach>
</div>[[/code]