您的位置：首页 > Web前端 > JQuery

JQuery开发之Galleriffic图片插件介绍

2016-09-22 11:10 477 查看

1. 下载最新版本的Galleriffic与jQuery。jQuery在1.3.2以上。

　　2. 在目标HTML代码中引入jQuery库与Galleriffic插件。两者的实现方式均为javascript。

<head>

    ...

    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>

    

    <script type="text/javascript" src="js/jquery.history.js"></script>

    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

    ...
</head>

3. 添加容器元素Div。值得注意的是，这里所有的Div都是可选的。用户可以根据自己的实际情况做出取舍。

<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">

    ... 这里用来放图片清单…(见步骤4)
</div>

4. 建立图片清单列表

<div id="thumbs">

    <ul class="thumbs noscript">

        <li>

            <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your
image title">

                <img src="path/to/thumbnail" alt="your
image title again for graceful degradation" />

            </a>

            <div class="caption">

                (这里用来放标题、描述等信息)

            </div>

        </li>

        ... (接下的就是类似上面的li代码，一个li元素包含一张图片)

    </ul>
</div>

　5. 初始化插件

var gallery = $('#gallery').galleriffic('#thumbs', {
        delay:                  3000 // 动画播放间隔时间

        numThumbs:              20 // 所要显示的图片数目

        preloadAhead:           40 // 设置为-1时预加载所有图片

        enableTopPager:         false,

        enableBottomPager:      true,

        imageContainerSel:      '', // 接下来的三个属性是作为容器的css名
        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:       true, // 是否显示播放与暂停按钮

        renderNavControls:      true, // 是否显示前进后退按钮

        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next ›',
        prevPageLinkText:       '‹ Prev',
        enableHistory:          false, // Specifies whether the url's
hash and the browser's history cache should update when the current slideshow image changes
        autoStart:              false, // 是否自动播放

        onChange:               undefined, // 接下来是插件的回调函数

        onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }

        onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }

        onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }

        onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }

    });

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航