README

一个轻量级的CSS3图片和视频查看器，外观漂亮且易于使用。

演示页面

优势

轻量级！jquery.photobox.js 只有 5kb（压缩并最小化）
丝滑流畅、硬件加速的CSS3过渡和动画（以提高性能）
支持通过iframe嵌入视频
惊艳的UI和用户友好的UX
构建方式允许直接通过CSS进行更改
观察DOM变化（如果添加或删除了图片）并相应地适应
CSS3预加载器，定制化
在所有缩略图点击上使用事件委托（显然...）
使用HTML5历史记录来更新位置为当前查看的图片
唯一的图片是为旧IE准备的预加载动画。其余部分，完全没有图片！
浏览器支持：IE8+（优雅降级）、现代浏览器

功能

可以使用鼠标滚轮放大和缩小图片/视频，并使用鼠标移动来导航
底部缩略图行，通过鼠标移动导航，可以使用鼠标滚轮调整大小
在底部显示图片的 'alt' 或 'title' 属性文本
显示当前查看的图片索引与总数的关系，例如：(36/100)
触摸友好，左右滑动切换图片。上下滑动切换缩略图条
支持在第一张和最后一张图片之后循环
在设定的时间间隔内自动播放图片（请在设置中查看 "time"）
支持键盘键进行导航和关闭画廊视图
如果在加载图片时发生错误，将显示一条消息，可以通过CSS进行配置

基本使用案例示例

<div id='gallery'>
    <a href="http://www.somedomain.com/images/image1_large.jpg">
        <img src="http://www.somedomain.com/images/image1_small.jpg"
            title="photo1 title">
    </a>
    <a href="http://www.somedomain.com/images/image2_large.jpg">
        <img src="http://www.somedomain.com/images/image2_small.jpg"
            alt="photo2 title">
    </a>
    <a href="http://www.somedomain.com/images/image3_large.jpg">
        <img src="http://www.somedomain.com/images/image3_small.jpg"
            title="photo3 title">
    </a>
    <a href="http://www.somedomain.com/images/image4_large.jpg">
        <img src="http://www.somedomain.com/images/image4_small.jpg"
            alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
    </a>
    <a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
        <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
            title="PEOPLE ARE AWESOME 2013 FULL HD ">
    </a>
</div>
...
...
...
<script>
    // applying photobox on a `gallery` element which has lots of thumbnails links.
    // Passing options object as well:
    //-----------------------------------------------
    $('#gallery').photobox('a',{ time:0 });

    // using a callback and a fancier selector
    //----------------------------------------------
    $('#gallery').photobox('li > a.family',{ time:0 }, callback);
    function callback(){
       console.log('image has been loaded');
    }

    // destroy the plugin on a certain gallery:
    //-----------------------------------------------
    $('#gallery').photobox('destroy');

    // re-initialize the photbox DOM (does what Document ready does)
    //-----------------------------------------------
    $('#gallery').photobox('prepareDOM');
</script>

视频

<div id='gallery'>
    ...
    <a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
        <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
            title="PEOPLE ARE AWESOME 2013 FULL HD ">
    </a>
    ...
</div>

视频链接必须具有值为 video 的 rel 属性。链接的URL必须是iframe嵌入（youtube、vimeo等）。您可以在其中放置视频的缩略图（当然）

更改效果非常简单！

我设计了Photobox（作为图片查看器）一次只显示一个项目（图片或视频），因此，图片之间切换的工作原理是首先当前图片必须自身过渡到 "外部"，javascript代码将 "监听" 这个过渡，当它完成时，代码将重置某些东西到初始状态，用新的一个替换项目，并将新项目过渡到视图中。效果是通过CSS完成的，并且很容易更改！

默认过渡是当前图片 "增长" 并淡出视图，当它完全消失时，新图片将出现并增长、旋转直到它 "平坦"（一点点）并淡入。每次更改图片（无论是下一个还是上一个）时，pbOverlay 元素都将具有代表该更改的类 'next' 或 'prev'，因此您可以利用这些类来实现效果，例如，图片像移动到两侧一样，取决于方向，例如，您可以使用以下CSS片段来实现这一点

.pbHide .pbWrapper > *,
.pbHide .pbWrapper > .prepare{ opacity:0; transition:.2s ease-in; }

.pbWrapper > div,
.pbWrapper > img{
    transition:.2s ease-out;
    opacity: 1;
}

/*** when going to the next slide ***/
/* prepare next slide which will be shown */
.pbWrapper > *,
.pbHide.next .pbWrapper > .prepare{ transform:translatex(40%); }
/* prepare current slide which will "go away" */
.pbHide.next .pbWrapper > *{ transform:translatex(-40%);  }

/* when going to the previous slide */
.pbWrapper > *,
.pbHide.prev .pbWrapper > .prepare{ transform:translatex(-40%); }
.pbHide.prev .pbWrapper > *{ transform:translatex(40%); }

自定义标题链接

您可以在图像缩略图上添加自己的链接以及 title 或 alt 属性文本，只需给图像缩略图添加 data-pb-captionLink 即可

data-pb-captionLink='Google网站[www.google.com]'

覆盖默认设置

建议不要直接修改源代码，因为这样您将拥有一个与任何未来版本不同步的版本，并且您可能在与自己的更改合并时遇到一些困难。因此，如果您想更改某些内容，我建议创建另一个文件，通常称为 jquery.photobox.mod.js。这一良好做法也适用于CSS文件。

示例

/*!
    photobox modifications,
    after it has been loaded
*/

(function(){
    "use strict";
    // adding a "userInfo" HTML to the overlay container:
    var userInfo = $('<div class="userInfo"><img><span></span></div>');

    var photoboxCallbacks = (function(){
        // do something
    })();

    // change defaults:
    window._photobox.defaults.time = 0;
    window._photobox.defaults.beforeShow = photoboxCallbacks.beforeShow;

    // append "userInfo" after DOMReady has been fired
    // (the overlay won't exist in the DOM before then)
    $(document).ready(function(){
        var overlay = $('#pbOverlay');

        // add class to the default close button
        $('#pbCloseBtn').addClass('btn');

        // append user info DOM structure
        overlay.append(userInfo);
    });
})();

drupal-package / photobox

维护者

详细信息