jQuery中图片展示插件highslide.js的简单dom

下面是jQuery中图片展示插件highslide.js的简单dom攻略：

一、什么是highslide.js

Highslide JS是一个高效漂亮的展示图片、HTML内容以及多媒体的JavaScript弹出窗口插件，支持滑动切换多图，支持i18n国际化，支持触摸屏幕操作。它致力于让展示内容更加优美、友好、易用，帮助您打造专业化的网站。您可以在官网下载，也可以在github上获取源码，还可以在cdn上获取。

二、如何引用和使用

1.引用

在使用之前，需要引入highslide.js及相关的CSS和JS文件。在HTML文件head标签中加入以下代码即可：

<!-- 引入highslide的CSS和JS文件 -->
<link rel="stylesheet" type="text/css" href="highslide.css" />
<script type="text/javascript" src="highslide.js"></script>

2.使用

1）基本使用

在需要展示的图片a标签中加入class="highslide"，并设置href为需要展示的图片路径即可，如下：

<!-- 被点击的图片 -->
<a href="images/01.jpg" class="highslide">
    <img src="images/01-32x32.jpg" alt="图片1" />
</a>

在HTML文件中加入以下默认配置：

<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';//高清图片的默认路径
    hs.showCredits = 0;//是否显示logo
    hs.outlineType = 'glossy-dark';//设置图片的轮廓线效果
    hs.captionEval = 'this.a.title';//设置图片的描述
    hs.lang = {
        loadingTitle : '加载中...',
        loadingText : '图片加载中，请稍候...',
        closeText : '关闭',
        previousText : '上一张',
        nextText : '下一张',
        moveText : '移动',
        fullExpandTitle : '放大到原始尺寸 (f)',
        fullExpandText : '放大',
        restoreTitle : '缩小 (z)',
        restoreText : '还原',
        playTitle : '开始幻灯片 (空格)',
        playText : '幻灯片',
        pauseTitle : '暂停幻灯片 (空格)',
        pauseText : '暂停'
    };//i18n文字设置
    hs.align = 'center';//图片显示位置
    hs.transitions = ['expand', 'crossfade'];//图片显示效果
    hs.fadeInOut = true;//是否渐入渐出
    hs.dimmingOpacity = 0.75;//灰色遮罩层的透明度
    hs.wrapperClassName = 'draggable-header';//设置容器的class
    hs.marginBottom = 100;//底部边距
</script>

2）高级使用

高级使用涉及配置项较多，可以参考官网文档或示例代码，这里只提供一个比较常用的示例代码：

<style type="text/css">
    /* 缩略图样式 */
    div.thumb {
        border: 1px solid #ccc;
        margin: 5px;
        padding: 5px;
        float: left;
        height: 75px;
        width: 75px;
    }
    div.thumb img {
        height: 75px;
        width: 75px;
    }
</style>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';//高清图片的默认路径
    hs.showCredits = 0;//是否显示logo
    hs.outlineType = 'glossy-dark';//设置图片的轮廓线效果
    hs.captionEval = 'this.a.title';//设置图片的描述
    hs.lang = {
        loadingTitle : '加载中...',
        loadingText : '图片加载中，请稍候...',
        closeText : '关闭',
        previousText : '上一张',
        nextText : '下一张',
        moveText : '移动',
        fullExpandTitle : '放大到原始尺寸 (f)',
        fullExpandText : '放大',
        restoreTitle : '缩小 (z)',
        restoreText : '还原',
        playTitle : '开始幻灯片 (空格)',
        playText : '幻灯片',
        pauseTitle : '暂停幻灯片 (空格)',
        pauseText : '暂停'
    };//i18n文字设置
    hs.align = 'center';//图片显示位置
    hs.transitions = ['expand', 'crossfade'];//图片显示效果
    hs.fadeInOut = true;//是否渐入渐出
    hs.dimmingOpacity = 0.75;//灰色遮罩层的透明度
    hs.wrapperClassName = 'draggable-header';//设置容器的class
    hs.marginBottom = 100;//底部边距
</script>
<div>
    <!-- 缩略图 -->
    <div class="thumb">
        <a href="images/01.jpg" class="highslide" title="图片1">
            <img src="images/01-32x32.jpg" alt="图片1" />
        </a>
    </div>
    <div class="thumb">
        <a href="images/02.jpg" class="highslide" title="图片2">
            <img src="images/02-32x32.jpg" alt="图片2" />
        </a>
    </div>
    <div class="thumb">
        <a href="images/03.jpg" class="highslide" title="图片3">
            <img src="images/03-32x32.jpg" alt="图片3" />
        </a>
    </div>
    <div class="thumb">
        <a href="images/04.jpg" class="highslide" title="图片4">
            <img src="images/04-32x32.jpg" alt="图片4" />
        </a>
    </div>
    <div class="thumb">
        <a href="images/05.jpg" class="highslide" title="图片5">
            <img src="images/05-32x32.jpg" alt="图片5" />
        </a>
    </div>
</div>

三、注意事项

1. highslide.js需要jQuery支持，确保jQuery的正确引用；
2. 需要确保高清图片的路径正确，否则图片无法显示；
3. 需要在同一目录下放置highslide.js及相关文件；
4. 在使用高级使用代码中给出的缩略图样式时，需要确保图片大小与样式中的宽高一致；
5. 可以组合使用不同的配置项来满足不同的需求。

以上就是jQuery中图片展示插件highslide.js的简单dom攻略，希望对你有所帮助。