Страница 1 из 11
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Фотографии с ВКонтакте на страницу сайта (vk api photos.get)
Фотографии с ВКонтакте на страницу сайта
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 1 | 18:17:33
На одном из сайтов(не ucoz) наткнулась на такую вот вещь - фотографии с альбомов определенной группы ВКонтакте.


Разобралась, делается через API, конкретно photos.get, делала запрос и... Не знаю что дальше.
По запросу:
https://api.vk.com/method/photos.get?owner_id=-41781142&album_id=161700051&count=2
выдает он мне кусок кода(count уменьшила до 2 иначе код непомерно огромный, надо 40):
Код
{"response":[{"pid":288585881,"aid":161700051,"owner_id":-41781142,"user_id":100,"src":"http:\/\/cs319023.vk.me\/v319023815\/3427\/9hUvOh4wZhQ.jpg","src_big":"http:\/\/cs319023.vk.me\/v319023815\/3428\/lHfT23IPkcQ.jpg","src_small":"http:\/\/cs319023.vk.me\/v319023815\/3426\/S8PDvZhCSyg.jpg","src_xbig":"http:\/\/cs319023.vk.me\/v319023815\/3429\/yA654L0QpoI.jpg","src_xxbig":"http:\/\/cs319023.vk.me\/v319023815\/342a\/xZCGLqBATdY.jpg","width":576,"height":1024,"text":"","created":1346075755},{"pid":288585883,"aid":161700051,"owner_id":-41781142,"user_id":1 00,"src":"http:\/\/cs319023.vk.me\/v319023815\/3430\/oVKMgFC7t6g.jpg","src_big":"http:\/\/cs319023.vk.me\/v319023815\/3431\/WGnVc2fOvr0.jpg","src_small":"http:\/\/cs319023.vk.me\/v319023815\/342f\/IaTi5RAH_vc.jpg","src_xbig":"http:\/\/cs319023.vk.me\/v319023815\/3432\/u2lryLo3xHc.jpg","src_xxbig":"http:\/\/cs319023.vk.me\/v319023815\/3433\/BO19wJWamUs.jpg","width":576,"height":1024,"text":"","created":1346075756}]}

Куда его, что с ним делать, ума не приложу. sad Может вообще с самого начала делаю не правильно? Кто-нибудь реализовывал такое? Сможет объяснить подробно как оно?
Прикрепления: 1412228.jpg(169Kb)

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 2 | 23:40:12
Запрос на адрес https://api.vk.com/method....count=2 просто дает данные в формате JSON, а политика браузеров не дает права получать эти данные с посторонних страниц, какой и является страница вашего сайта. Поэтому, запрос из javascript на тот адрес заблокирован будет. Иначе, можно было бы получить данные с mail.yandex.ru, например, и у пользователя больше не стало бы секретов, если его почта на Яндекс. Поэтому, это не то, что ищем.
Но Вконтанте дает возможность взять у него данные по-другому, по адресу:
https://api.vk.com/method/photos.get?owner_id=-41781142&album_id=161700051&count=2&callback=myFunction
По этому адресу будут те же данные, что и в вашем посту. Но они будут переданы в функцию myFunction. Иначе говоря, по адресу https://api.vk.com/method/photos.get?owner_id=-41781142&album_id=161700051&count=2&callback=myFunction будет находиться уже файл с javascriptом. А javascript можно подгружать с постороннего ресурса.
Поэтому, у себя на сайте вы можете определить функцию myFunction, а уже ее вызовет тот самый скрипт от Вконтакте.
Вот код:
Код
<script type="text/javascript">
function myFunction(data) {
   for (var i = 0; i < 2; i++) {
       $('#myid').html( $('#myid').html() + '<img src="' + data.response[i].src + '" />');
   }
};
includeJSfile('https://api.vk.com/method/photos.get?owner_id=-41781142&album_id=161700051&count=2&callback=myFunction');
</script>
<div id="myid"></div>
Собственно, что тут происходит:
Определяется функция myFunction, которая обрабатывает переданный в нее параметр data. А она обращается к каждому элементу массива response, забирая из каждого значение src (я подумал, что нужно оно. Но если вам нужно, вы можете поменять его на src_big, src_xbig или другое, в зависимости от размера фотографии, которую хотите получить). А уж зная путь к картинке, не трудно вставить эту картинку в <div id="myid"></div>.
А теперь, когда функция определена, загружается скрипт от ВКонтанте с помощью javascript-функции от uCoz - includeJSfile. Этот скрипт выполнит функцию и фотографии появятся на блоке.
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 3 | 08:27:29
$Tiny$, спасибо, все сработало! А если добавлять photo_sizes=1, то как вытащить, чтобы размеры фото были только определенного типа?
https://api.vk.com/method....unction
Цитата

Если был задан параметр extended=1, возвращаются дополнительные поля:
likes — количество отметок Мне нравится и информация о том, поставил ли лайк текущий пользователь;
comments — количество комментариев к фотографии;
tags — количество отметок на фотографии;
can_comment — может ли текущий пользователь комментировать фото (1 — может, 0 — не может).

Параметр задан, но получается, что его тоже нужно как-то обработать?

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

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 4 | 16:17:49
Цитата Джаден ()
И еще такой момент, там на скрине при нажатии на фото, в новом окне открывается ссылка на это же фото в альбоме ВКонтакте. При этом по запросу оригинальную ссылку на фото не выдает. Как в таком случае быть?
Ссылка на фотографию в альбоме это: http://vk.com/photo-id альбома_id фото
По запросу выдает и id альбома, и id фото.
Цитата Джаден ()
{"response":[{"pid":288585881,"aid":161700051,"owner_id":-41781142,"user_id":100,"src":"http:\/
А значит, из них можно составить ссылку.
Цитата Фрагмент кода Javascript
'<a target="_blank" href="http://vk.com/photo' + data.response[i].owner_id + '_' + data.response[i].pid + '">'
И закрывающий тег </a> после изображения еще добавить.

Теперь по остальному.
Цитата Джаден ()
Параметр задан, но получается, что его тоже нужно как-то обработать?
Если вам нужно куда-то выводить эти данные - то нужно. Если нет - не нужно ничего делать. И вставлять параметр зачем этот я не понимаю тогда.
Цитата Джаден ()
А если добавлять photo_sizes=1, то как вытащить, чтобы размеры фото были только определенного типа?
Тогда будет еще массив sizes, из которого нужно выбирать элемент.
Код
<script type="text/javascript">
function myFunction(data) {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < data.response[i].sizes.length; j++) {
            if (data.response[i].sizes[j].type == "m") {
                $('#myid').html( $('#myid').html() + '<a target="_blank" href="http://vk.com/photo' +
                    data.response[i].owner_id + '_' + data.response[i].pid + '">' +
                    '<img src="' + data.response[i].sizes[j].src + '" /></a>');
            }
        }
    }
};
includeJSfile('https://api.vk.com/method/photos.get?owner_id=-41781142&rev=1&photo_sizes=1&extended=1&album_id=161700051&count=4&callback=myFunction');
</script>
<div id="myid"></div>
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 5 | 22:02:39
$Tiny$, спасибо еще раз!
А если нужно добавить новый код, то куда его пристроить?
У ВКонтактного photo_sizes все картинки "пляшут" по размерам во всех вариантах. Html и css не получилось обрезать до нужного формата, точнее обрезалось, но оставалась только одна фотография.
Этот кусочек никак не изменил положение.
Код

<script src="js/jquery.resizecrop.js"></script>
<script>
    
   $(document).ready(function(){
     $('img').resizecrop({
       width:40,
       height:60,
       vertical:"top"
     });   
   });   

</script>

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 6 | 23:54:24
Цитата Джаден ()
Этот кусочек никак не изменил положение.
Потому что
Цитата Джаден ()
$(document).ready(function(){
Он действует после загрузки страницы, но до загрузки скрипта и изображений из Вконтакте, потому и не действует на них.
Код
<script src="js/jquery.resizecrop.js"></script>      
<script type="text/javascript">
function myFunction(data) {
     for (var i = 0; i < 4; i++) {
         for (var j = 0; j < data.response[i].sizes.length; j++) {
             if (data.response[i].sizes[j].type == "m") {
                 $('#myid').html( $('#myid').html() + '<a target="_blank" href="http://vk.com/photo' +
                    data.response[i].owner_id + '_' + data.response[i].pid + '">' +
                    '<img src="' + data.response[i].sizes[j].src + '" /></a>');
                 }
             }
         }
         $('img').resizecrop({
             width:40,
             height:60,
             vertical:"top"
         });
};
includeJSfile('https://api.vk.com/method/photos.get?owner_id=-41781142&rev=1&photo_sizes=1&extended=1&album_id=161700051&count=4&callback=myFunction');
</script>
<div id="myid"></div>
Цитата Джаден ()
Html и css не получилось обрезать до нужного формата
А как именно не получилось? Можно установить максимальную ширину, а можно максимальную высоту. Или и то, и другое вариации имеет различные?

Добавлено (04 Май 2015, 23:54:24)
---------------------------------------------
Недоглядел.
Цитата Джаден ()
<script src="js/jquery.resizecrop.js"></script>

Если файл "jquery.resizecrop.js" находится в корне сайта в папке "js", то нужно обращаться к нему так:
<script src="/js/jquery.resizecrop.js"></script>
Сообщение отредактировал $Tiny$ - Вторник, 05 Май 2015, 00:01:26
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 7 | 07:29:06
$Tiny$, делала вот так
Код

<style type="text/css">
   .imgPicture {
     display: inline-block;
     width: 200px;
     height: 120px;
     overflow: hidden;
     border: 5px solid #FFFFFF;
     background: #FFFFFF;
     outline: 1px solid #CCCCCC;
     margin: 10px;
   }
   .imgPicture img {
     width: 200px;
     border: none;
     margin: 0;
     padding: 0;
   }
</style>

Получалось такое, но изображение оставалось одно

Цитата $Tiny$ ()
Если файл "jquery.resizecrop.js" находится в корне сайта в папке "js", то нужно обращаться к нему так:
<script src="/js/jquery.resizecrop.js"></script>

Спасибо! Я полностью весь путь написала и все стало работать.
Но можно ли привязать, чтобы img менялось только в div id="myid"? Он таким образом все на странице режет. Думала, что может, чтобы по .vk.me выбирал, но опять же, если добавится изображение с адресом из контакта в другой блок не с фотографиями, то его тоже порежет, а это не нужно.
Прикрепления: 7973951.jpg(12Kb)

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 8 | 10:01:36
Цитата Джаден ()
делала вот так
Странно. Да вроде бы все нормально должно отображаться со стилями этими.

Цитата Джаден ()
Но можно ли привязать, чтобы img менялось только в div id="myid"?
Можно.
Код
$('#myid').find('img').resizecrop({
     width:40,
     height:60,
     vertical:"top"
});
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 9 | 11:34:30
Цитата $Tiny$ ()
Странно. Да вроде бы все нормально должно отображаться со стилями этими.

Цитата

<style type="text/css">
.imgPicture {
display: inline-block;
width: 200px;
height: 120px;
overflow: hidden;
border: 5px solid #FFFFFF;
background: #FFFFFF;
outline: 1px solid #CCCCCC;
margin: 10px;
}
.imgPicture img {
width: 200px;
border: none;
margin: 0;
padding: 0;
}
</style>

<script src="http://klabiama.name/desing/Photos/jquery.resizecrop-1.0.3.js"></script>

<script type="text/javascript">
function myFunction(data) {
for (var i = 0; i < 20; i++) {
for (var j = 0; j < data.response[i].sizes.length; j++) {
if (data.response[i].sizes[j].type == "x") { $('#myid').html( $('#myid').html() + '<a target="_blank" href="http://vk.com/photo' + data.response[i].owner_id + '_' + data.response[i].pid + '">' + '<img src="' + data.response[i].sizes[j].src + '" /></a>' + ' ');}
}
}
$('#myid').find('img').resizecrop({ width:200, height:120, vertical:"top" });
};
includeJSfile('https://api.vk.com/method/photos.get?owner_id=-41781142&rev=1&photo_sizes=1&extended=1&album_id=161700051&count=20&callback=myFunction');
</script>
<span class="imgPicture">
<div id="myid" align="center"></div>
</span>


Меняла и на <div class="imgPicture"> и <div id="imgPicture"> и ставила <div id="myid" class="imgPicture">, все равно.

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 10 | 13:27:03
<style type="text/css">
.imgPicture {
display: inline-block;
width: 200px;
height: 120px;
overflow: hidden;
border: 5px solid #FFFFFF;
background: #FFFFFF;
outline: 1px solid #CCCCCC;
margin: 10px;
}
.imgPicture img {
width: 200px;
border: none;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function myFunction(data) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < data.response[i].sizes.length; j++) {
if (data.response[i].sizes[j].type == "x") {
$('#myid').html( $('#myid').html() + '<span class="imgPicture"><a target="_blank" href="http://vk.com/photo' +
data.response[i].owner_id + '_' + data.response[i].pid + '">' +
'<img src="' + data.response[i].sizes[j].src + '" /></a></span>');
}
}
}
};
includeJSfile('https://api.vk.com/method/photos.get?owner_id=-41781142&rev=1&photo_sizes=1&extended=1&album_id=161700051&count=4&callback=myFunction');
</script>
<div id="myid"></div>
Сообщение отредактировал $Tiny$ - Вторник, 05 Май 2015, 13:32:09
Джаден
Сообщений: 9
Репутация: 3

Сообщение # 11 | 14:39:52
$Tiny$, спасибо большое, все идеально! И все работает. respect

Литтлмун ♥ Адам
$Tiny$
Сообщений: 193
Репутация: 61

Сообщение # 12 | 15:13:09
Вам спасибо за интересный вопрос smile
Цитата Джаден ()
Фотографии с ВКонтакте на страницу сайта
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Фотографии с ВКонтакте на страницу сайта (vk api photos.get)
Страница 1 из 11
Поиск: