Всем привет.
Помогите, кто сталкивался... Нужно загрузить на страницы сайта виджет группы ВКонтакте. Для этого, на оффсайте пишут, что нужно сделать так:
1.
<script type="text/javascript" src="http://vk.com/js/api/share.js?11" charset="windows-1251"></script>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?52"></script>
2.
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "226", height: "290"}, 4122ххххх);
</script>
Задача состоит в том, чтобы загрузить этот виджет в случае, если место его появления окажется на экране (скролл).
Я установил плагин
https://github.com/morr/jquery.appear/ который создает новый селектор (:in-viewport).
Потом с его помощью загружаю нужные блоки "по надобности, когда они попадают на экран", вот так:
$(document).ready(function()
{
$(function() {
$(document).on("scroll", window, function(event){
$("#VKBox:in-viewport").load(ajaxURLtoVKBox);
});
});
})
Если проделать такое с любым блоком, будь то статический ХТМЛ или динамический, все работает прекрасно. А вот ВК блок глючит конкретно. Либо вообще не открывается, либо открывается много раз, по разу для каждого сегмента скроллинга мышью!
По ссылке
ajaxURLtoVKBox создал такой код:
<div id="vk_groups"></div>
$(document).ready(function(){
$.getScript("http://vk.com/js/api/share.js?11");
$.getScript("http://userapi.com/js/api/openapi.js?52")
.done(function(script, textStatus) {VK.Widgets.Group("vk_groups", {mode: 0, width: "226", height: "290"}, 412ххххххх);});
// ПРОБОВАЛ И ТАК:
/*$.ajax({
url: "http://vk.com/js/api/share.js?11",
dataType: "script",
success: function(){}
});
$.ajax({
url: "http://userapi.com/js/api/openapi.js?52",
dataType: "script",
success: function(){
VK.Widgets.Group("vk_groups", {mode: 0, width: "226", height: "290"}, 412хххххх);
}
});*/
})
Буду благодарен любой помощи!
Спасибо.