Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
VK Albums [API] - Фотографии из альбома.
DEMO +
Всем привет, хотите создать галерею не используя стандарт uCoz или как доп. фотографии на вашем сайте тогда скрипт VK API поможет вам, суть проста загружайте свои фото в Альбом VK после выводите, установка и настройка довольно простая Строки Js настройки подписаны.

Особенности:
1. Указание количество вывода фотографий.
2. Возможность подгрузки новых.
3. Поддержка Gallery v1.5, а также Resize v1.3 (Умное построение фото плиткой) [Скоро].

Установка:
1. Добавим HTML вывода фото и подгрузки:
Код
<div class="bs-album"></div>
<div id="bs-next" data="1">Еще фото</div>


2. Добавим Js для обработки вывода фото:
Код
$('#bs-next').click(function(){
$('#bs-next').show();
var albumID = ['151202996_248316085'];
  $.each(albumID, function(i, item){
albumID = item.split('_');  
OfsetIMG = $('#bs-next').attr('data');
  $.ajax({  
  url: "https://api.vk.com/method/photos.get?owner_id=-"+albumID[0]+"&album_id="+albumID[1]+"&v=3&access_token=599813d5599813d5599813d50d59fae2e255998599813d502987ce2b65557614fc30a37&count=20&offset="+OfsetIMG+"&callback",  
  dataType: "jsonp",
  cache: false,
  success: function(data) {  
if(!data.response.length) {
  $('#bs-next').hide();
  } else {
  data.response.forEach(function(item) {
  var img = item.src_xxxbig;  
  (!(img)) ? img = item.src_big : img;  
  $('.bs-album').append('<img src="'+img+'" alt="" />');  
  var numPhoto = $('.bs-album img').size();  
  $('#bs-next').attr('data',''+numPhoto+'');
  });
  }
  } }); }); }); $('#bs-next').click();


В скрипте находим 151202996_248316085 и меняем на свой ID Альбома группы, можно указать через запятую для новых подгрузка едина.


3. Добавим базовое CSS:
Код
div.bs-album img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  margin-right: 10px;
}
div#bs-next {text-align:center;
  padding: 10px;
  background: #88afff;
  margin-top: 15px;
  color: #fff;
}


P.s если кому нужно вывод альбома из своего профиля VK пишем мне в VK (vk.com/unicoder)
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

При копировании материала указываем источник ucods.3dn.ru

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 24.06.2018 в 20:11 по МСК
Категория: Другие модули
Просмотров: 921
Комментариев: 0
Эмоций:
  • Оценки читателей

    ЗАКРЫТЬ
    • 0 Лайк
    • 0 Лавки
    • 0 Ахахах!
    • 0 Ого!
    • 0 Восторг
    • 0 Печаль
    • 0 Грусняшь

Теги: woobl, Bs, foto, Album, Next, Data, Top, API
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]