<div class="row">
  <div class="col-sm-12">
    <h2 class="title_line">Instagram</h2>
  </div>
</div>
<div class="clearfix"></div>
<br /><br />
<div class="row">
  <div class="InstagramInfo col-xs-12 d-flex align-items-center">
    <img class="img-circle" src="<?= $profile_picture; ?>" alt="<?= $full_name; ?>" />
    <div class="text-center ml-25">
      <h1 class="d-inline">@<?= $username; ?></h1> <a href="//www.instagram.com/<?= $username; ?>" class="ViewProfile btn">Profili Gör</a>
      <div class="clearfix"></div>
      <br />
      <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn"><?= $media; ?> Gönderi</button>
        <button type="button" class="btn"><?= $followed_by; ?> Takipçi</button>
        <button type="button" class="btn"><?= $follows; ?> Takip</button>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<br />
<div class="row">
  <div class="col-xs-12">
    <div class="InstagramImages row"></div>
    <script>
      jQuery (function ($) {
        var InstagramImages = <?= json_encode ($images); ?>, InstagramImageIndex = 0, LastInstagramImageTop = 0;
InstagramImages = InstagramImages.slice (0, 9);
$(window).scroll (function () {
          if (LastInstagramImageTop < $(window).scrollTop () && InstagramImageIndex != InstagramImages.length)
          {
            $('.InstagramImages').append (
              '<div class="InstagramImage col-xs-4">' +
                '<a href="' + InstagramImages [InstagramImageIndex].link + '" target="_blank">' +
                  '<img class="img-responsive" src="' + InstagramImages [InstagramImageIndex].image + '" alt="Instagram IMG" />' +
                '</a>' +
              '</div>'
            );
            InstagramImageIndex++;
            LastInstagramImageTop = $('.InstagramImage').last ().offset ().top - $(window).height ();
          }
        });
      });
    </script>
  </div>
</div>