Здравствуйте!
Привожу код.. Собсно он выводит альбомы из группы ВК. И по клику выводит фотки в сетку 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'); // после подгрузки фотографий, начинаем упорядочивание >:
});
});
}
Сделал бы сам.. Да только как ни делаю.. Всё не работает.
Мб кто поможет ?
Ну или ткнёт во что-то похожее