我可以从您发送给我的开发图库中看到,您正在使用页内图库,除了拇指条中的常规缩略图之外,您还使用下拉列表更改图像。
这是我们常规的页内画廊:http ://highslide.com/examples/gallery-in-page.html
这个画廊和所有 Highslide 画廊一样,浮动在页面顶部,但页内画廊有代码以防止它被关闭。
这是我在旧论坛中为您创建的演示画廊:http: //jsfiddle.net/roadrash/y5nZA/
请注意,onchange
每次我们从下拉列表中选择新图像时,画廊都会关闭。
onchange="document.getElementById(this.options[this.selectedIndex].value).onclick(); hs.close()"
为了能够从 关闭画廊onchange
,我们必须在 highslide 设置中删除这部分:
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
并添加这个,因为 Highslide 也可以从 ESC 键关闭 - 我们想要防止:
// Prevent to close the gallery from ESC key
hs.onKeyDown = function (sender, e) {
if( e.keyCode == 27 ) return false;
};
您可能没有注意到常规页内画廊和我的演示画廊之间的这些重要区别。您的开发图库的问题在于,每次在下拉列表中选择新图像时,您实际上都会打开一个新图库。您可以从拇指条中缩略图下方的小箭头看到这一点;它不应该超过一个箭头,但是每次我们在下拉列表中选择新图像时,在您的图库中都会添加一个新箭头。
我创建了一个类似于您的开发库的 jsFiddle:http: //jsfiddle.net/7tSBE/在这里,使用下拉列表打开新图像时,更容易看到画廊堆叠在一起,因为我使用的图像具有不同的大小。(此演示没有像您在开发图库中那样从 onImageClick 打开顶部图库。)
我不能把你需要的所有代码都放在这里,所以我创建了一个与你的开发画廊非常相似的新演示画廊(顶部画廊从 onImageClick 打开)。HTML 标记与您的相同。重要的变化是在 Highslide 设置中,而且还有比我上面提到的变化更多的变化。http://jsfiddle.net/roadrash/y5nZA/1/
这是您需要hs.close();
在代码中添加的部分(后面的行ChangeImage();
)。此代码在我的演示页面中看起来不一样。
function SetImageSwatchEvents() {
$('#lstOptions').bind('change', function () {
SetImageSwatches(1);
});
$('#lstOptions2').bind('change', function () {
SetImageSwatches(2);
ChangeImage();
hs.close();
});
}