Enroller
@Enroller
Немного авантюрист

History API для вывода подгружаемого ajax контента?

Здравствуйте!
Привожу код.. Собсно он выводит альбомы из группы ВК. И по клику выводит фотки в сетку masonry.
Выводит он их просто в блок под альбомы. Что неудобно.
Очень хотелось бы сделать так чтобы фотки выводились вместо альбомов.
$(document).ready(function($) {
    $.ajax({
      url: 'https://api.vk.com/method/photos.getAlbums?',
      data: {
        owner_id: '-72629433',
        need_covers: '1',
        photo_sizes: '1'
      },
      dataType: 'jsonp',
      success: function(data) {
        data.response.forEach(function(item) {
        for (i = 0; i < 9; i++) { // длина массива sizes = 9 (всего размеров)
          var typeImg = item.sizes[i].type; // перебираем все type

          if (typeImg == 'r') {
            break; // если находим нужный type, говорим остановить перебор
          }
        }
        var aid = item.aid;
        var thumb = item.sizes[i].src // а тут выводим в переменную после break!
        var title = item.title;
        $('<div><a class="" onclick="albums(this)" href="#grid"><img src="' + thumb + '"/>' + item.aid + '</div>').appendTo('.nav-albs');
      });
      }
    });
  });

  function albums(el) {

    var $container = $('.grid').masonry({
      columnWidth: 400,
      itemSelector: '.grid-item',
      gutter: 5
    });
    $container.masonry('remove', $('.grid-item')).masonry(); // очищаем сетку методом плагина masonry()
    $.ajax({
      url: 'https://api.vk.com/method/photos.get?',
      data: {
        owner_id: '-72629433',
        album_id: el.text, // аргумент ID альбома
          count:30
      },
      dataType: 'jsonp',
      success: function(data) {
        data.response.forEach(function(item) {
          var img = item.src_big;
          !img ? img = item.src_big : img;
          var moreBlocks = '<div class="grid-item"><img src="' + img + '" alt="" class="img-alb"/></div>';
          var $moreBlocks = $(moreBlocks);
              $container.append($moreBlocks);
              $container.masonry('appended', $moreBlocks);
              $container.imagesLoaded().progress(function() {
  $container.masonry('layout'); // после подгрузки фотографий, начинаем упорядочивание >:
});
        });
      }

Сделал бы сам.. Да только как ни делаю.. Всё не работает.
Мб кто поможет ?
Ну или ткнёт во что-то похожее
  • Вопрос задан
  • 247 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы