个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个使用 InstafeedJS 和 SimplyScroll 的网站(测试页 here ) - 但我一生都无法弄清楚为什么提要不会滚动。我是新手，所以要友善!
<!DOCTYPE>
<html>
<head>
<title>Instafeed Test!</title>
<link rel="Stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.simplyscroll.css" media="all" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("scroller").simplyScroll();
});
})(jQuery);
</script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 'XXXXXXXX',
clientId: 'XXXXXXXXXXXXXXXX',
accessToken: 'XXXXXXXX.XXXXXX.XXXXXXXXXXXXXXXX',
resolution: 'thumbnail',
template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
sortBy: 'most-recent',
limit: 12,
links: false
});
feed.run();
</script>
</head>
<body>
<div class="simply-scroll simply-scroll-container">
<div class="simply-scroll-clip">
<div id="instafeed" class="simply-scroll-list" style="width: 10000px;"></div>
</div>
</div>
</body>
</html>
最佳答案
我已将此案例传递为 an issue到 InstafeedJS 的线程。
据说这个案例确实是滚动库的问题。另一件事 - jquery.simplyscroll自 2012 年以来不再受支持且未更新。
您最好选择一个现代且受支持的轮播库。按照建议，我找到了一种使用另一个名为 slick 进行滚动的方法。 如图所示。
为此，您需要 the source 中的 3 个文件或者简单地 fork it并按如下方式使用它们:
HTML 头部
<link href="slick/slick/slick.css" rel='stylesheet' type='text/css' media="screen" />
<link href="slick/slick/slick-theme.css" rel='stylesheet' type='text/css' media="screen" />
<script type="text/javascript" src="slick/slick/slick.min.js"></script>
HTML 正文
<div class="container">
<div class="tweet_txt">
<div id="instafeed"></div>
</div>
<button type="button" id="load-more">Load More</button>
</div>
CSS
.tweet_txt {
width: 600px;
height: 100px;
overflow: hidden;
}
#instafeed {
width: 1200px;
display: block;
margin: 0;
padding: 0;
line-height: 0;
margin-top: 20px;
overflow: hidden;
}
#instafeed div {
float: left;
width: 50%;
display: inline-block;
margin: 0!important;
padding: 0!important;
}
#instafeed img {
height: 100px;
width: 100px;
}
#instafeed .insta-likes {
width: 100%;
height: 100%;
margin-top: -100%;
opacity: 0;
text-align: center;
letter-spacing: 1px;
background: rgba(255,255,255,0.4);
position: absolute;
text-shadow: 2px 2px 8px #fff;
font: normal 400 11px Playfair Display,sans-serif;
color: #0a0a0a;
line-height: normal;
}
JS
// grab out load more button
var loadButton = document.getElementById('load-more');
//var ulfeed = document.getElementById('instafeed');
//var scroll = new simplyScroll();
var feed = new Instafeed({
get: 'user',
limit: 11,
sortBy:'most-recent',
userId: YOUR ID,
resolution: 'standard_resolution',
accessToken: 'YOUR TOKEN',
template: '<div><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></div>',
after: function() {
// run slick for scrolling
$('#instafeed').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
// every time we load more, run this function
if (!this.hasNext()) {
// disable button if no more results to load
loadButton.setAttribute('disabled', 'disabled');
}
},
success: function() {
//called when Instagram returns valid json data
},
});
// bind the load more button
loadButton.addEventListener('click', function() {
feed.next();
});
// run instafeed!
feed.run();
您可以通过代码了解结果的样子。
在 the discussion有指向 JSFiddle 的链接以及它所在的位置 Lives .
关于javascript - SimplyScroll 不会与 InstafeedJS 一起移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46707274/
26
4
0
我正在尝试从 http://instafeedjs.com/ 获取 instafeed .我正在使用以下代码: var feed = new Instafeed({ get: 'tagged
我有一个使用 InstafeedJS 和 SimplyScroll 的网站(测试页 here ) - 但我一生都无法弄清楚为什么提要不会滚动。我是新手，所以要友善! Instafeed Te
使用 InstafeedJS，我希望能够添加一个按钮来隐藏在初始提要之后加载的任何内容(例如，用户单击了一次或多次显示更多)。我最初的想法是将类或数据标记添加到其他提要项目，然后使用自定义按钮隐藏它们
我尝试使用 http://instafeedjs.com/ 从 Instagram 动态中获取最新图片我让插件正常工作，因为我可以在控制台中看到我的图像被获取，但它们没有以某种方式显示。我的代码如下
我正在尝试通过 fancybox(或任何其他灯箱!!)打开我的 instafeed 图片链接!我目前正在使用 Easy Fancybox plugin和 InstafeedJS .简单地将 fancy
我是一名优秀的程序员,十分优秀！