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 Грусняшь
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]