0

Скрипты instafeed.js + scrollForever подключаются в хедере сайта.

Ссылка на сайт https://codeshare.io/aJpjwq

Формирую блок изображений из инстаграмма с помощью скрипта instafeed.js. (В коде страницы указывается div с id и все "внутренности" формируются скриптом).

Перед закрытием добавлен код работы скроллера scrollForever.

В итоге должно быть что-то такое (1-й скроллер)

http://www.jqueryscript.net/demo/jQuery-Plugin-For-Infinite-Any-Content-Scroller-scrollForever/

Код (более полный можно увидеть в коде страницы по 1-й ссылке):

<script type="text/javascript">
var feed = new Instafeed({
get:"user",
userId: ##########, // Instagram ID
accessToken:"###############################", // Instagram AT
limit: 30,
resolution:"standard_resolution",
template: `'<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="instainfo"><div class="instadiv"><span class="instaspan">FOLLOW ME ON <i class="fa fa-instagram"></i></span></div></div></a></li>'`
});
feed.run();
</script>
<div id="instagram-area" class="a">
<!-- Instafeed  -->
<ul id="instafeed"></ul>
<!-- End Instafeed  -->
</div>
....
<!-- Instagramm scroller Plugin initialization -->
<script type="text/javascript">
(function($){
$(function(){
// var time1 = new Date;
$("#instagram-area").scrollForever({delayTime:30});		
});
})(jQuery);
</script>
<!-- End Instagramm scroller Plugin initialization -->
</body>

Все, что внутри

<ul id="instafeed"></ul>

формируется скриптом instafeed.

Сравнил с примером, у меня для блока контейнера скрипт выставляет style="width: 0px;"...

Как его поправить, чтобы закрутился?

12
  • Я не понял как то что на вашем сайте смотреть? немного можно подробно? и с кодами ? 13 июн 2017 в 5:53
  • Добавил код в описание, но лучше в коде страницы смотреть )
    – Артем
    13 июн 2017 в 6:52
  • тогда скажите на каком блоке должны загрузиться ваши картинки? 13 июн 2017 в 6:58
  • ul id="instafeed" - картинки загружаются, мне нужно, чтобы картинки перемещались как бегущая строка... Может scrollForever не срабатывает из-за того, что сам блок с картинками формируется динамически (яваскриптом)? Но код формирования самого блока картинок расположен выше по странице, чем код организации карусели...
    – Артем
    13 июн 2017 в 7:02
  • инициализируй scrollForever после загрузки картинок. 13 июн 2017 в 7:03

1 ответ 1

0

Напортачил в обрамлении кода для устранения ошибок jquery. Из-за этого и не крутилось...

Подсказали на форуме по яваскрипт javascript.ru. Теперь все работает.

var feed = new Instafeed({
get:"user",
userId: ########, // Instagram ID
accessToken:"#################", // Instagram AT
limit: 30,
resolution:"standard_resolution",
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="instainfo"><div class="instadiv"><span class="instaspan">FOLLOW ME ON <i class="fa fa-instagram"></i></span></div></div></a></li>',
after: function() {
   jQuery("#instagram-area").scrollForever();
}
});
jQuery(function() {
  feed.run();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.