Чат сообщества
|
   |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Фотографии с ВКонтакте на страницу сайта (vk api photos.get) |
| Фотографии с ВКонтакте на страницу сайта |
|
На одном из сайтов(не 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}]} Куда его, что с ним делать, ума не приложу.  Может вообще с самого начала делаю не правильно? Кто-нибудь реализовывал такое? Сможет объяснить подробно как оно?Прикрепления:
1412228.jpg
(168.7 Kb)
Литтлмун ♥ Адам
 |
|
Запрос на адрес 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. Этот скрипт выполнит функцию и фотографии появятся на блоке. |
|
$Tiny$, спасибо, все сработало! А если добавлять photo_sizes=1, то как вытащить, чтобы размеры фото были только определенного типа?
https://api.vk.com/method....unction Цитата Если был задан параметр extended=1, возвращаются дополнительные поля: likes — количество отметок Мне нравится и информация о том, поставил ли лайк текущий пользователь; comments — количество комментариев к фотографии; tags — количество отметок на фотографии; can_comment — может ли текущий пользователь комментировать фото (1 — может, 0 — не может). Параметр задан, но получается, что его тоже нужно как-то обработать? И еще такой момент, там на скрине при нажатии на фото, в новом окне открывается ссылка на это же фото в альбоме ВКонтакте. При этом по запросу оригинальную ссылку на фото не выдает. Как в таком случае быть? Литтлмун ♥ Адам
|
|
Цитата Джаден (  )И еще такой момент, там на скрине при нажатии на фото, в новом окне открывается ссылка на это же фото в альбоме ВКонтакте. При этом по запросу оригинальную ссылку на фото не выдает. Как в таком случае быть? По запросу выдает и 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 + '">' Теперь по остальному. Цитата Джаден ( )Параметр задан, но получается, что его тоже нужно как-то обработать? Цитата Джаден ( )А если добавлять photo_sizes=1, то как вытащить, чтобы размеры фото были только определенного типа? Код <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> |
|
$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> Литтлмун ♥ Адам
|
|
Цитата Джаден ( )Этот кусочек никак не изменил положение. Цитата Джаден ( )$(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
|
|
$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
(12.2 Kb)
Литтлмун ♥ Адам
|
|
Цитата Джаден ( )делала вот так Цитата Джаден ( )Но можно ли привязать, чтобы img менялось только в div id="myid"? Код $('#myid').find('img').resizecrop({ width:40, height:60, vertical:"top" }); |
|
Цитата $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">, все равно. Литтлмун ♥ Адам
|
|
<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
|
| |||
| |||