Значок добавления поверх изображения отображается неправильно - PullRequest
Новая
       95

Значок добавления поверх изображения отображается неправильно

0 голосов
/ 12 июля 2020

Я использую новый плагин Instagram (который работает без API) для отображения содержимого, связанного с учетной записью Instagram, все работает с плагином, за исключением того, что плагин не отображает значки, связанные с контентом, такие как cards, videos et c

Код не добавляет значки, связанные с содержимым, но я не заметил, что код html, сгенерированный плагином, добавляет классы CSS для привязки элемента как instagram-video, instagram-image, instagram-sidecar.

на основе этого я, хотя использовать функцию CSS для обнаружения css элемента, такого как .instagram_gallery > a[class*="instagram-video"] , и добавить соответствующий css для отображения значка видео, если элемент привязки имеет класс видео и т. Д.

мой код не отображает значок должным образом, как это видно в примере кода

Пример кода 

(function($){
            $(window).on('load', function(){
                $.instagramFeed({
                    'username': 'instagram',
                    'container': "#instafeed",
                    'display_profile': false,
                    'display_biography': false,
                    'display_gallery': true,
                    'callback': null,
                    'styling': true,
                    'items': 16,
                    'items_per_row': 4,
                    'margin': 1
                }); 
            });
        })(jQuery);
@media (max-width:768px)
    {
    .instagram_gallery > a {
    width: 50% !important;
    display: inline-block;
}
.instagram_gallery > a > img {
    width: 100% !important;
    padding: 15px;
}
    }

    @media (max-width:500px)
    {
    .instagram_gallery > a {
    width: 100% !important;
    display: inline-block;
}
.instagram_gallery > a > img {
    width: 100% !important;
    padding: 15px;
}
    }
.instagram_gallery > a
    {
   
    }
.instagram_gallery > a[class*="instagram-video"] {
  border: 1px solid #f00;
  background-image:url('https://image.flaticon.com/icons/svg/860/860832.svg')
}
<script src="https://www.sowecms.com/demos/jquery.instagramFeed/jquery.instagramFeed.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="container-fluid section-80">
    <div class="row photos-wrap">
         <div id="instafeed"></div>
     </div>
</section>

1 Ответ

0 голосов
/ 12 июля 2020

Взгляните на этот CodePen https://codepen.io/DavidSanek/pen/GRoGVrV. Я использовал псевдоэлемент :after для отображения вашего значка. 

$(window).on("load", function() {
    $.instagramFeed({
      username: "instagram",
      container: "#instafeed",
      display_profile: false,
      display_biography: false,
      display_gallery: true,
      callback: null,
      styling: true,
      items: 16,
      items_per_row: 4,
      margin: 1
    });
  });
.instagram_gallery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.instagram_gallery a {
  position: relative;
  width: 25%;
  padding: 10px;
}

.instagram_gallery img {
  width: 100%!important;
  margin: 0!important;
}

.instagram_gallery .instagram-video:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url('https://image.flaticon.com/icons/svg/860/860832.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30%;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.sowecms.com/demos/jquery.instagramFeed/jquery.instagramFeed.min.js"></script>

<div id="instafeed"></div>
...