单页面相册灯箱效果

最新推荐文章于 2023-12-01 11:59:23 发布

原创最新推荐文章于 2023-12-01 11:59:23 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #jquery

css 专栏收录该内容

12 篇文章

订阅专栏

该博客展示了如何结合Bootstrap框架和Lightbox插件创建一个单页面相册。通过HTML和CSS，实现了响应式的布局，使得图片在不同设备上都能良好展示。同时，Lightbox插件为图片提供了弹出式全屏查看的功能，增强了用户体验。文章还包含了具体的代码示例，详细解释了每个部分的作用。

bootstrap+lightbox

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>单页面相册</title>
    <link rel="stylesheet" href="day_13.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">
</head>
<body>
<section class="section" id="projects">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="section-heading">
                    <h6>Our Projects</h6>
                    <h2>some of  our latest projects</h2>
                </div>
                <div class="filters">
                    <ul>
                        <li class="active" data-filter="*">all</li>
                        <li data-filter=".des">Web Design</li>
                        <li data-filter=".dev">Web Development</li>
                        <li data-filter=".gra">Graphics</li>
                        <li data-filter=".tsh">Artworks</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="filters-content">
                    <div class="row grid">
                        <div class="col-md-4 all des">
                            <div class="item">
                                <a href="images/1.jpg" data-lightbox="image-1">
                                    <img src="images/1.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 all dev">
                              iv class="item">
                                <a href="images/2.jpg" data-lightbox="image-1">
                                    <img src="images/2.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 all gra">
                            <div class="item">
                                <a href="images/3.jpg" data-lightbox="image-1">
                                    <img src="images/3.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 all tsh">
                            <div class="item">
                                <a href="images/4.png" data-lightbox="image-1">
                                    <img src="images/4.png" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 all dev">
                            <div class="item">
                                <a href="images/5.png" data-lightbox="image-1">
                                    <img src="images/5.png" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 all des">
                            <div class="item">
                                <a href="images/6.jpg" data-lightbox="image-1">
                                    <img src="images/6.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="./jquery-1.8.3.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous"></script>
<script>
    (function($){
        "use strict"
        $(".filters ul li").click(function(){
            $(".filters ul li").removeClass("active");
            $(this).addClass("active");
            var data = $(this).attr('data-filter');
            $grid.isotope({
                filter:data
            })
        });
        var $grid = $(".grid").isotope({
            itemSelector:".all",
            percentPosition:true,
            masonry:{
                columnWidth:".all"
            }
        })
    })(window.jQuery)
</script>
</body>
</html>

body {
    font-family: sans-serif;
    background-color: #4c4177;
    background-image: linear-gradient(315deg, #4c4177 0%, #2a5470 74%);
    height: 100vh;
    overflow: hidden;
    color: white;
}
#projects {
    padding-top: 120px;
}

#projects .section-heading {
    margin-bottom: 60px;
}

#projects .section-heading h6,
#projects .section-heading h2 {
    color: #5fb759;
}

.filters {
    margin-top: 50px;
}

.filters ul {
    padding: 0;

}

.filters ul li {
    list-style: none;
    display: block;
    padding: 15px 0;
    cursor: pointer;
    position: relative;
    font-size: 17px;
    font-weight: 500;
    color: white;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.filters ul li .active,
.filters ul li:hover {
    color: #5fb759;
}

.filters-content .show {
    opacity: 1;
    visibility: visible;
    transition: all 350ms;
}

.filters-content .hide {
    opacity: 0;
    visibility: hidden;
    transition: all 350ms;
}

.filters-content .all {
    margin-bottom: 30px;
}

.filters-content .item {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.filters-content .item:hover {
    opacity: 0.75;
}

.filters-content .item img {
    width: 100%;
    border: 4px solid white;

}