V
V
Vladimir Obabkov2016-10-31 00:43:39
css
Vladimir Obabkov, 2016-10-31 00:43:39

How to organize such a structure?

My head explodes .. due to inexperience ..
Idea:
There is a Vkontakte group.
We need to make a website, and make a page with a list of albums (photos.getalbums) as a portfolio.
And when you click on an album, display a page with a gallery (photos.get + masonry).
Problem:
I don't understand how to implement it..
I thought to create a separate page for each album.. and call photos.get on it
. But then I realized that this is crap. Albums will be added.
This is how I intended to receive and display:
Albums:

$.ajax({
  		url: 'https://api.vk.com/method/photos.getAlbums?',
  		data: {
      owner_id: '-72629433', // ID пользователя
      need_covers: '1', // Возвращать обложку
      sizes: '1' // Все размеры обложек
  },
  dataType: "jsonp",
  success: function(data) {
  	data.response.forEach(function(item) {
  		var img = item.thumb_src;
        (!(img)) ? img = item.thumb_src : img; // берём обложку
         var title = item.title; // берём описание
      (!(title)) ? title = item.title : title;
        $('<div class="grid-item"><img src="' + img + '" alt="" /> <p>'+ title +'</p></div>').appendTo($('.grid')); // выводим обложку и название
    });
  }
  });

Photo: I use masonry for beauty
$.ajax({
        url: 'https://api.vk.com/method/photos.get?',
        data: {
      owner_id: '-72629433', // ID пользователя
      album_id: '237018219' // ID альбома
  },
  dataType: "jsonp",
  success: function(data) {
    data.response.forEach(function(item) {
        var img = item.src_big;
        (!(img)) ? img = item.src_big : img; // проверяем, есть ли самое большое разрешение у фотографии
        $('<div class="grid-item"><img src="' + img + '" alt="" /></div>').appendTo($('.grid'));
    });
  }
  });
    // когда страница полностью прогрузилась, вызываем наш плагин для упорядочивания фотографий
    window.onload = function () {
        $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: 200
        });
    }

As I understand it, you need to somehow pass the identifier of the clicked album to the photos.get request on the click .. And generate a page with this ... But I'm a beginner and I don't understand how to do it

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladimir Obabkov, 2016-11-01
@Enroller

I solved it like this:
codepen.io/Enroller/pen/MjNmpr?editors=1010

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question