两个HighSlide类并存的解决方案

来源：互联网发布：pubwin2015的数据库编辑：程序博客网时间：2024/06/03 19:38

这里的“两个并存”的目的是，当项目中已经存在一个HighSlide类并且调用hs.expand(this, paras)时paras中不含有 slideshowGroup 参数时，要不影响它们按原法调用，同时能够创建新的样式的HighSlide展示。
没有找到更好的办法，本人就是复制一份highslide-full.js，重命名为highslide-full-new.js，包含到<head>和</head>内。

然后将highslide-full-new.js的
1、“if(!hs){ var hs=…”中的”hs“改成” hsNew“；
替换文件中所有的”hs.“和”hs[“分别为”hsNew.“和”hsNew[“；
2、将含有许多”<div>“标签的那两段代码中的hsNew.lang替换成hs.lang（不知为何）；
3、然后在<head>与</head> 中间另一个HighSlide类的配置代码的后面，加入新的配置代码（这里用的是修改版的 Horizontal thumbstrip at the bottom, white rounded 样式）

如下：
hsNew.graphicsDir = '/Scripts/Reference/highslide/graphics/';
hsNew.align = 'center';
hsNew.transitions = ['expand', 'crossfade'];
hsNew.fadeInOut = true;
hsNew.dimmingOpacity = 0.8;
hsNew.outlineType = 'rounded-white';
//hsNew.captionEval = 'this.thumb.alt';
hsNew.marginBottom = 105; // make room for the thumbstrip and the controls
hsNew.numberPosition = 'caption';
// Add the slideshow providing the controlbar and the thumbstrip
hsNew.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    overlayOptions: {
    className: 'text-controls',
    position: 'bottom center',
   relativeTo: 'viewport',
   offsetY: -60
    },

    thumbstrip: {
    position: 'bottom center',
    mode: 'horizontal',
   relativeTo: 'viewport'
    }
});

转自：http://bokeyy.com/web-programming/31.html