0
さて、私はコーディングの初心者です。 Galereya Jqueryスクリプトをダウンロードしました。それは動作しますが、コード内の他のすべてのコンテンツと重複します。私はオーバーフローと位置を変更しようとしましたが、何も動作していないようです。別のdivに追加すると、グリッドが機能しなくなります。はい、高さpxを追加できますが、すべてのページが同じ高さ（およびモバイルバージョンの問題）ではありません。ギャラリーdivがフッタをオーバーラップします
問題はこのギャラリーコードを追加した場合にのみ表示されます。他のコンテンツを追加すると、重複しません。
ここに私が使用しているコードがあります。
$(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;
\t \t \t \t
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/[email protected]');
}
.galereya-slider-play {
background-image: url('/01/images/[email protected]');
}
.galereya-slider-play.pause {
background-image: url('/01/images/[email protected]');
}
.galereya-slider-nav.left { background-image: url(/01/images/[email protected]); }
.galereya-slider-nav.right { background-image: url(/01/images/[email protected]); }
.galereya-slider-slide {
background-image: url('../img/[email protected]');
}
}
/* 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;}
あなた自身の要素に絶対的な位置付けがありますか？ - 対象となる要素は何ですか？また、どのようなスタイルが適用されますか？ –
@BenLonsdale私はこのコードでこの問題を抱えています。私はコンテンツを追加することができ、フッターに重ならない。このコードでのみ重複しています。私が隠されたオーバーフローを変更すると、それは重複しません。しかし、高さをpxで決める必要があります。私のページはすべて高さが異なるため、やりたくないことです。 –
フッターに適用したスタイルを表示できますか？我々は少なくともそれを支配する必要があります –