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

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

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

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

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

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

Установка:
1. Добавим HTML вывода фото:
Код
<div class="bs-album"></div>


2. Js - Для вывода фотографий из альбома Группы:
Код
<script>  
accessToken = '599813d5599813d5599813d50d59fae2e255998599813d502987ce2b65557614fc30a37';
  albumLimit ="100" // Количество фото если не нужен лимит убрать из URL запрос
  albumID = '34366493_228613709' // ID альбома группы  
  albumID = albumID.split('_');  
  $.ajax({  
  url: "https://api.vk.com/method/photos.get?owner_id=-"+albumID[0]+"&album_id="+albumID[1]+"&count="+albumLimit+"&v=3&access_token="+accessToken+"&callback",  
  dataType: "jsonp",  
cache: false,  
  success: function(data) {  
  data.response.forEach(function(item) {  
  var img = item.src_xxxbig;  
  (!(img)) ? img = item.src_big : img;  
  $('.bs-album').append('<div class="grid-item"><img class="ulightbox" data-fancybox-group="ultbx" src="'+img+'" href="'+img+'" alt="" /></div>');  
  });  
  }  
  });  
  </script>


3. Js - Для вывода фотографий из альбома Пользователя:
Код
<script>accessToken = '599813d5599813d5599813d50d59fae2e255998599813d502987ce2b65557614fc30a37';
$.ajax({  
  url: 'https://api.vk.com/method/photos.get?',  
  data: {  
  owner_id: '95575167', // ID пользователя  
  album_id: '134625589', // ID альбома  
  v: '3',
  access_token: accessToken
  },  
  dataType: "jsonp",  
cache: false,  
  success: function(data) {  
  data.response.forEach(function(item) {  
  var img = item.src_big;  
  (!(img)) ? img = item.src_big : img;  
  $('<div class="bs-item"><img class="ulightbox" data-fancybox-group="ultbx" src="'+img+'" href="'+img+'" alt="" /></div>').appendTo($('.bs-album'));  
  });  
  }  
  });</script>


P.s По умолчанию включен ulightbox (Встроено в uCoz) если он вам не нужен то из js убираем атрибуты: class="ulightbox", data-fancybox-group="ultbx", href="'+img+'".
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

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

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

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

Теги: ucoz, API, VK, ulightbox
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Best_Studio
19.05.2018 | # |№13
Обновлено, так как обновилась политика API VK

Best_Studio
26.02.2018 | # |№1
Базовое CSS кому нужно:
Код
.bs-album {width:180px;}
.bs-album div {display:inline-block;overflow-y:hidden;max-height:50px;}
.bs-album img {width:50px;min-height:50px;padding:10px 5px;float:left;}

spinaclan
27.02.2018 | # |№2
Как плитку сделать такой? https://pp.userapi.com/c841624/v841624432/6b58f/0zUa4pWjQaU.jpg

Best_Studio
27.02.2018 | # |№6
На это есть DEMO, Либо временно тут Перейти

spinaclan
27.02.2018 | # |№3
Ещё перелистования не хватает, в ulightbox

Best_Studio
27.02.2018 | # |№8
Для перелистывания нужно добавить атрибут data-fancybox-group="ultbx" для img

spinaclan
27.02.2018 | # |№4
при закрытии фотографии закрывается и демо фотография на юкозе

spinaclan
27.02.2018 | # |№5
Фотографии отображаются не новые а старые)

Best_Studio
27.02.2018 | # |№7
По умолчанию в ajax включен кэш. Если хотите отключить то добавьте в js cache: false, после dataType: "jsonp",

Тема обновлена.

spinaclan
28.02.2018 | # |№9
На вешем тестовом сайте тоже фотки удяляются при закрытии окна

Best_Studio
28.02.2018 | # |№10
Добавте в js img атрибут: href="'+img+'" ....

spinaclan
28.02.2018 | # |№11
Конечно спасибо вам но не понимаем js что куда добавлять

Marishka
07.03.2018 | # |№12
Читайте faq по работе с uCoz, либо гугл в помощь :)