两个HighSlide类并存的解决方案

(续此文《使用JSON和JQuery生成动态的父框架HighSlide展示》) 这里的“两个并存”的目的是,当项目中已经存在一个HighSlide类并且调用hs.expand(this, paras)时paras中不含有 slideshowGroup 参数时,要不影响它们按原法调用,同时能够创建新的样式的HighSlide展示。 没有找到更好的办法,本人就是复制一份highslide-full.js,重命名为highslide-full-new.js,包含到和内。 然后将highslide-full-new.js的

  1. “if(!hs){ var hs=…”中的”hs“改成” hsNew“;
  2. 替换文件中所有的”hs.“和”hs[“分别为”hsNew.“和”hsNew[“;
  3. 将含有许多”

    “标签的那两段代码中的hsNew.lang替换成hs.lang(不知为何);

    然后在与 中间另一个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’

        }

    });

        最后在iframe里面加入此文《使用JSON和JQuery生成动态的父框架HighSlide展示》内的代码,即可。