Перемещение изображения на первую позицию после скрытия других элементов - PullRequest
Новая
       1

Перемещение изображения на первую позицию после скрытия других элементов

0 голосов
/ 08 февраля 2020

Мне нужна твоя помощь. Когда я заполняю свою галерею изображений и выбираю изображение, которое находится во втором, третьем ... и c положении, изображение остается c, динамически не изменяет положение на первое слева. (см. экран)

Мой код:

product_gallery. html

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/gallery/js/gallery_button.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>

</div>

</body>
</html>

style_gallery. css 

@font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }

body {

  }

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}
.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}
.thumbnails.grid a.double{
  width: calc(50% - 4px);
}
.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}
@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }
  .thumbnails.grid a.double{
    width: calc(100% - 4px);
  }
}
@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin:auto;
  padding-top: 28px;
  padding-bottom:20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

.logo {
  font-family: ISOCT3;
  font-size: 24px;
  font-weight: bolder;
  display: block;
  color: #b8860b;
  padding-top:25px;
  margin: 0px auto 15px auto;
  max-width: 90%;
  height: auto !important;
  letter-spacing: 2px;
}
}

.logo_link {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
    background-color: #D29990;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    line-height: 50px;
    @include border-radius(50%);
    display: inline-block;
    @include transition( all .2s ease-in-out);

    &:hover {
      background-color: saturate( $pink, 20%);
    }
}

.nav_buttons{
  margin: 0 auto;
   padding-left: 20px;
  }

gallery_button. js

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();

  });
});

А вот экран, показывающий, что не так:

enter image description here

1 Ответ

1 голос
/ 08 февраля 2020

Ваш код довольно близок к работе, если я уберу класс сетки (в разделе миниатюр), он даст желаемое поведение без каких-либо дополнительных модификаций, но вы, скорее всего, захотите поведение сетки.

Даже если вы скрываете элементы img, их родительские элементы (a элементы привязки) не скрываются. Вы должны быть в состоянии скрыть / показать родительские элементы изображений (элементы привязки a), чтобы получить желаемое поведение.

Как видно из измененного js ниже, это всего лишь один дополнительный Вызов .parent (), который был скорректирован на ваших селекторах показа / скрытия: 

$('#portfolio').find('img').parent().show(); 
$('#portfolio').find('img').not(theFilter).parent().hide();

Еще одно предложение для будущих вопросов: обычно людям намного проще ответить на ваш вопрос + посмотреть, что вы видите используя встроенный инструмент сниппета Javascript / HTML / CSS, встроенный в StackOverflow (для изображений вы можете использовать что-то вроде сайта-заполнителя, который я использовал ниже). 

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').parent().show(); 
   $('#portfolio').find('img').not(theFilter).parent().hide();

  });
});
@font-face {
  font-family: "ISOCT3";
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}

body {}

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}

.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}

.thumbnails.grid a.double {
  width: calc(50% - 4px);
}

.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}

@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }

  .thumbnails.grid a.double {
    width: calc(100% - 4px);
  }
}

@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin: auto;
  padding-top: 28px;
  padding-bottom: 20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

  .logo {
    font-family: ISOCT3;
    font-size: 24px;
    font-weight: bolder;
    display: block;
    color: #b8860b;
    padding-top: 25px;
    margin: 0px auto 15px auto;
    max-width: 90%;
    height: auto !important;
    letter-spacing: 2px;
  }
}

.logo_link {
  color: inherit;
  /* blue colors for links too */
  text-decoration: inherit;
  /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
  background-color: #D29990;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  line-height: 50px;
  @include border-radius(50%);
  display: inline-block;
  @include transition(all .2s ease-in-out);

  &:hover {
    background-color: saturate($pink, 20%);
  }
}

.nav_buttons {
  margin: 0 auto;
  padding-left: 20px;
}
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>

</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...