0
Я внесла изменения в код от here, чтобы изображения отображались в полной ширине. Но я столкнулся с одной проблемой, которая не может автоматически изменять размер по разному размеру экрана.Авто регулировка высоты для фильтра полной ширины
Вы можете изменить размер окна браузера, чтобы получить больше выходов. Если вы это сделаете, вы увидите большой разрыв между изображениями и текстом "testing". Зазор вызывает код height:117vh. Моя проблема здесь.
Я понятия не имею, как изменить код для автоматической регулировки высоты, и я использовал CSS для его замены, что не является хорошим решением. Надеясь, что некоторые из вас могут дать мне некоторые советы. Благодарю.
function filterEls(category){
gallery.filter(category)
};
$('.filter-bt').click(function(){
$('.filter-bt.current').removeClass('current');
$(this).addClass('current');
});
window.onload = function(){ \t
gallery = guggenheim('#basic-gallery')
};
//Refresh page on resize
$(window).resize(function(){
if ($(window).width() > 1000){ \t
window.addEventListener('resize', function() {
"use strict";
window.location.reload();
});
} \t
});.gallery{
width:100%;
padding:0;
height:117vh;
/*text-align:center;*/
position:relative;
overflow:hidden;
}
.works-tab-filter{
position: static;
text-align: center;
}
.works-tab-filter a{
padding: 0 40px;
cursor: pointer;
font-size: 11px;
text-transform: uppercase;
color: #aaa;
letter-spacing: 1px;
}
.buttons a.prev, .buttons a.next{
position:absolute;
top:46%;
z-index: 100;
}
.buttons a.prev{ left:0; background: #000; }
.buttons a.next{ right:0; background: #000; }
.buttons a.prev, .buttons a.next{
\t \t cursor:pointer;
\t \t display:inline-block;
\t \t width: 43px;
\t \t height: 72px;
\t }
.guggenheim-item{
width:25%;
padding:0;
margin: -2px 0;
}
\t
.sprite {width:100%; display: inline-block; }
.sprite img{width:100%; }
@media only screen and (max-width: 1049px){
\t .gallery{
\t \t width:100%;
\t \t height:145vh;
\t \t padding: 0 2%;
\t }
\t
\t .guggenheim-item{
\t \t width:48%;
\t }
}
@media only screen and (max-width: 768px) {
\t .gallery{
\t \t width:100%;
\t \t height:200vh;
\t \t padding: 0 2%;
\t }
\t
\t .guggenheim-item{
\t \t width:90%;
\t }
}<script src="http://oinutter.co.uk/guggenheim.js/js/guggenheim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="works-tab-filter col-md-4 wp2 delay-105s">
\t <a class="filter-bt current" onclick='filterEls("")'>All</a>
\t <a class="filter-bt" onclick='filterEls("campaign")'>Campaign</a>
\t <a class="filter-bt" onclick='filterEls("identity")'>Identity</a>
\t <a class="filter-bt" onclick='filterEls("interactive")'>Interactive</a>
\t <a class="filter-bt" onclick='filterEls("prints")'>Prints</a>
</div>
\t
<br/>
<br/>
<div id="basic-gallery" class="gallery col-md-4 wp2 delay-2s">
\t <div class="buttons"> <!-- Hide button when only one page -->
\t \t <a class="prev" onclick="gallery.prev()"></a>
\t \t <a class="next" onclick="gallery.next()"></a>
\t </div>
\t
\t <div class="guggenheim-slider">
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
<div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
<div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t </div>
</div>
<div>testing</div>
нет, не может. Когда я удалю код, изображения не будут отображаться. – Eelyn
Пожалуйста, уточните мой обновленный ответ. Я написал несколько js, чтобы обновить высоту элемента галереи, чтобы иметь полную высоту. –
нет пробелов, но изображения обрезаны – Eelyn