jquery - 图库 div 与页脚重叠

Question

好吧，我是编码初学者。我下载了 Galereya Jquery 脚本。它有效，但它与代码中它下面的所有其他内容重叠。我尝试更改溢出和位置，但似乎没有任何效果。当我将它添加到另一个 div 中时，网格停止工作。是的，我可以添加高度 px，但并非所有页面的高度都相同(和移动版本问题)。

问题仅在我添加此画廊代码时出现。如果我添加其他内容，那不会重叠。

这是我正在使用的代码。

        $(function() {
            $('#galleryherepls').galereya();
        });

/* Gallery (begin) */
.galereya {
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
}

.galereya *,
.galereya-slider * {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .galereya-clearfix {
        clear: both;
    }

    .galereya-top {
        
        top: 0;
        left: 0;
        z-index: 10000;
        width: 100%;
        height: 100%;

        background: transparent;
    }
        /* Gallery category select(begin) */
        .galereya-cats {
            display: block;
            overflow: auto;
            width: 135px;
            height: 30px;
            padding-top: 4px;
            margin: 10px auto 0 auto;

            list-style: none;

            cursor: pointer;

            color: #1a1a1a;
            background: #e8e8e8;
        }

            .galereya-cats-item {
                display: none;

                padding: 1px 25px 1px 10px;

                border-top: 1px solid #959595;
            }

                .galereya-cats-item span {
                    font-size: 10pt;

                    display: block;
                    overflow: hidden;

                    width: 93%;

                    -o-text-overflow: ellipsis;
                    -ms-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    text-transform: capitalize;
                }

            .galereya-cats-item:first-child {
                display: block;

                border: none;
                background: url('/images/galereya-arrow_down.png') no-repeat 90% 50%;
                background-size: 15px 10px;
            }

        .galereya-cats.open {
            height: auto;
        }

            .galereya-cats.open .galereya-cats-item:first-child {
                background: url('/images/galereya-arrow_up.png') no-repeat 90% 45%;
                background-size: 15px 10px;
            }

            .galereya-cats.open .galereya-cats-item {
                display: block;

                padding: 10px 25px 10px 10px;
            }
        /* Gallery category select(end) */

    /* Gallery grid(begin) */
    .galereya-grid {
        position: relative;
        top: 0px;
        width: 100%;
        min-height: 100%;
        margin: auto;

    }

        .galereya-cell {
            position: absolute;
            display: none;
            overflow: hidden;

            width: 150px;
            padding: 0 1px; /* Webkit padding on transition fix */

            cursor: pointer;
        }

            .galereya-cell-img,
            .galereya-cell-desc {
                width: 100%;
            }

            .galereya-cell-img {
                display: block;
                margin:10px;
                width: 150px;

                image-rendering: optimizeSpeed;
            }

            .galereya-cell-desc {
                font-size: 10pt;
                position: absolute;
                left: 0;
                bottom: 0;
                margin:10px;
                display: none;

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 20px 10px;

                text-align: center;

                color: #fff;
                background-color: #373737;
                opacity: 0;
                -webkit-transition: all 0.5s ease-out;
                -moz-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
            }

                .galereya-cell-desc-title {
                    font-weight: bold;
                }

        .galereya-cell-overlay {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;


            overflow: hidden;

            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease-out;
            -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;

        }

        .galereya-cell:hover {
            z-index: 1000;
        }

            .galereya-cell:hover .galereya-cell-desc {
                bottom: 10px;
                opacity: 50;
            }

            .galereya-cell:hover .galereya-cell-overlay {
            }

            .galereya-cell.wave .galereya-cell-overlay{

            }
    /* Gallery grid(end) */

    /* Gallery slider(begin) */
    .galereya-slider {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1000000;

        display: none;
        overflow: hidden;

        background: transparent;
        -webkit-transition: -webkit-transform .5s ease-out;
        -moz-transition: -moz-transform .5s ease-out;
        transition: transform .5s ease-out;
        -o-transition: none;
        -webkit-transform: translateX(110%);
        -moz-transform: translateX(110%);
        -ms-transform: translate(110%);
        -o-transform: translateX(110%);
        transform: translateX(110%);
    }

    .galereya-slider.opened {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translate(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

        .galereya-slider-nav {
            position: absolute;
            top: 0;

            width: 48px;
            height: 100%;

            cursor: pointer;

            opacity: 0;
            background-color: #000;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 12px 30px;
            -webkit-transition: opacity .3s ease-out;
            -moz-transition: opacity .3s ease-out;
            -o-transition: opacity .3s ease-out;
            transition: opacity .3s ease-out;
        }

        .galereya-slider-nav.left { left: 0; background-image: url(/images/galereya-arrow_prev.png); }
        .galereya-slider-nav.right { right: 0; background-image: url(/images/img/galereya-arrow_next.png); }

        .galereya-slider-nav:active {
            opacity: 0.15;
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;
        }

        .galereya-slider-desc {
            font-size: 10pt;

            position: absolute;
            left: 0;
            bottom: 0;

            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px 10px;
            width: 100%;

            text-align: center;

            color: #fff;
            background: rgba(0, 0, 0, .8);
        }

            .galereya-slider-desc-title {}

        .galereya-slider-close,
        .galereya-slider-play {
            position: absolute;

            width: 48px;
            height: 48px;

            cursor: pointer;

            opacity: 0.15;
            background-size: 35px 35px;
            background-repeat: no-repeat;
            background-position: center;
            -webkit-transition: opacity 0.3s ease-out;
            -moz-transition: opacity 0.3s ease-out;
            -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
        }
        .galereya-slider-close:active,
        .galereya-slider-play:active {
            opacity: 0.3;
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;
        }
        .galereya-slider-close {
            top: 0;
            left: 0;

            background-image: url('/images/galereya-close.png')
        }
        .galereya-slider-play {
            top: 0;
            right: 0;

            background-image: url('/images/galereya-play.png');
        }
        .galereya-slider-play.pause {
            background-image: url('/images/galereya-pause.png');
        }

        .galereya-slider-container {
            width: 100%;
            height: 100%;
        }

            .galereya-slider-slide {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
				
                width: 100%;
                height: 100%;

                overflow: hidden;

                text-align: center;

                background: #fff url('/images/black_lozenge.png');
                background-size: 38px 38px;


                -webkit-transition: -webkit-transform .5s ease-out;
                -moz-transition: -moz-transform .5s ease-out;
                transition: transform .5s ease-out;
                -o-transition: none; /*Sorry Opera, you are slow enough*/
            }

                .galereya-slide-loader {
                    position: absolute;
                    top: 50%;
                    left: 50%;

                    margin-left: -50px;
                    margin-top: -6px;
                    width: 100px;
                    height: 12px;

                    opacity: 0.15;
                    background: url('/images/galereya-slider-loader.gif') no-repeat center;
                }

                .galereya-slide-img {
                    max-width: 100%;
                    max-height: 100%;
                }

            .galereya-slider-slide.next {
                -webkit-transform: translateX(110%);
                -moz-transform: translateX(110%);
                -ms-transform: translate(110%);
                -o-transform: translateX(110%);
                transform: translateX(110%);
            }
            .galereya-slider-slide.current {}
            .galereya-slider-slide.prev {}
/* Gallery slider(end) */
/* Gallery (end) */

/*Media queries for hi-res devices*/
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
    .galereya-slider-close {
        background-image: url('/images/galereya-close@2x.png');
    }

    .galereya-slider-play {
        background-image: url('/01/images/galereya-play@2x.png');
    }

    .galereya-slider-play.pause {
        background-image: url('/01/images/galereya-pause@2x.png');
    }

    .galereya-slider-nav.left { background-image: url(/01/images/galereya-arrow_prev@2x.png); }
    .galereya-slider-nav.right { background-image: url(/01/images/galereya-arrow_next@2x.png); }

    .galereya-slider-slide {
        background-image: url('../img/black_lozenge_@2X.png');
    }
}

/* Other devices and screens */
@media only screen and (min-width: 601px) {
    .galereya-cell,
    .galereya-cell-img {
        width: 300px;
    }

    .galereya-cell-desc {
        display: block;
    }

    .galereya-slider {
        -webkit-transition: -webkit-transform 1s ease-out;
        -moz-transition: -moz-transform 1s ease-out;
        transition: transform 1s ease-out;
        -o-transition: none; /*Sorry Opera, you are slow enough*/
    }

    .galereya-slider-nav { opacity: 0.05; }

    .galereya-slider-slide {
        -webkit-transition: -webkit-transform 1s ease-out;
        -moz-transition: -moz-transform 1s ease-out;
        transition: transform 1s ease-out;
        -o-transition: none; /*Sorry Opera, you are slow enough*/
    }
}
@media only screen and (min-width: 1025px) {
    .galereya-cats.open .galereya-cats-item {
        padding: 1px 25px 1px 10px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/domtastic/0.12.1/domtastic.min.js"></script>
<div id="galleryherepls">

        <img src="/images/rosest.jpg"
            alt="Title here"
            title="My mind is a Mess"
            data-desc="10-08-2016"
            data-category="Vector"
            data-fullsrc="/images/roses.jpg"
        />        
       
        <img src="/images/pigst.jpg"
            alt="Flying Pigs"
            data-desc="05-07-2016"
            data-category="Vector"
            data-fullsrc="/images/pigst.png"
        />


</div>

我要疯了。我真的需要帮助..

页脚:

#footer { margin: auto; margin-bottom:10px;  color: #fff; background: #323232; width: 980px; height: 20px; padding:10px; clear:both; text-align: center;}

Answer 1

It's a bug与您正在使用的 0.0.93 版本，应该在 0.9.94 中解决。

从their github page获取因为他们的插件网站仍在提供旧版本。