`
mengxianhua
  • 浏览: 31747 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

两个HighSlide类并存的解决方案

阅读更多

这里的“两个并存”的目的是,当项目中已经存在一个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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics