尝试使用SimplyScroll滚动Instagram图像,但无法确定正确的HTML标记以使两个脚本一起运行。
我是一名超级新手网页设计师,我已经做了几天的研究,试图找出正确的JavaScript HTML来让这两个脚本一起工作,但无济于事。任何帮助或对资源的指导都表示赞赏!
最好,我能理解,正确的方法是使用Instafeed HTML创建目标ID,SimplyScroll将其称为源图像。
最近我到目前为止已经到了。
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
target: 'instagram_list',
userId: XXXXXXXXXXX,
limit: 15,
accessToken: 'XXXXXXXXXXXXXXXXXXXXXX,
resolution: 'thumbnail',
after: function() {
$("#instagram_list").simplyScroll({
speed: 1,
frameRate: 20,
orientation: 'horizontal',
direction: 'forwards',
customClass: 'instagram_scroller'
});
}
});
(jQuery);
feed.run();
</script>
<div id="instagram_list" class="simply-scroll-clip"> </div>
在此示例中,Instafeed加载图像,但未正确设置样式且不滚动。如果用户重新加载页面(不刷新,而是在浏览器中选择URL并点击输入),则按预期工作。
我完全不知道它仅在页面重新加载时如何以及为何起作用。
半工作页面的链接位于
之下答案 0 :(得分:1)
我也不得不摆弄一下才能使这个工作,我把它放在我为朋友做的网站上,你可以看看它是否有帮助(http://www.zervasandpepper.com - 警告,它播放音乐当你加载它!)我仍然想稍微调整一下,例如加载时防止行重叠,但它确实按预期工作。
我导入了所需的脚本,包括SimplyScroll JavaScript,Instafeed JavaScript和SimplyScroll css。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<script type="text/javascript" src="../scripts/Plugins/jquery.simplyscroll.min.js"></script>
<script type="text/javascript" src="../scripts/Plugins/instafeed.min.js"></script>
<link rel="stylesheet" href="../scripts/Plugins/jquery.simplyscroll.css" media="all"
type="text/css">
<script type="text/javascript">
(function ($) {
$(function () { //on DOM ready
var feed = new Instafeed({
get: 'user',
userId: XXXXXXXX,
clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
accessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
});
feed.run();
$("#instafeed").simplyScroll({
autoMode: 'bounce',
startOnLoad: true,
auto: true,
speed: 1,
pauseOnHover: true,
pauseOnTouch: true
});
});
})(jQuery);
</script>
命令的排序让我想知道你的JavaScript中是否有一些东西被命令以防止在加载图像后发生滚动。这可以解释为什么这些图片一旦被Instagram加载就会滚动。
在您的网站上尝试以下脚本(根据需要进行调整)并查看是否有帮助,它会创建Feed,然后应用滚动:
<script type="text/javascript">
(function ($) {
$(function () { //on DOM ready
var feed = new Instafeed({
get: 'user',
target: 'instagram_list',
userId: XXXXXXXXXXXXXXx,
limit: 15,
accessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
resolution: 'thumbnail'
});
feed.run();
$("#instagram_list").simplyScroll({
speed: 1,
frameRate: 20,
orientation: 'horizontal',
direction: 'forwards',
customClass: 'instagram_scroller'
});
});
})(jQuery);
</script>
由于