Перекрытые изображения в браузере небольшого размера Изотоп - PullRequest
Новая
       9

Перекрытые изображения в браузере небольшого размера Изотоп

0 голосов
/ 10 мая 2018

У меня возникли проблемы с изотопом JS. Веб-сайт, чтобы вы могли видеть реальный пример этот

Я попытаюсь возобновить сценарий и то, как я загружаюсь, возможно, кто-то заметит, что я делаю неправильно. Но главная проблема заключается в том, что когда я загружаю страницу, а размер браузера меньше 900 пикселей, изображения накладываются друг на друга, и я не знаю, почему.

Буду признателен за любую помощь, чтобы исправить это, что сводит меня с ума.

Большое спасибо заранее. 

			// init Isotope
			var $grid = $('.grid').isotope({
			  itemSelector: '.grid-item',
			  percentPosition: true,
			  masonry: {
			    columnWidth: '.grid-sizer'
			  }
			});
			// layout Isotope after each image loads
			$grid.imagesLoaded().progress( function() {
			  $grid.isotope('layout');
			});  

			// store filter for each group
			var filters = {};

			$('#filters').on( 'click', '.button', function() {
			  var $this = $(this);
			  // get group key
			  var $buttonGroup = $this.parents('.button-group');
			  var filterGroup = $buttonGroup.attr('data-filter-group');
			  // set filter for group
			  filters[ filterGroup ] = $this.attr('data-filter');
			  // combine filters
			  var filterValue = concatValues( filters );
			  // set filter for Isotope
			  $grid.isotope({ filter: filterValue });
			});

			// change is-checked class on buttons
			$('.button-group').each( function( i, buttonGroup ) {
			  var $buttonGroup = $( buttonGroup );
			  $buttonGroup.on( 'click', 'button', function() {
			    $buttonGroup.find('.is-checked').removeClass('is-checked');
			    $( this ).addClass('is-checked');
			  });
			});

			// flatten object by concatting values
			function concatValues( obj ) {
			  var value = '';
			  for ( var prop in obj ) {
			    value += obj[ prop ];
			  }
			  return value;
			}
/* force scrollbar */
html { overflow-y: scroll; }

body {
  font-family: sans-serif;
}

/* ---- isotope ---- */

.grid {
	padding-bottom:60px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 20%;
}
@media screen and (max-width: 960px) {
	.grid-sizer,
	.grid-item {
	  width: 33.33%;
	}
}
@media screen and (max-width: 768px) {
	.grid-sizer,
	.grid-item {
	  width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.grid-sizer,
	.grid-item {
	  width: 100%;
	}
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}
.image{
    max-width: 100%;
    margin: 0;
    display: block;

}

.image:after {
    clear:both;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.0);
 	-webkit-transition: background-color 0.5s ease-out;
	  -moz-transition: background-color 0.5s ease-out;
	  -o-transition: background-color 0.5s ease-out;
	  transition: background-color 0.5s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;


}

.overlay .title {
    text-align: center;
    font-size: 20px;
	color: rgba(0,0,0,0.0);
 	-webkit-transition: background-color 0.5s ease-out;
	  -moz-transition: background-color 0.5s ease-out;
	  -o-transition: background-color 0.5s ease-out;
	  transition: background-color 0.5s ease-out;
	padding:0 24px;
	text-transform:uppercase;
	position:relative;
}
.overlay:hover h3{
	color: rgba(254,194,0,1);
	
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
	    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	    animation-name: example;
	    animation-duration: 1s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {color:rgba(254,194,0,1); left:0px; top:10px;}
    50%  {color:rgba(254,194,0,1); left:0px; top:0px;}
    100% {color:rgba(254,194,0,1); left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {color:rgba(254,194,0,1);left:0px; top:10px;}
    50%  {color:rgba(254,194,0,1); left:0px; top:0px;}
    100% {color:rgba(254,194,0,1);left:0px; top:0px;}
}
.overlay a{
	cursor: hand;
}

.overlay p {
	color: rgba(0,0,0,0.0);
 	-webkit-transition: background-color 0.5s ease-out;
	  -moz-transition: background-color 0.5s ease-out;
	  -o-transition: background-color 0.5s ease-out;
	  transition: background-color 0.5s ease-out;
    position: relative;
	font-size:12px;
line-height:18px;
	font-weight:100;
    left: 0;
    background-color: rgba(0,0,0,0.0);
    width: 100%;
	text-align:center;
    margin: 0;
}
.overlay:hover{
	background-color: rgba(0,0,0,0.85);
}
.overlay:hover p{
	color: rgba(254,194,0,1);
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
	    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	    animation-name: tipos;
	    animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes tipos {
    0%   {color:#333; left:0px; top:20px;}
    50%  {color:#fff; left:0px; top:0px;}
    100% {color:#fff; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes tipos {
    0%   {color:#333;left:0px; top:20px;}
    50%  {color:#fff; left:0px; top:0px;}
    100% {color:#fff;left:0px; top:0px;}
}



.project-title{
	display: table-cell;
	    vertical-align: middle;
}
.wrapper{
	    position: absolute;
	    display: table;
	    z-index: 100;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    /* text-align: center; */
	    line-height: 24px;

}


.button-group{
	color:#FEC200;
	font-size: 1.1em;
	text-align:center;
}
.button-group .button{
	background:transparent;
	border:1px solid #fff;
	font-size:0.8em;
	font-weight:300;
	padding: 8px 10px 8px !important;
	text-transform: uppercase;
	-webkit-transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease;
}
.button:hover{
	cursor:hand;
	border: solid 1px #FEC200 !important;
	color:#FEC200;
    padding: 8px 10px 8px !important;
	font-weight:300;
	-webkit-transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease;
}
.button-group .button:focus{
	outline:0;
}


.is-checked {
	cursor:hand;
	border: solid 1px #FEC200 !important;
	color:#FEC200;
    padding: 8px 10px 8px !important;
	font-weight:300;
}
.fotoproy img{
	max-width:100%;
}
.fotoproy{
	width:100%;
	display:block;
}
.proyecto-imagen img{
border: 0px;
border-style: solid;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
max-width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<div style="padding:0 0 70px; margin:0;">

				<div id="filters" class="button-group">
					<button class="button is-checked" data-filter="*">Todo</button>
					<button class="button" data-filter=".branding">Identidad</button>
			  		<button class="button" data-filter=".grafica">Gráfica</button>
			  		<button class="button" data-filter=".website">Web</button>
					<button class="button" data-filter=".video">Video</button>


				</div>
			</div>
      
      <div class="grid" style="position: relative; height: 727.205px;">
			  <div class="grid-sizer"></div>

      <div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/appole.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>

      <div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/ramosrevista.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
      <div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/camaratres.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>

      <div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/lions.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
      
      
      
      </div>

1 Ответ

0 голосов
/ 13 мая 2018

Глядя на ваш код, я вижу несколько проблем:

Ваша загрузка 2 разных версий jQuery, версии 2.1.1, сразу после тега body вашей страницы и второй, 3.2.1 в концевашей страницы.

Начало страницы: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>   
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

Аналогично, вы загружаете imagesloaded и isotope.js после тега body страницы, а затем вы также загружаете masonry.js и секунду, более старая версия imagesloaded.js внутри вашего файла plugins.js в конце.

конец вашей страницы: 

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

Вы должны удалить ваши ссылки на кладку и старые изображения, загруженные в ваш plugins.js, и перестроить загрузку javascript только одним скриптом jQuery (3.20,1).Я предполагаю, что проблема в 2-х версиях jQuery и загруженных изображениях, имеющих как кладку, так и загрузку изотопов, может быть проблемой?

...