[学习交流] 【广州PHP】baguettebox相册全屏弹窗插件

本帖最后由 gz_xudada 于 2018-10-20 00:10 编辑

1. baguettebox.js简介

使用baguettebox相册全屏弹窗显示插件，使用起来非常的简单。

它的功能:

可以实现相册全屏弹窗显示。

可以把显示图片变为响应式的图片显示。

切换模式有2种，第一种是默认模式，从右向左滑动过去切换，第二种是淡入淡出的切换效果。

2. 下载baguettebox.js

可以百度baguettebox.js来下载js与css文件

也可以通过github下载,具体地址为:https://github.com/feimosi/baguetteBox.js

解压压缩包得到文件夹

打开dist目录,就可以看到我们需要用到的js和css文件了

3. 准备图片素材

4. 书写HTML结构

我们需要在html中引入相应图片信息，这里img标签src设置的路径为缩略图，a链接的href属性设置的就是点击之后全屏弹出大图。

5. 使用CSS对页面整体简单的布局

6. 引入baguettebox.min.css样式

7. 通过cdn引入jquery

注意:cdn引入的话,需要连接网络;并且引入jquery.js需要在baguettebox引入之前

8. 引入baguettebox.min.js

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wpsACD3.tmp.jpg

9. 预览页面

10. 编写js代码，使用baguettebox插件

10.1. 用法1 : 默认从右向左滑动过去切换图片

点击某个缩略图片以后的预览效果: 左右按钮可点击切换图片,关闭按钮可以关闭预览图片

10.2. 用法2 : 淡入淡出切换图片模式

点击预览图片后,切换图片的时候会增加淡入淡出的动画效果

11. 完整代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                /* 清除内外边距 */
                *{
                        margin: 0;
                        padding: 0;
                }
                /* 设置整个页面的背景颜色 */
                body{
                        background-color: #666666;
                }
                /* 设置总宽度,在页面中居中显示 */
                .gallery{
                        width: 1000px;
                        margin: 50px auto;
                }
                /*设置a标签左浮动,宽度高度*/
                .gallery a{
                        float: left;
                        width: 240px;
                        height: 180px;
                        margin-right: 10px;
                        margin-top: 10px;
                }
                /*统一设置img图片大小*/
                .gallery a img{
                        width: 100%;
                        height: 100%;
                }
        </style>
        <link rel="stylesheet" href="css/baguetteBox.min.css">
        <!-- 引入jquery库 -->
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src='js/baguetteBox.min.js'></script>
        <script type="text/javascript">
                $(function(){
                        baguetteBox.run('.gallery', {
                            animation: 'fadeIn',
                            noScrollbars: true
                        });
                })
        </script>
</head>
<body>
        <div class="gallery">
        <a href="images/1-1.jpg">
            <img src="images/thumbs/1-1.jpg">
        </a>
        <a href="images/1-2.jpg">
            <img src="images/thumbs/1-2.jpg">
        </a>
        <a href="images/1-3.jpg">
            <img src="images/thumbs/1-3.jpg">
        </a>
        <a href="images/1-4.jpg">
            <img src="images/thumbs/1-4.jpg">
        </a>
        <a href="images/1-5.jpg">
            <img src="images/thumbs/1-5.jpg">
        </a>
        <a href="images/1-6.jpg">
            <img src="images/thumbs/1-6.jpg">
        </a>
        <a href="images/1-7.jpg">
            <img src="images/thumbs/1-7.jpg">
        </a>
        <a href="images/1-8.jpg">
            <img src="images/thumbs/1-8.jpg">
        </a>
    </div>
</body>
</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州PHP】baguettebox相册全屏弹窗插件

0 个回复